use variables for colors

client/src/assets/css/base.scss

@@ -1,10 +1,12 @@
+@import './colors';
+
 html, body {
   margin: 0;
   padding: 0;
 }
 
 body {
-  background-color: #402080;
+  background-color: $primary-background-color;
 }
 
 a {

client/src/assets/css/colors.scss

@@ -0,0 +1,20 @@
+$primary-background-color: #402080;
+
+$primary-box-color: #6040c0;
+$primary-box-border-color: #808040;
+$primary-box-text-color: #ffff80;
+
+$button-background-color: #40a020;
+$button-border-color: #c0c060;
+$button-text-color: #ffff80;
+
+$button-hover-background-color: #60c040;
+$button-hover-border-color: #ffffc0;
+$button-hover-text-color: #ffffc0;
+
+$button-disabled-background-color: #406020;
+$button-disabled-border-color: #808030;
+$button-disabled-text-color: #808060;
+
+$button-secondary-text-color: #808040;
+$button-secondary-hover-text-color: #c0c080;

client/src/assets/css/components.scss

@@ -0,0 +1 @@
+@import './colors.scss';

client/src/components/AddNewQuote.vue

@@ -15,7 +15,15 @@ export default {
 </script>
 
 <style lang="scss">
+@import '~/assets/css/components';
+
 .add-new-quote {
+  display: flex;
+  width: 100%;
+  margin: 32px;
+  flex-direction: column;
+  align-items: center;
+
   &__button {
     width: 100px;
     height: 48px;

client/src/components/CollectQuote.vue

@@ -37,6 +37,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import '~/assets/css/components';
+
 .collect-quote {
   color: #ffffff;
 
@@ -56,7 +58,7 @@ export default {
     top: 15%;
     width: 80%;
     height: 400px;
-    background-color: #402080;
+    background-color: $primary-background-color;
     border: 1px solid #ffffff;
     border-radius: 20px;
   }

client/src/components/CollectQuotesExplain.vue

@@ -81,13 +81,15 @@ export default {
 </script>
 
 <style lang="scss">
+@import '~/assets/css/components';
+
 .collect-quotes-explain {
   &__container {
     margin: 20px 80px;
     padding: 0 40px;
     border: 1px solid white;
     border-radius: 20px;
-    background-color: #6040c0;
+    background-color: $primary-box-color;
   }
 
   &__open-close-toggle {
@@ -96,13 +98,13 @@ export default {
     padding: 12px;
     border: 1px solid #ffffff;
     border-radius: 8px;
-    background-color: #402080;
+    background-color: $primary-background-color;
     font-family: "Wendy One";
     color: #ffffff;
     cursor: pointer;
 
     &:hover {
-      background-color: #6040c0;
+      background-color: $primary-box-color;
     }
   }
 

client/src/components/ConfirmButton.vue

@@ -28,6 +28,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import '~/assets/css/components';
+
 .confirm-button {
   position: absolute;
   right: 32px;

client/src/components/EngineDebug.vue

@@ -19,6 +19,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import '~/assets/css/components';
+
 .enginedebug {
   width: 100%;
   height: 100%;

client/src/components/Final.vue

@@ -36,6 +36,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import '~/assets/css/components';
+
 .final {
   display: flex;
   width: 100%;
@@ -69,7 +71,7 @@ export default {
       top: 0;
       width: 100%;
       height: 100%;
-      background: linear-gradient(45deg, rgba(128, 96, 192, 0) 50%, #402080 60%);
+      background: linear-gradient(45deg, rgba(128, 96, 192, 0) 50%, $primary-background-color 60%);
       background-size: 1000% 1000%;
       animation: finals-gradient__fade-in 5s ease forwards;
     }
@@ -81,7 +83,7 @@ export default {
     height: 100px;
     align-items: center;
     justify-content: center;
-    background-color: #402080;
+    background-color: $primary-background-color;
     border-radius: 32px 32px 0 0;
     margin-bottom: 4px;
   }
@@ -95,7 +97,7 @@ export default {
   &__table-body {
     width: 100%;
     height: 100%;
-    background-color: #402080;
+    background-color: $primary-background-color;
     border-radius: 0 0 32px 32px;
     color: #ffffff;
     font-family: Dosis;

client/src/components/GameControls.vue

@@ -40,6 +40,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import '~/assets/css/components';
+
 .gamecontrols {
   padding: 8px 1em;
   border-bottom: 1px solid #808080;

client/src/components/Play.vue

@@ -44,6 +44,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import '~/assets/css/components';
+
 .play {
   position: relative;
   width: 100%;

client/src/components/PlayButton.vue

@@ -75,6 +75,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import '~/assets/css/components';
+
 .playbutton {
   font-family: Dosis;
   font-weight: 800;
@@ -85,25 +87,26 @@ export default {
     width: 200px;
     height: 48px;
     padding: 4px 36px;
-    border: 4px solid #c0c060;
+    border: 4px solid $button-border-color;
     border-radius: 8px;
-    background-color: #40a020;
+    background-color: $button-background-color;
-    color: #ffff80;
+    color: $button-text-color;
 
     &:hover {
-      border-color: #ffffc0;
+      background-color: $button-hover-background-color;
-      background-color: #60c040;
+      border-color: $button-hover-border-color;
-      color: #ffffc0;
+      color: $button-hover-text-color;
     }
   }
 
   &__logout {
     margin-top: 36px;
     font-size: 24px;
+    color: $button-secondary-text-color;
     cursor: pointer;
 
     &:hover {
-      color: #c0c080;
+      color: $button-secondary-hover-text-color;
     }
   }
 
@@ -121,21 +124,22 @@ export default {
     display: inline;
     width: 80px;
     height: 48px;
-    border: 4px solid #c0c060;
+    background-color: $button-background-color;
+    border: 4px solid $button-border-color;
     border-radius: 8px;
-    background-color: #40a020;
+    color: $button-text-color;
-    color: #ffff80;
     font-size: 24px;
 
     &.disabled,
     &:hover.disabled {
-      border-color: #808030;
+      background-color: $button-disabled-background-color;
-      background-color: #406020;
+      border-color: $button-disabled-border-color;
-      color: #808060;
+      color: $button-disabled-text-color;
     }
     &:hover {
-      background-color: #60c040;
+      background-color: $button-hover-background-color;
-      color: #ffffc0;
+      border-color: $button-hover-border-color;
+      color: $button-hover-text-color;
     }
   }
 

client/src/components/Player.vue

@@ -29,6 +29,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import '~/assets/css/components';
+
 .player {
     &__row {
       display: flex;

client/src/components/PlayerList.vue

@@ -13,6 +13,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import '~/assets/css/components';
+
 .player-list {
   padding: 8px;
   border: 1px solid #ffffff;

client/src/components/Quote.vue

@@ -11,6 +11,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import '~/assets/css/components';
+
 .quote {
   &__quote {
     text-align: justify;

client/src/components/QuoteContainer.vue

@@ -11,6 +11,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import '~/assets/css/components';
+
 .quote-container {
   display: flex;
   position: absolute;

client/src/components/QuoteListItem.vue

@@ -27,6 +27,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import '~/assets/css/components';
+
 .quote-list-item {
   &__container {
     display: flex;
@@ -51,7 +53,7 @@ export default {
     cursor: pointer;
 
     &:hover {
-      background-color: #6040c0;
+      background-color: $primary-box-color;
     }
 
     &-edit::after {

client/src/components/ReadySet.vue

@@ -38,6 +38,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import '~/assets/css/components';
+
 .ready-set {
   display: flex;
   position: relative;
@@ -67,7 +69,7 @@ export default {
     height: 370px;
     border: 15px solid #808040;
     border-radius: 50px;
-    background-color: #6040c0;
+    background-color: $primary-box-color;
     z-index: 5;
   }
 

client/src/components/Source.vue

@@ -30,7 +30,7 @@ export default {
     },
     badgeCount() {
       if (this.isWrongSource()) return 0
-      
+
       const revelation = this.$store.state.round.revelation || {}
       const votes = revelation.votes || {}
       const list = votes[this.source.id] || []
@@ -64,6 +64,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import '~/assets/css/components';
+
 .source {
   position: absolute;
   width: 180px;
@@ -78,13 +80,13 @@ export default {
     padding: 4px;
     border: 1px solid #e0e0e0;
     border-radius: 10px;
-    background-color: #6040c0;
+    background-color: $primary-box-color;
     color: #ffffff;
 
     &-selectable {
       &:hover {
         background-color: #c0a0f0;
-        color: #402080;
+        color: $primary-background-color;
         cursor: pointer;
       }
       &.source__container__selected {
@@ -95,7 +97,7 @@ export default {
 
     &__selected {
       background-color: #d0d0d0;
-      color: #402080;
+      color: $primary-background-color;
       box-shadow: 0 0 10px #d0d0d0;
     }
 
@@ -123,7 +125,7 @@ export default {
     top: -16px;
     width: 24px;
     height: 24px;
-    background-color: #6040c0;
+    background-color: $primary-box-color;
     border: 2px solid #ffffff;
     border-radius: 14px;
     color: #c0c060;

client/src/components/Sources.vue

@@ -25,6 +25,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import '~/assets/css/components';
+
 .sources {
   position: relative;
   width: 100%;

client/src/components/TitleBox.vue

@@ -13,6 +13,8 @@
 </template>
 
 <style lang="scss">
+@import '~/assets/css/components';
+
 .titlebox {
   &__titlebox {
     position: relative;
@@ -23,9 +25,9 @@
   &__titleborderbox1,
   &__titleborderbox2,
   &__titleborderbox3 {
-    border: 4px solid #808040;
+    border: 4px solid $primary-box-border-color;
     border-radius: 16px;
-    background-color: #6040c0;
+    background-color: $primary-box-color;
   }
   &__titleborderbox1 {
     display: flex;
@@ -52,7 +54,7 @@
   &__title {
     font-size: 64px;
     font-family: 'Wendy One';
-    color: #ffff80;
+    color: $primary-box-text-color;
     text-align: center;
   }
 }