From 8e59e2f06bd25d87f156f76c96c65277ad73c150 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Thu, 10 Jun 2021 10:33:16 +0200
Subject: [PATCH] Event components enhancements

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/components/Event/EventBanner.vue       |   2 +-
 js/src/components/Event/EventListCard.vue     |  32 +-
 .../components/Event/EventMetadataBlock.vue   |   2 +-
 js/src/components/Event/OrganizerPicker.vue   |   4 +-
 .../Event/OrganizerPickerWrapper.vue          |   8 +-
 js/src/views/Event/Event.vue                  | 569 +++++++++---------
 6 files changed, 309 insertions(+), 308 deletions(-)

diff --git a/js/src/components/Event/EventBanner.vue b/js/src/components/Event/EventBanner.vue
index bbdae2c67..1e82f0c38 100644
--- a/js/src/components/Event/EventBanner.vue
+++ b/js/src/components/Event/EventBanner.vue
@@ -22,7 +22,7 @@ export default class EventBanner extends Vue {
 .banner-container {
   display: flex;
   justify-content: center;
-  height: 400px;
+  height: 30vh;
 }
 ::v-deep img {
   width: 100%;
diff --git a/js/src/components/Event/EventListCard.vue b/js/src/components/Event/EventListCard.vue
index bb2be7607..26f92609a 100644
--- a/js/src/components/Event/EventListCard.vue
+++ b/js/src/components/Event/EventListCard.vue
@@ -24,7 +24,7 @@
             <h3 class="title">{{ participation.event.title }}</h3>
           </router-link>
         </div>
-        <div class="participation-actor has-text-grey">
+        <div class="participation-actor">
           <span>
             <b-icon
               icon="earth"
@@ -50,17 +50,20 @@
             "
             >{{ participation.event.physicalAddress.locality }} -</span
           >
-          <span>
-            <i18n tag="span" path="Organized by {name}">
-              <popover-actor-card
-                slot="name"
-                :actor="organizerActor"
-                :inline="true"
-              >
-                {{ organizerActor.displayName() }}
-              </popover-actor-card>
-            </i18n>
-          </span>
+          <i18n
+            tag="span"
+            path="Organized by {name}"
+            v-if="organizerActor.id !== currentActor.id"
+          >
+            <popover-actor-card
+              slot="name"
+              :actor="organizerActor"
+              :inline="true"
+            >
+              {{ organizerActor.displayName() }}
+            </popover-actor-card>
+          </i18n>
+          <span v-else>{{ $t("Organized by you") }}</span>
         </div>
         <div>
           <span
@@ -116,7 +119,9 @@
                   $tc(
                     "{count} requests waiting",
                     participation.event.participantStats.notApproved,
-                    { count: participation.event.participantStats.notApproved }
+                    {
+                      count: participation.event.participantStats.notApproved,
+                    }
                   )
                 }}
               </b-button>
