collect quote styling

client/src/components/CollectQuote.vue

@@ -9,14 +9,17 @@
         </div>
       </div>
       <div class="collect-quote__inputgroup">
+        <button class="collect-quote__button-close" @click="close">X</button>
         <form class="collect-quote__textinput-container">
           <input type="hidden" name="id" :value="quote.id" />
           <textarea class="collect-quote__textinput" v-model="quote.quote" />
         </form>
+        <div class="collect-quote__cta-container">
           <button class="collect-quote__cta" @click="save">Save</button>
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -25,7 +28,10 @@ export default {
   methods: {
     save() {
       this.$nuxt.$emit('save-quote', this.quote)
-    }
+    },
+    close() {
+      this.$nuxt.$emit('close-quote')
+    },
   },
 }
 </script>
@@ -92,10 +98,37 @@ export default {
 
   &__textinput {
     width: 100%;
+    height: 8em;
+  }
+
+  &__button-close {
+    align-self: flex-end;
+    width: 48px;
+    height: 48px;
+    margin: 2px;
+    padding: 10px;
+    background: none;
+    border: 0;
+    font-size: 24px;
+    color: #ffffff;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #6040a0;
+      border-radius: 16px;
+    }
+  }
+
+  &__cta-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
   }
 
   &__cta {
-    align-self: flex-end;
+    position: absolute;
+    right: 0;
+    bottom: 0;
     margin: 48px;
     background-color: #40a020;
     width: 80px;
@@ -105,6 +138,7 @@ export default {
     color: #ffff80;
     font-family: Dosis;
     font-size: 24px;
+    cursor: pointer;
 
     &:hover {
       background-color: #60c040;

client/src/components/CollectQuotes.vue

@@ -21,6 +21,10 @@ export default {
     },
   },
   created() {
+    this.$nuxt.$on('close-quote', () => {
+      this.showCollectQuoteDialog = false
+    })
+
     this.$nuxt.$on('edit-quote', (quote) => {
       this.showCollectQuoteDialog = true
       this.collectQuote = {