From adce61af4e6d29df8cc7465343e5c385ce1fe94b Mon Sep 17 00:00:00 2001
From: Settel <settel@localhost>
Date: Sun, 17 Jul 2022 20:45:49 +0200
Subject: [PATCH] css: update colors for start page (WIP)

---
 client/src/assets/css/colors.scss             | 24 +++++++++++++------
 client/src/assets/css/components.scss         |  3 +++
 client/src/components/Button.vue              |  2 +-
 client/src/components/CollectQuote.vue        |  2 +-
 .../src/components/CollectQuotesExplain.vue   |  8 +++----
 client/src/components/ConfirmButton.vue       |  2 +-
 client/src/components/CreateTeam.vue          |  6 ++---
 client/src/components/Final.vue               |  4 ++--
 client/src/components/GameControls.vue        |  2 +-
 .../src/components/{lobby.vue => Lobby.vue}   |  4 +++-
 client/src/components/NoQuotesYet.vue         |  4 +++-
 client/src/components/PlayButton.vue          | 15 +++++++++---
 client/src/components/Player.vue              |  2 +-
 client/src/components/Quote.vue               |  2 +-
 client/src/components/ReadySet.vue            |  2 +-
 client/src/components/Source.vue              |  4 ++--
 client/src/components/TitleBox.vue            |  4 ++--
 .../src/components/admin/AdminEditPlayer.vue  |  8 +++----
 client/src/components/admin/AdminTile.vue     |  6 +++--
 client/src/pages/gamemaster.vue               |  2 +-
 client/src/pages/index.vue                    |  2 +-
 21 files changed, 68 insertions(+), 40 deletions(-)
 rename client/src/components/{lobby.vue => Lobby.vue} (93%)

diff --git a/client/src/assets/css/colors.scss b/client/src/assets/css/colors.scss
index 924e217..f9afe7b 100644
--- a/client/src/assets/css/colors.scss
+++ b/client/src/assets/css/colors.scss
@@ -1,12 +1,12 @@
-$primary-background-color: #402080;
+$primary-background-color: #282838;
 $primary-text-color: #ffffff;
 $error-text-color: #ff8000;
 
 
 // Box
-$primary-box-background-color: #6040c0;
-$primary-box-border-color: #c0c040;
-$primary-box-text-color: #ffff80;
+$primary-box-background-color: #282838;
+$primary-box-border-color: #ffffff;
+$primary-box-text-color: #ffffff;
 
 $primary-box-hover-background-color: #8040e0;
 $primary-box-hover-text-color: #ffffff;
@@ -25,9 +25,9 @@ $secondary-box-disabled-text-color: #606060;
 
 
 // Button
-$button-background-color: #40a020;
-$button-border-color: #c0c060;
-$button-text-color: #ffff80;
+$button-background-color: #00a0e0;
+$button-border-color: #007098;
+$button-text-color: #304048;
 
 $button-hover-background-color: #60c040;
 $button-hover-border-color: #ffffc0;
@@ -41,3 +41,13 @@ $button-secondary-background-color: #808040;
 $button-secondary-text-color: #808040;
 $button-secondary-border-color: #ffffff;
 $button-secondary-hover-text-color: #c0c080;
+
+
+// Input
+$input-background-color: $primary-background-color;
+$input-text-color: #ffffff;
+$input-border-color: #00a0e0;
+
+$input-inactive-background-color: $input-background-color;
+$input-inactive-text-color: $input-text-color;
+$input-inactive-border-color: #ffffff;
\ No newline at end of file
diff --git a/client/src/assets/css/components.scss b/client/src/assets/css/components.scss
index 7aa2d67..23fe892 100644
--- a/client/src/assets/css/components.scss
+++ b/client/src/assets/css/components.scss
@@ -1 +1,4 @@
 @import './colors.scss';