@@ -347,6 +352,7 @@ article.box {
   .list-card {
     display: flex;
     align-items: center;
+    padding: 0 6px;
 
     .actions {
       padding-right: 7.5px;
diff --git a/js/src/components/Event/EventMetadataBlock.vue b/js/src/components/Event/EventMetadataBlock.vue
index 6128c9e27..06c2f795f 100644
--- a/js/src/components/Event/EventMetadataBlock.vue
+++ b/js/src/components/Event/EventMetadataBlock.vue
@@ -23,7 +23,7 @@ export default class EventMetadataBlock extends Vue {
 h2 {
   font-size: 1.8rem;
   font-weight: 500;
-  color: #f7ba30;
+  color: $violet;
 }
 
 div.eventMetadataBlock {
diff --git a/js/src/components/Event/OrganizerPicker.vue b/js/src/components/Event/OrganizerPicker.vue
index 41f61b1c0..c9d8baf45 100644
--- a/js/src/components/Event/OrganizerPicker.vue
+++ b/js/src/components/Event/OrganizerPicker.vue
@@ -66,7 +66,9 @@ export default class OrganizerPicker extends Vue {
       return this.value;
     }
     if (this.currentActor) {
-      return this.currentActor;
+      return this.identities.find(
+        (identity) => identity.id === this.currentActor.id
+      );
     }
     return undefined;
   }
diff --git a/js/src/components/Event/OrganizerPickerWrapper.vue b/js/src/components/Event/OrganizerPickerWrapper.vue
index e1af655dc..9bfaa8c91 100644
--- a/js/src/components/Event/OrganizerPickerWrapper.vue
+++ b/js/src/components/Event/OrganizerPickerWrapper.vue
@@ -110,6 +110,7 @@ import { IActor, IGroup, IPerson, usernameWithDomain } from "../../types/actor";
 import OrganizerPicker from "./OrganizerPicker.vue";
 import {
   CURRENT_ACTOR_CLIENT,
+  IDENTITIES,
   LOGGED_USER_MEMBERSHIPS,
 } from "../../graphql/actor";
 import { Paginate } from "../../types/paginate";
@@ -152,6 +153,7 @@ const MEMBER_ROLES = [
       },
       update: (data) => data.loggedUser.memberships,
     },
+    identities: IDENTITIES,
   },
 })
 export default class OrganizerPickerWrapper extends Vue {
@@ -161,6 +163,8 @@ export default class OrganizerPickerWrapper extends Vue {
 
   currentActor!: IPerson;
 
+  identities!: IPerson[];
+
   isComponentModalActive = false;
 
   @Prop({ type: Array, required: false, default: () => [] })
@@ -200,7 +204,9 @@ export default class OrganizerPickerWrapper extends Vue {
       return this.value;
     }
     if (this.currentActor) {
-      return this.currentActor;
+      return this.identities.find(
+        (identity) => identity.id === this.currentActor.id
+      );
     }
     return undefined;
   }
diff --git a/js/src/views/Event/Event.vue b/js/src/views/Event/Event.vue
index 6b378ac80..a9e390f67 100755
--- a/js/src/views/Event/Event.vue
+++ b/js/src/views/Event/Event.vue
@@ -1,299 +1,296 @@
 <template>
   <div class="container">
     <transition appear name="fade" mode="out-in">
-      <div>
-        <div
-          class="header-picture"
-          v-if="event.picture"
-          :style="`background-image: url('${event.picture.url}')`"
-        />
-        <div class="header-picture-default" v-else />
-        <section class="section intro">
-          <div class="columns">
-            <div class="column is-1-tablet">
-              <date-calendar-icon :date="event.beginsOn" />
-            </div>
-            <div class="column">
-              <h1 class="title" style="margin: 0">{{ event.title }}</h1>
-              <div class="organizer">
-                <span v-if="event.organizerActor && !event.attributedTo">
-                  <popover-actor-card
-                    :actor="event.organizerActor"
-                    :inline="true"
+      <div class="wrapper">
+        <event-banner :picture="event.picture" />
+        <div class="intro-wrapper">
+          <div class="date-calendar-icon-wrapper">
+            <date-calendar-icon :date="event.beginsOn" />
+          </div>
+          <section class="intro">
+            <div class="columns">
+              <div class="column">
+                <h1 class="title" style="margin: 0">{{ event.title }}</h1>
+                <div class="organizer">
+                  <span v-if="event.organizerActor && !event.attributedTo">
+                    <popover-actor-card
+                      :actor="event.organizerActor"
+                      :inline="true"
+                    >
+                      <span>
+                        {{
+                          $t("By @{username}", {
+                            username: usernameWithDomain(event.organizerActor),
+                          })
+                        }}
+                      </span>
+                    </popover-actor-card>
+                  </span>
+                  <span
+                    v-else-if="
+                      event.attributedTo &&
+                      event.options.hideOrganizerWhenGroupEvent
+                    "
                   >
-                    <span>
-                      {{
-                        $t("By @{username}", {
-                          username: usernameWithDomain(event.organizerActor),
-                        })
-                      }}
-                    </span>
-                  </popover-actor-card>
-                </span>
-                <span
-                  v-else-if="
-                    event.attributedTo &&
-                    event.options.hideOrganizerWhenGroupEvent
-                  "
-                >
-                  <popover-actor-card
-                    :actor="event.attributedTo"
-                    :inline="true"
-                  >
-                    {{
-                      $t("By @{group}", {
-                        group: usernameWithDomain(event.attributedTo),
-                      })
-                    }}
-                  </popover-actor-card>
-                </span>
-                <span v-else-if="event.organizerActor && event.attributedTo">
-                  <i18n path="By {group}">
                     <popover-actor-card
                       :actor="event.attributedTo"
-                      slot="group"
                       :inline="true"
+                    >
+                      {{
+                        $t("By @{group}", {
+                          group: usernameWithDomain(event.attributedTo),
+                        })
+                      }}
+                    </popover-actor-card>
+                  </span>
+                  <span v-else-if="event.organizerActor && event.attributedTo">
+                    <i18n path="By {group}">
+                      <popover-actor-card
+                        :actor="event.attributedTo"
+                        slot="group"
+                        :inline="true"
+                      >
+                        <router-link
+                          :to="{
+                            name: RouteName.GROUP,
+                            params: {
+                              preferredUsername: usernameWithDomain(
+                                event.attributedTo
+                              ),
+                            },
+                          }"
+                        >
+                          {{
+                            $t("@{group}", {
+                              group: usernameWithDomain(event.attributedTo),
+                            })
+                          }}
+                        </router-link>
+                      </popover-actor-card>
+                    </i18n>
+                  </span>
+                </div>
+                <p class="tags" v-if="event.tags && event.tags.length > 0">
+                  <router-link
+                    v-for="tag in event.tags"
+                    :key="tag.title"
+                    :to="{ name: RouteName.TAG, params: { tag: tag.title } }"
+                  >
+                    <tag>{{ tag.title }}</tag>
+                  </router-link>
+                </p>
+                <b-tag type="is-warning" size="is-medium" v-if="event.draft"
+                  >{{ $t("Draft") }}
+                </b-tag>
+                <span
+                  class="event-status"
+                  v-if="event.status !== EventStatus.CONFIRMED"
+                >
+                  <b-tag
+                    type="is-warning"
+                    v-if="event.status === EventStatus.TENTATIVE"
+                    >{{ $t("Event to be confirmed") }}</b-tag
+                  >
+                  <b-tag
+                    type="is-danger"
+                    v-if="event.status === EventStatus.CANCELLED"
+                    >{{ $t("Event cancelled") }}</b-tag
+                  >
+                </span>
+              </div>
+              <div class="column is-3-tablet">
+                <participation-section
+                  :participation="participations[0]"
+                  :event="event"
+                  :anonymousParticipation="anonymousParticipation"
+                  @join-event="joinEvent"
+                  @join-modal="isJoinModalActive = true"
+                  @join-event-with-confirmation="joinEventWithConfirmation"
+                  @confirm-leave="confirmLeave"
+                  @cancel-anonymous-participation="cancelAnonymousParticipation"
+                />
+                <div class="has-text-right">
+                  <template class="visibility" v-if="!event.draft">
+                    <p v-if="event.visibility === EventVisibility.PUBLIC">
+                      {{ $t("Public event") }}
+                      <b-icon icon="earth" />
+                    </p>
+                    <p v-if="event.visibility === EventVisibility.UNLISTED">
+                      {{ $t("Private event") }}
+                      <b-icon icon="link" />
+                    </p>
+                  </template>
+                  <template v-if="!event.local && organizer">
+                    <a :href="event.url">
+                      <tag>{{ organizer.domain }}</tag>
+                    </a>
+                  </template>
+                  <p>
+                    <router-link
+                      class="participations-link"
+                      v-if="actorIsOrganizer && event.draft === false"
+                      :to="{
+                        name: RouteName.PARTICIPATIONS,
+                        params: { eventId: event.uuid },
+                      }"
+                    >
+                      <!-- We retire one because of the event creator who is a participant -->
+                      <span v-if="event.options.maximumAttendeeCapacity">
+                        {{
+                          $tc(
+                            "{available}/{capacity} available places",
+                            event.options.maximumAttendeeCapacity -
+                              event.participantStats.participant,
+                            {
+                              available:
+                                event.options.maximumAttendeeCapacity -
+                                event.participantStats.participant,
+                              capacity: event.options.maximumAttendeeCapacity,
+                            }
+                          )
+                        }}
+                      </span>
+                      <span v-else>
+                        {{
+                          $tc(
+                            "No one is participating|One person participating|{going} people participating",
+                            event.participantStats.participant,
+                            {
+                              going: event.participantStats.participant,
+                            }
+                          )
+                        }}
+                      </span>
+                    </router-link>
+                    <span v-else>
+                      <span v-if="event.options.maximumAttendeeCapacity">
+                        {{
+                          $tc(
+                            "{available}/{capacity} available places",
+                            event.options.maximumAttendeeCapacity -
+                              event.participantStats.participant,
+                            {
+                              available:
+                                event.options.maximumAttendeeCapacity -
+                                event.participantStats.participant,
+                              capacity: event.options.maximumAttendeeCapacity,
+                            }
+                          )
+                        }}
+                      </span>
+                      <span v-else>
+                        {{
+                          $tc(
+                            "No one is participating|One person participating|{going} people participating",
+                            event.participantStats.participant,
+                            {
+                              going: event.participantStats.participant,
+                            }
+                          )
+                        }}
+                      </span>
+                    </span>
+                    <b-tooltip
+                      type="is-dark"
+                      v-if="!event.local"
+                      :label="
+                        $t(
+                          'The actual number of participants may differ, as this event is hosted on another instance.'
+                        )
+                      "
+                    >
+                      <b-icon size="is-small" icon="help-circle-outline" />
+                    </b-tooltip>
+                    <b-icon icon="ticket-confirmation-outline" />
+                  </p>
+                  <b-dropdown position="is-bottom-left" aria-role="list">
+                    <b-button
+                      slot="trigger"
+                      role="button"
+                      icon-right="dots-horizontal"
+                    >
+                      {{ $t("Actions") }}
+                    </b-button>
+                    <b-dropdown-item
+                      aria-role="listitem"
+                      has-link
+                      v-if="actorIsOrganizer || event.draft"
                     >
                       <router-link
                         :to="{
