style on my event list title

js/src/common.scss

@@ -209,9 +209,7 @@ a.list-item {
   }
 }
 
-.date-component {
+
-  background-color: $chapril_blue_light !important;
-}
 
 .time.datetime-container{
   color: $white;

js/src/components/Event/DateCalendarIcon.vue

@@ -43,13 +43,12 @@ export default class DateCalendarIcon extends Vue {
 
 <style lang="scss" scoped>
 time.datetime-container {
-  background: $backgrounds;
+  background: $chapril_blue_light;
   border: 1px solid $borders;
   border-radius: 8px;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  /*height: 50px;*/
   width: 50px;
   padding: 8px;
   text-align: center;

js/src/components/Event/EventListCard.vue

@@ -3,13 +3,21 @@
     <div class="columns">
       <div class="content column">
         <div class="title-wrapper">
+          <div class="columns">
+            <div class="column is-narrow">
               <div class="date-component">
                 <date-calendar-icon :date="participation.event.beginsOn" />
               </div>
-          <router-link :to="{ name: RouteName.EVENT, params: { uuid: participation.event.uuid } }">
+            </div>
-            <h3 class="title">{{ participation.event.title }}</h3>
+            <div class="column">
+              <router-link
+                :to="{ name: RouteName.EVENT, params: { uuid: participation.event.uuid } }"
+              >
+                <h3 class="title event-title-card">{{ participation.event.title }}</h3>
               </router-link>
             </div>
+          </div>
+        </div>
         <div class="participation-actor has-text-grey">
           <span>
             <b-icon icon="earth" v-if="participation.event.visibility === EventVisibility.PUBLIC" />
@@ -377,4 +385,11 @@ article.box {
     }
   }
 }
+.content h3.event-title-card {
+  line-height: 1em;
+  margin-top: 0.5em;
+}
+.participation-actor{
+  margin-top: 1em;
+}
 </style>

js/src/views/Search.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="section container">
-    <h1 class="title">{{ $t("Explore") }} IN DEV MODE</h1>
+    <h1 class="title">{{ $t("Explore") }}</h1>
     <section v-if="tag">
       <i18n path="Events tagged with {tag}">
         <b-tag slot="tag" type="is-light">{{ $t("#{tag}", { tag }) }}</b-tag>