add new quote button

client/src/components/AddNewQuote.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="add-new-quote">
+    <button class="add-new-quote__button" @click="newQuote">+</button>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    newQuote() {
+      this.$nuxt.$emit('create-quote')
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.add-new-quote {
+  &__button {
+    width: 100px;
+    height: 48px;
+    border: 4px solid #c0c060;
+    border-radius: 8px;
+    color: #ffff80;
+    background-color: #40a020;
+    font-size: 24px;
+    // font-family: Dosis;
+    font-weight: 800;
+    text-align: center;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #60c040;
+      color: #ffffc0;
+    }
+  }
+}
+</style>

client/src/components/CollectQuotes.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
     <!-- <CollectQuotesExplain /> -->
+    <AddNewQuote />
     <QuoteListItem v-for="quote in quotes" :key="quote.id" :quote="quote" />
+    <AddNewQuote v-if="quotes.length > 0"/>
     <CollectQuote v-if="showCollectQuoteDialog" :quote="collectQuote" />
   </div>
 </template>