-                          name: RouteName.GROUP,
-                          params: {
-                            preferredUsername: usernameWithDomain(
-                              event.attributedTo
-                            ),
-                          },
+                          name: RouteName.EDIT_EVENT,
+                          params: { eventId: event.uuid },
                         }"
                       >
-                        {{
-                          $t("@{group}", {
-                            group: usernameWithDomain(event.attributedTo),
-                          })
-                        }}
+                        {{ $t("Edit") }}
+                        <b-icon icon="pencil" />
                       </router-link>
-                    </popover-actor-card>
-                  </i18n>
-                </span>
-              </div>
-              <p class="tags" v-if="event.tags && event.tags.length > 0">
-                <router-link
-                  v-for="tag in event.tags"
-                  :key="tag.title"
-                  :to="{ name: RouteName.TAG, params: { tag: tag.title } }"
-                >
-                  <tag>{{ tag.title }}</tag>
-                </router-link>
-              </p>
-              <b-tag type="is-warning" size="is-medium" v-if="event.draft"
-                >{{ $t("Draft") }}
-              </b-tag>
-              <span
-                class="event-status"
-                v-if="event.status !== EventStatus.CONFIRMED"
-              >
-                <b-tag
-                  type="is-warning"
-                  v-if="event.status === EventStatus.TENTATIVE"
-                  >{{ $t("Event to be confirmed") }}</b-tag
-                >
-                <b-tag
-                  type="is-danger"
-                  v-if="event.status === EventStatus.CANCELLED"
-                  >{{ $t("Event cancelled") }}</b-tag
-                >
-              </span>
-            </div>
-            <div class="column is-3-tablet">
-              <participation-section
-                :participation="participations[0]"
-                :event="event"
-                :anonymousParticipation="anonymousParticipation"
-                @join-event="joinEvent"
-                @join-modal="isJoinModalActive = true"
-                @join-event-with-confirmation="joinEventWithConfirmation"
-                @confirm-leave="confirmLeave"
-                @cancel-anonymous-participation="cancelAnonymousParticipation"
-              />
-              <div class="has-text-right">
-                <template class="visibility" v-if="!event.draft">
-                  <p v-if="event.visibility === EventVisibility.PUBLIC">
-                    {{ $t("Public event") }}
-                    <b-icon icon="earth" />
-                  </p>
-                  <p v-if="event.visibility === EventVisibility.UNLISTED">
-                    {{ $t("Private event") }}
-                    <b-icon icon="link" />
-                  </p>
-                </template>
-                <template v-if="!event.local && organizer">
-                  <a :href="event.url">
-                    <tag>{{ organizer.domain }}</tag>
-                  </a>
-                </template>
-                <p>
-                  <router-link
-                    class="participations-link"
-                    v-if="actorIsOrganizer && event.draft === false"
-                    :to="{
-                      name: RouteName.PARTICIPATIONS,
-                      params: { eventId: event.uuid },
-                    }"
-                  >
-                    <!-- We retire one because of the event creator who is a participant -->
-                    <span v-if="event.options.maximumAttendeeCapacity">
-                      {{
-                        $tc(
-                          "{available}/{capacity} available places",
-                          event.options.maximumAttendeeCapacity -
-                            event.participantStats.participant,
-                          {
-                            available:
-                              event.options.maximumAttendeeCapacity -
-                              event.participantStats.participant,
-                            capacity: event.options.maximumAttendeeCapacity,
-                          }
-                        )
-                      }}
-                    </span>
-                    <span v-else>
-                      {{
-                        $tc(
-                          "No one is participating|One person participating|{going} people participating",
-                          event.participantStats.participant,
-                          {
-                            going: event.participantStats.participant,
-                          }
-                        )
-                      }}
-                    </span>
-                  </router-link>
-                  <span v-else>
-                    <span v-if="event.options.maximumAttendeeCapacity">
-                      {{
-                        $tc(
-                          "{available}/{capacity} available places",
-                          event.options.maximumAttendeeCapacity -
-                            event.participantStats.participant,
-                          {
-                            available:
-                              event.options.maximumAttendeeCapacity -
-                              event.participantStats.participant,
-                            capacity: event.options.maximumAttendeeCapacity,
-                          }
-                        )
-                      }}
-                    </span>
-                    <span v-else>
-                      {{
-                        $tc(
-                          "No one is participating|One person participating|{going} people participating",
-                          event.participantStats.participant,
-                          {
-                            going: event.participantStats.participant,
-                          }
-                        )
-                      }}
-                    </span>
-                  </span>
-                  <b-tooltip
-                    type="is-dark"
-                    v-if="!event.local"
-                    :label="
-                      $t(
-                        'The actual number of participants may differ, as this event is hosted on another instance.'
-                      )
-                    "
-                  >
-                    <b-icon size="is-small" icon="help-circle-outline" />
-                  </b-tooltip>
-                  <b-icon icon="ticket-confirmation-outline" />
-                </p>
-                <b-dropdown position="is-bottom-left" aria-role="list">
-                  <b-button
-                    slot="trigger"
-                    role="button"
-                    icon-right="dots-horizontal"
-                  >
-                    {{ $t("Actions") }}
-                  </b-button>
-                  <b-dropdown-item
-                    aria-role="listitem"
-                    has-link
-                    v-if="actorIsOrganizer || event.draft"
-                  >
-                    <router-link
-                      :to="{
-                        name: RouteName.EDIT_EVENT,
-                        params: { eventId: event.uuid },
-                      }"
+                    </b-dropdown-item>
+                    <b-dropdown-item
+                      aria-role="listitem"
+                      has-link
+                      v-if="actorIsOrganizer || event.draft"
                     >
