From 2eb4d7347223a189d8393868f950b81787676536 Mon Sep 17 00:00:00 2001
From: Settel <achim.settelmeier@diva-e.com>
Date: Tue, 9 Nov 2021 22:28:52 +0100
Subject: [PATCH] styling (WIP)

---
 client/src/components/CollectQuote.vue        | 41 ++++++++++++++++---
 .../7f3a2876-b8b1-4b29-88be-70d86e1809e8.json |  2 +-
 2 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/client/src/components/CollectQuote.vue b/client/src/components/CollectQuote.vue
index 96cc21b..03a87f6 100644
--- a/client/src/components/CollectQuote.vue
+++ b/client/src/components/CollectQuote.vue
@@ -9,11 +9,11 @@
         </div>
       </div>
       <div class="collect-quote__inputgroup">
-        <form>
+        <form class="collect-quote__textinput-container">
           <input type="hidden" name="id" :value="quote.id" />
-          <textarea v-model="quote.quote" cols="60" rows="4" />
+          <textarea class="collect-quote__textinput" v-model="quote.quote" />
         </form>
-        <button @click="save">Save</button>
+        <button class="collect-quote__cta" @click="save">Save</button>
       </div>
     </div>
   </div>
@@ -64,21 +64,52 @@ export default {
     width: 50%;
     height: 100%;
     border-right: 1px solid #ffffff;
-    padding: 48px;
+    overflow: hidden;
   }
 
   &__title {
     font-size: 32px;
     font-family: "Wendy One";
-    margin-bottom: 16px;
+    margin: 48px 0 16px 48px;
   }
 
   &__quote {
     align-self: center;
     max-width: 400px;
+    margin: 0 48px;
   }
 
   &__inputgroup {
+    width: 50%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__textinput-container {
+    margin: 48px 48px 0 48px;
+  }
+
+  &__textinput {
+    width: 100%;
+  }
+
+  &__cta {
+    align-self: flex-end;
+    margin: 48px;
+    background-color: #40a020;
+    width: 80px;
+    height: 48px;
+    border: 4px solid #c0c060;
+    border-radius: 8px;
+    color: #ffff80;
+    font-family: Dosis;
+    font-size: 24px;
+
+    &:hover {
+      background-color: #60c040;
+      color: #ffffc0;
+    }
   }
 }
 </style>
diff --git a/server/data/games/067fb1b8-8303-4faa-95d2-1832770a791c/quotes/7f3a2876-b8b1-4b29-88be-70d86e1809e8.json b/server/data/games/067fb1b8-8303-4faa-95d2-1832770a791c/quotes/7f3a2876-b8b1-4b29-88be-70d86e1809e8.json
index bb4bf89..b4735a3 100644
--- a/server/data/games/067fb1b8-8303-4faa-95d2-1832770a791c/quotes/7f3a2876-b8b1-4b29-88be-70d86e1809e8.json
+++ b/server/data/games/067fb1b8-8303-4faa-95d2-1832770a791c/quotes/7f3a2876-b8b1-4b29-88be-70d86e1809e8.json
@@ -1,4 +1,4 @@
 {
-	"quote": "Ein Diktumanuist ist eine Person, die Wörter erfindet und sie als Selbstzitat getarnt im Internet veröffentlicht. Und das sollte man sich nicht entgehen lassen. \n\n\nMit der Zeit wird das Zitat von anderen Autoren aufgegriffen. So kommt es zur Verbreitung und — in seltenen Fällen — zur Abwandlung des Zitats.",
+	"quote": "Ein Diktumanuist ist eine Person, die Wörter erfindet und sie als Selbstzitat getarnt im Internet veröffentlicht. Und das sollte man sich nicht entgehen lassen.\n\n\nMit der Zeit wird das Zitat von anderen Autoren aufgegriffen. So kommt es zur Verbreitung und — in seltenen Fällen — zur Abwandlung des Zitats.",
 	"source": "7de2fcfa-6ac0-4ff6-8337-a224effc826d"
 }
\ No newline at end of file