Fix aesthetics in button for adding event to Google Calendar

Author: sdelquin

apps/events/static/events/css/event/schedule.scss

@@ -162,7 +162,15 @@
   .not-closed-schedule {
     margin-top: 1rem;
     i {
-      margin-right: .3rem;
+      margin-right: 0.3rem;
+    }
+  }
+
+  .section-detail {
+    text-align: center;
+
+    a#add-to-google-calendar {
+      font-size: medium;
     }
   }
 }

apps/events/templates/events/event.html

@@ -128,15 +128,20 @@ <h1 class="title section-title dyn-anchor-heading">
           Agenda
           <a class="dyn-anchor-link" href="#schedule"><i class="fas fa-link"></i></a>
         </p>
-        <p class="section-detail"><i class="far fa-calendar-alt"></i> {{ event.start_date|as_short_date }}</p>
-        <a target="_blank" href="{{ event.get_google_calendar_url }}">Añadir a Google Calendar</a>
+      </h1>
+
+      <div class="section-detail">
+        <p><i class="far fa-calendar-alt"></i> {{ event.start_date|as_short_date }}</p>
+
+        <a id="add-to-google-calendar" target="_blank" href="{{ event.get_google_calendar_url }}"><i class="far fa-calendar-plus"></i> Añadir a Google Calendar</a>
+
         {% if event.schedule_for_display and not event.closed_schedule %}
           <span class="tag is-warning is-medium not-closed-schedule">
             <i class="fas fa-info-circle"></i>
             La agenda aún no está cerrada!
           </span>
         {% endif %}
-      </h1>
+      </div>
 
       <div class="schedule-table">
         {% for row in event.schedule_for_display %}