-                      {{ $t("Edit") }}
-                      <b-icon icon="pencil" />
-                    </router-link>
-                  </b-dropdown-item>
-                  <b-dropdown-item
-                    aria-role="listitem"
-                    has-link
-                    v-if="actorIsOrganizer || event.draft"
-                  >
-                    <router-link
-                      :to="{
-                        name: RouteName.DUPLICATE_EVENT,
-                        params: { eventId: event.uuid },
-                      }"
+                      <router-link
+                        :to="{
+                          name: RouteName.DUPLICATE_EVENT,
+                          params: { eventId: event.uuid },
+                        }"
+                      >
+                        {{ $t("Duplicate") }}
+                        <b-icon icon="content-duplicate" />
+                      </router-link>
+                    </b-dropdown-item>
+                    <b-dropdown-item
+                      aria-role="listitem"
+                      v-if="actorIsOrganizer || event.draft"
+                      @click="openDeleteEventModalWrapper"
                     >
-                      {{ $t("Duplicate") }}
-                      <b-icon icon="content-duplicate" />
-                    </router-link>
-                  </b-dropdown-item>
-                  <b-dropdown-item
-                    aria-role="listitem"
-                    v-if="actorIsOrganizer || event.draft"
-                    @click="openDeleteEventModalWrapper"
-                  >
-                    {{ $t("Delete") }}
-                    <b-icon icon="delete" />
-                  </b-dropdown-item>
+                      {{ $t("Delete") }}
+                      <b-icon icon="delete" />
+                    </b-dropdown-item>
 
