Home now has a upload button and removed color name for dayelement

src/components/Home.vue

@@ -5,15 +5,22 @@
     <h2>Han har ikke hatt nok etter 60 år!</h2>
     {{ date }} -->
     <Header>Leifs opplevelser 2019</Header>
-    <Navigation></Navigation>
+    <!-- <Navigation></Navigation> -->
     
-<!--     <div class="header">
+
+    <!-- <div style="height: 2px; background-color: #cb0b0b; width:100%;"></div> -->
+    
+    <!-- <div class="header">
       <h1>{{ title }}</h1>
     </div> -->
 
     <calendar :long="false"></calendar>
+
+    <div class="add-adventure" @click="$router.push({path: '/edit'})">
+        <h1 class="add-adventure__text">Legg til en ny opplevelse +</h1>
+    </div>
     
-    <div class="" v-for="event in events">
+    <div style="margin: 2rem;" v-for="event in events">
     <!-- <div class="container" v-for="event in events"> -->
       <event-page :eventData="event"></event-page>
     </div>
@@ -77,6 +84,26 @@ export default {
     }
   }
 
+  .add-adventure {
+    width: 85vw;
+    border: 2px solid #cb0b0b;
+    border-radius: 6px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center; 
+    justify-content: center;
+    cursor: pointer;
+
+    &__text {
+      text-align: center;
+      margin: 1.2rem 1rem;
+
+      @media screen and (max-width: 400px) {
+        font-size: 1.6rem;
+      }
+    }
+  }
+
   h2 {
     text-align: center;
     font-weight: normal;

src/components/calendar/DayElement.vue

@@ -9,7 +9,7 @@
     </div>
 
     <div v-if="day.events.length > 0" v-for="(event, index) in day.events" class="calendar--event">
-      <span class="calendar--event-title" v-bind:style="{ backgroundColor: eventColors[index] }" @click="clickedEvent(event.id)">{{ eventColors[index] + event.title }}</span>
+      <span class="calendar--event-title" v-bind:style="{ backgroundColor: eventColors[index] }" @click="clickedEvent(event.id)">{{ event.title }}</span>
     </div>
   </div>
 </template>