+
+$primary-font: 'Wendy One';
+$secondary-font: 'Dosis';
diff --git a/client/src/components/Button.vue b/client/src/components/Button.vue
index 2a57d0a..8bb791b 100644
--- a/client/src/components/Button.vue
+++ b/client/src/components/Button.vue
@@ -27,7 +27,7 @@ export default {
   background-color: $button-background-color;
   color: $button-text-color;
   text-align: center;
-  font-family: Dosis;
+  font-family: $secondary-font;
   font-weight: bold;
   font-size: 24px;
   cursor: pointer;
diff --git a/client/src/components/CollectQuote.vue b/client/src/components/CollectQuote.vue
index 29c1b46..d91864e 100644
--- a/client/src/components/CollectQuote.vue
+++ b/client/src/components/CollectQuote.vue
@@ -89,7 +89,7 @@ export default {
 
   &__title {
     font-size: 32px;
-    font-family: "Wendy One";
+    font-family: "$primary-font";
     margin: 48px 0 16px 48px;
   }
 
diff --git a/client/src/components/CollectQuotesExplain.vue b/client/src/components/CollectQuotesExplain.vue
index 816e51a..76ca937 100644
--- a/client/src/components/CollectQuotesExplain.vue
+++ b/client/src/components/CollectQuotesExplain.vue
@@ -114,7 +114,7 @@ export default {
     border: 1px solid #ffffff;
     border-radius: 8px;
     background-color: $primary-background-color;
-    font-family: "Wendy One";
+    font-family: "$primary-font";
     color: #ffffff;
     cursor: pointer;
 
@@ -126,12 +126,12 @@ export default {
   &__explain {
     margin-bottom: 40px;
     font-size: 24px;
-    font-family: Dosis;
+    font-family: $secondary-font;
     color: #ffffff;
   }
 
   &__example {
-    font-family: Dosis;
+    font-family: $secondary-font;
     color: #ffffff;
     &-title {
       font-size: 24px;
@@ -145,7 +145,7 @@ export default {
       height: 8em;
     }
     &-text {
-      font-family: Dosis;
+      font-family: $secondary-font;
       font-size: 24px;
       color: #ffffff;
       cursor: pointer;
diff --git a/client/src/components/ConfirmButton.vue b/client/src/components/ConfirmButton.vue
index 065e079..3dd7719 100644
--- a/client/src/components/ConfirmButton.vue
+++ b/client/src/components/ConfirmButton.vue
@@ -49,7 +49,7 @@ export default {
     border: 4px solid $button-border-color;
     border-radius: 8px;
     color: $button-text-color;
-    font-family: Dosis;
+    font-family: $secondary-font;
     font-weight: 800;
     text-align: center;
     cursor: pointer;
diff --git a/client/src/components/CreateTeam.vue b/client/src/components/CreateTeam.vue
index d5d2f67..1f7d6ce 100644
--- a/client/src/components/CreateTeam.vue
+++ b/client/src/components/CreateTeam.vue
@@ -119,7 +119,7 @@ export default {
 
   &__button {
     display: inline;
-    font-family: Dosis;
+    font-family: $secondary-font;
     font-weight: 800;
     font-size: 24px;
     color: $button-secondary-text-color;
@@ -144,7 +144,7 @@ export default {
     border: 1px solid $primary-box-border-color;
     border-radius: 20px;
     background-color: $primary-box-background-color;
-    font-family: Dosis;
+    font-family: $secondary-font;
     font-size: 20px;
     color: #ffffff;
 
@@ -179,7 +179,7 @@ export default {
       border: 1px solid #ffffff;
       border-radius: 8px;
       background-color: $primary-background-color;
-      font-family: "Wendy One";
+      font-family: "$primary-font";
       color: #ffffff;
       cursor: pointer;
 
diff --git a/client/src/components/Final.vue b/client/src/components/Final.vue
index 27e5d6b..4e66970 100644
--- a/client/src/components/Final.vue
+++ b/client/src/components/Final.vue
@@ -91,7 +91,7 @@ export default {
 
   &__title {
     color: $primary-box-text-color;
-    font-family: "Wendy One";
+    font-family: "$primary-font";
     font-size: 48px;
   }
 
@@ -101,7 +101,7 @@ export default {
     background-color: $primary-box-background-color;
     border-radius: 0 0 32px 32px;
     color: $primary-box-text-color;
-    font-family: Dosis;
+    font-family: $secondary-font;
     font-size: 32px;
 
   }
diff --git a/client/src/components/GameControls.vue b/client/src/components/GameControls.vue
index d89e059..e97e4de 100644
--- a/client/src/components/GameControls.vue
+++ b/client/src/components/GameControls.vue
@@ -93,7 +93,7 @@ export default {
   border-bottom: 1px solid $primary-box-border-color;
 
   button {
-    font-family: Dosis;
+    font-family: $secondary-font;
     margin: 0 2px;
     padding: 0 1rem;
     font-size: 18px;
diff --git a/client/src/components/lobby.vue b/client/src/components/Lobby.vue
similarity index 93%
rename from client/src/components/lobby.vue
rename to client/src/components/Lobby.vue
index 4e126f8..3dbebbb 100644
--- a/client/src/components/lobby.vue
+++ b/client/src/components/Lobby.vue
@@ -32,6 +32,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import '~/assets/css/components';
+
 .lobby {
   display: flex;
   width: 100%;
@@ -41,7 +43,7 @@ export default {
     flex-grow: 1;
     margin-top: 60px;
     text-align: center;
-    font-family: Dosis;
+    font-family: $secondary-font;
     font-size: 24px;
     color: #ffffff;
   }
diff --git a/client/src/components/NoQuotesYet.vue b/client/src/components/NoQuotesYet.vue
index bb14342..aa19ece 100644
--- a/client/src/components/NoQuotesYet.vue
+++ b/client/src/components/NoQuotesYet.vue
@@ -18,9 +18,11 @@ export default {
 </script>
 
 <style lang="scss">
+@import '~/assets/css/components';
+
 .no-quotes-yet {
   width: 100%;
-  font-family: Dosis;
+  font-family: $secondary-font;
   font-size: 18px;
   text-align: center;
   color: #ffffff;
diff --git a/client/src/components/PlayButton.vue b/client/src/components/PlayButton.vue
index ea771b3..73aea93 100644
--- a/client/src/components/PlayButton.vue
+++ b/client/src/components/PlayButton.vue
@@ -84,7 +84,7 @@ export default {
 @import '~/assets/css/components';
 
 .playbutton {
-  font-family: Dosis;
+  font-family: $secondary-font;
   font-weight: 800;
   font-size: 36px;
   text-align: center;
@@ -125,11 +125,20 @@ export default {
   &__authinput {
     display: inline;
     height: 36px;
-    border: 4px solid $button-border-color;
+    border: 1px solid $input-inactive-border-color;
     border-radius: 8px;
-    font-family: Dosis;
+    font-family: $secondary-font;
     font-weight: 800;
     font-size: 24px;
+    background-color: $input-inactive-background-color;
+    color: $input-inactive-text-color;
+    outline: none;
+
+    &:focus {
+      border: 1px solid $input-border-color;
+      background-color: $input-background-color;
+      color: $input-text-color;
+    }
   }
 
   &__errormessage {
diff --git a/client/src/components/Player.vue b/client/src/components/Player.vue
index 6e640dd..8f4e293 100644
--- a/client/src/components/Player.vue
+++ b/client/src/components/Player.vue
@@ -35,7 +35,7 @@ export default {
     &__row {
       display: flex;
       color: $secondary-box-text-color;
-      font-family: Dosis;
+      font-family: $secondary-font;
       font-size: 18px;
 
       &__idle {
diff --git a/client/src/components/Quote.vue b/client/src/components/Quote.vue
index 04dbffc..d891365 100644
--- a/client/src/components/Quote.vue
+++ b/client/src/components/Quote.vue
@@ -16,7 +16,7 @@ export default {
 .quote {
   &__quote {
     text-align: justify;
-    font-family: Dosis;
+    font-family: $secondary-font;
     font-size: 24px;
     color: $primary-text-color;
 
diff --git a/client/src/components/ReadySet.vue b/client/src/components/ReadySet.vue
index 311e4f1..f30d799 100644
--- a/client/src/components/ReadySet.vue
+++ b/client/src/components/ReadySet.vue
@@ -103,7 +103,7 @@ export default {
     height: 600px;
     line-height: 600px;
     font-size: 100px;
-    font-family: 'Wendy One';
+    font-family: '$primary-font';
     color: #ffff80;
     text-align: center;
     z-index: 10;
diff --git a/client/src/components/Source.vue b/client/src/components/Source.vue
index d92dcf2..6b84635 100644
--- a/client/src/components/Source.vue
+++ b/client/src/components/Source.vue
@@ -109,7 +109,7 @@ export default {
 
   &__source {
     width: 100%;
-    font-family: "Wendy One";
+    font-family: "$primary-font";
     text-align: center;
     white-space: nowrap;
     overflow: hidden;
@@ -129,7 +129,7 @@ export default {
     border: 2px solid #ffffff;
     border-radius: 14px;
     color: #c0c060;
-    font-family: "Wendy One";
+    font-family: "$primary-font";
     font-size: 16px;
 
     &-count {
diff --git a/client/src/components/TitleBox.vue b/client/src/components/TitleBox.vue
index 3ade647..fd4aae3 100644
--- a/client/src/components/TitleBox.vue
+++ b/client/src/components/TitleBox.vue
@@ -25,7 +25,7 @@
   &__titleborderbox1,
   &__titleborderbox2,
   &__titleborderbox3 {
-    border: 4px solid $primary-box-border-color;
+    border: 1px solid $primary-box-border-color;
     border-radius: 16px;
     background-color: $primary-box-background-color;
   }
@@ -53,7 +53,7 @@
   }
   &__title {
     font-size: 64px;
-    font-family: 'Wendy One';
+    font-family: $primary-font;
     color: $primary-box-text-color;
     text-align: center;
   }
diff --git a/client/src/components/admin/AdminEditPlayer.vue b/client/src/components/admin/AdminEditPlayer.vue
index bc73737..0e3e226 100644
--- a/client/src/components/admin/AdminEditPlayer.vue
+++ b/client/src/components/admin/AdminEditPlayer.vue
@@ -84,7 +84,7 @@ export default {
 @import '~/assets/css/components';
 
 .admin-edit-player {
-  font-family: Dosis;
+  font-family: $secondary-font;
   &__close {
     float: right;
     margin: 16px -16px 16px 16px;
@@ -92,7 +92,7 @@ export default {
     border: 1px solid #ffffff;
     border-radius: 8px;
     background-color: $primary-background-color;
-    font-family: "Wendy One";
+    font-family: "$primary-font";
     color: #ffffff;
     cursor: pointer;
 
@@ -116,7 +116,7 @@ export default {
   &__button-delete {
     margin-left: 3em;
     font-size: 16px;
-    font-family: Dosis;
+    font-family: $secondary-font;
     color: #e06060;
     cursor: pointer;
     &:hover {
@@ -126,7 +126,7 @@ export default {
   &__button-generate-code {
     margin-left: 3em;
     font-size: 16px;
-    font-family: Dosis;
+    font-family: $secondary-font;
     color: #d0d0d0;
     cursor: pointer;
     &:hover {
diff --git a/client/src/components/admin/AdminTile.vue b/client/src/components/admin/AdminTile.vue
index 7423e19..27d2df7 100644
--- a/client/src/components/admin/AdminTile.vue
+++ b/client/src/components/admin/AdminTile.vue
@@ -17,18 +17,20 @@ export default {
 </script>
 
 <style lang="scss">
+@import '~/assets/css/components';
+
 .admin-tile {
   min-width: 240px;
   margin: 16px;
 
   &__title {
     font-size: 32px;
-    font-family: Dosis;
+    font-family: $secondary-font;
     border-bottom: 1px solid #ffffff;
     margin-bottom: 16px;
   }
   &__body {
-    font-family: Dosis;
+    font-family: $secondary-font;
     font-size: 18px;
   }
 }
diff --git a/client/src/pages/gamemaster.vue b/client/src/pages/gamemaster.vue
index 2075755..f445dcc 100644
--- a/client/src/pages/gamemaster.vue
+++ b/client/src/pages/gamemaster.vue
@@ -94,7 +94,7 @@ export default {
     border: 1px solid #ffffff;
     border-radius: 8px;
     background-color: $primary-background-color;
-    font-family: "Wendy One";
+    font-family: "$primary-font";
     color: #ffffff;
     cursor: pointer;
 
diff --git a/client/src/pages/index.vue b/client/src/pages/index.vue
index a3edffe..7d6b565 100644
--- a/client/src/pages/index.vue
+++ b/client/src/pages/index.vue
@@ -45,7 +45,7 @@ export default {
   &__video {
     margin: 2em 0;
     text-align: center;
-    font-family: Dosis;
+    font-family: $secondary-font;
     font-size: 24px;
     font-weight: 800;
     color: #808040;