-                  <hr
-                    class="dropdown-divider"
-                    aria-role="menuitem"
-                    v-if="actorIsOrganizer || event.draft"
-                  />
-                  <b-dropdown-item
-                    aria-role="listitem"
-                    v-if="!event.draft"
-                    @click="triggerShare()"
-                  >
-                    <span>
-                      {{ $t("Share this event") }}
-                      <b-icon icon="share" />
-                    </span>
-                  </b-dropdown-item>
-                  <b-dropdown-item
-                    aria-role="listitem"
-                    @click="downloadIcsEvent()"
-                    v-if="!event.draft"
-                  >
-                    <span>
-                      {{ $t("Add to my calendar") }}
-                      <b-icon icon="calendar-plus" />
-                    </span>
-                  </b-dropdown-item>
-                  <b-dropdown-item
-                    aria-role="listitem"
-                    v-if="ableToReport"
-                    @click="isReportModalActive = true"
-                  >
-                    <span>
-                      {{ $t("Report") }}
-                      <b-icon icon="flag" />
-                    </span>
-                  </b-dropdown-item>
-                </b-dropdown>
+                    <hr
+                      class="dropdown-divider"
+                      aria-role="menuitem"
+                      v-if="actorIsOrganizer || event.draft"
+                    />
+                    <b-dropdown-item
+                      aria-role="listitem"
+                      v-if="!event.draft"
+                      @click="triggerShare()"
+                    >
+                      <span>
+                        {{ $t("Share this event") }}
+                        <b-icon icon="share" />
+                      </span>
+                    </b-dropdown-item>
+                    <b-dropdown-item
+                      aria-role="listitem"
+                      @click="downloadIcsEvent()"
+                      v-if="!event.draft"
+                    >
+                      <span>
+                        {{ $t("Add to my calendar") }}
+                        <b-icon icon="calendar-plus" />
+                      </span>
+                    </b-dropdown-item>
+                    <b-dropdown-item
+                      aria-role="listitem"
+                      v-if="ableToReport"
+                      @click="isReportModalActive = true"
+                    >
+                      <span>
+                        {{ $t("Report") }}
+                        <b-icon icon="flag" />
+                      </span>
+                    </b-dropdown-item>
+                  </b-dropdown>
+                </div>
               </div>
             </div>
-          </div>
-        </section>
+          </section>
+        </div>
         <div class="event-description-wrapper">
           <aside class="event-metadata">
             <div class="sticky">
@@ -662,6 +659,7 @@ import { IConfig } from "../../types/config.model";
 import Subtitle from "../../components/Utils/Subtitle.vue";
 import Tag from "../../components/Tag.vue";
 import EventMetadataBlock from "../../components/Event/EventMetadataBlock.vue";
+import EventBanner from "../../components/Event/EventBanner.vue";
 import ActorCard from "../../components/Account/ActorCard.vue";
 import PopoverActorCard from "../../components/Account/PopoverActorCard.vue";
 import { IParticipant } from "../../types/participant.model";
@@ -683,6 +681,7 @@ import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
     Tag,
     ActorCard,
     PopoverActorCard,
+    EventBanner,
     "map-leaflet": () =>
       import(/* webpackChunkName: "map" */ "../../components/Map.vue"),
     ShareEventModal: () =>
@@ -1308,18 +1307,6 @@ export default class Event extends EventMixin {
   opacity: 0;
 }
 
-.header-picture,
-.header-picture-default {
-  height: 400px;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-.header-picture-default {
-  background-image: url("../../../public/img/mobilizon_default_card.png");
-}
-
 div.sidebar {
   display: flex;
   flex-wrap: wrap;
@@ -1353,7 +1340,7 @@ div.sidebar {
   }
 }
 
-.intro.section {
+.intro {
   background: white;
 
   .is-3-tablet {