From 84aef89bbb77fecb043a2fef02d38b302114e4b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?=
 <kasper.rynning-tonnesen@knowit.no>
Date: Thu, 23 Jan 2020 09:29:50 +0100
Subject: [PATCH] Variables and colors

---
 src/Vinlottis.vue                |   1 +
 src/components/CreatePage.vue    |  14 ++--
 src/components/GeneratePage.vue  | 111 +++++++++++++++++--------------
 src/components/LoginPage.vue     |   5 +-
 src/components/RegisterPage.vue  |  22 +++++-
 src/components/VinlottisPage.vue |  34 +++-------
 src/styles/global.scss           |  15 ++++-
 src/styles/variables.scss        |  15 +++++
 src/ui/PurchaseGraph.vue         |  25 ++++---
 src/ui/TotalBought.vue           |  13 ++--
 src/ui/Vipps.vue                 |  10 ++-
 src/ui/WinGraph.vue              |  11 +--
 src/ui/Wines.vue                 |   2 +-
 13 files changed, 167 insertions(+), 111 deletions(-)
 create mode 100644 src/styles/variables.scss

diff --git a/src/Vinlottis.vue b/src/Vinlottis.vue
index f57be97..6f05391 100644
--- a/src/Vinlottis.vue
+++ b/src/Vinlottis.vue
@@ -24,6 +24,7 @@ export default {
 </script>
 
 <style lang="scss">
+@import "./styles/global.scss";
 @font-face {
   font-family: "knowit";
   font-weight: 600;
diff --git a/src/components/CreatePage.vue b/src/components/CreatePage.vue
index cc520cf..3a6ca0e 100644
--- a/src/components/CreatePage.vue
+++ b/src/components/CreatePage.vue
@@ -13,17 +13,12 @@
 <script>
 export default {};
 </script>
-<style lang="scss">
-body {
-  margin: 0;
-  color: #333333;
-  font-family: "knowit";
-  padding-bottom: 30px;
-}
-</style>
+
 <style lang="scss" scoped>
+@import "../styles/global.scss";
+@import "../styles/media-queries.scss";
 div {
-  font-family: "knowit";
+  font-family: Arial;
 }
 .outer {
   display: flex;
@@ -37,6 +32,7 @@ h2 {
   width: 100vw;
   text-align: center;
   font-size: 3rem;
+  font-family: knowit;
 }
 
 form {
diff --git a/src/components/GeneratePage.vue b/src/components/GeneratePage.vue
index 1605666..db67e5a 100644
--- a/src/components/GeneratePage.vue
+++ b/src/components/GeneratePage.vue
@@ -83,7 +83,7 @@ export default {
   },
   watch: {
     numberOfBallots: function() {
-      this.generateColors()
+      this.generateColors();
     }
   },
   methods: {
@@ -164,15 +164,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/global.scss';
-@import '../styles/media-queries.scss';
-
-body {
-  margin: 0;
-  color: #333333;
-  font-family: sans-serif;
-  padding-bottom: 30px;
-}
+@import "../styles/variables.scss";
+@import "../styles/global.scss";
+@import "../styles/media-queries.scss";
 
 .vipps {
   margin: 20px auto auto auto;
@@ -320,58 +314,77 @@ button {
   justify-content: space-around;
 }
 
-.green,
-.input-line label input#greenCheckbox:checked ~ .border .checkmark {
-  background-color: #c8f9df;
+.green {
+  background-color: $light-green;
 }
 
-.input-line label:hover input#greenCheckbox ~ .border .checkmark {
-  background-color: #0be881;
+.blue {
+  background-color: $light-blue;
 }
 
-.input-line label:focus input#greenCheckbox ~ .border .checkmark,
-.input-line label:active input#greenCheckbox ~ .border .checkmark {
-  background-color: #0ed277;
+.yellow {
+  background-color: $light-yellow;
 }
 
-.red,
-.input-line label input#redCheckbox:checked ~ .border .checkmark {
-  background-color: #fbd7de;
+.red {
+  background-color: $light-red;
 }
 
-.input-line label:hover input#redCheckbox ~ .border .checkmark {
-  background-color: #ef5878;
-}
+.input-line label {
+  & input {
+    &#greenCheckbox:checked ~ .border .checkmark {
+      background-color: $light-green;
+    }
 
-.input-line label:focus input#redCheckbox ~ .border .checkmark,
-.input-line label:active input#redCheckbox ~ .border .checkmark {
-  background-color: #ec3b61;
-}
+    &#redCheckbox:checked ~ .border .checkmark {
+      background-color: $light-red;
+    }
 
-.yellow,
-.input-line label input#yellowCheckbox:checked ~ .border .checkmark {
-  background-color: #fff6d6;
-}
+    &#yellowCheckbox:checked ~ .border .checkmark {
+      background-color: $light-yellow;
+    }
 
-.input-line label:hover input#yellowCheckbox ~ .border .checkmark {
-  background-color: #ffde5d;
-}
-.input-line label:focus input#yellowCheckbox ~ .border .checkmark,
-.input-line label:active input#yellowCheckbox ~ .border .checkmark {
-  background-color: #ecc31d;
-}
+    &#blueCheckbox:checked ~ .border .checkmark {
+      background-color: $light-blue;
+    }
+  }
 
-.blue,
-.input-line label input#blueCheckbox:checked ~ .border .checkmark {
-  background-color: #d4f2fe;
-}
-.input-line label:hover input#blueCheckbox ~ .border .checkmark {
-  background-color: #4bcffa;
-}
+  &:hover input {
+    &#greenCheckbox ~ .border .checkmark {
+      background-color: $green;
+    }
 
-.input-line label:focus input#blueCheckbox ~ .border .checkmark,
-.input-line label:active input#blueCheckbox ~ .border .checkmark {
-  background-color: #24acda;
+    &#redCheckbox ~ .border .checkmark {
+      background-color: $red;
+    }
+
+    &#yellowCheckbox ~ .border .checkmark {
+      background-color: $yellow;
+    }
+
+    &#blueCheckbox ~ .border .checkmark {
+      background-color: $blue;
+    }
+  }
+
+  &:focus input,
+  &:active input {
+    &#greenCHeckbox ~ .border .checkmark {
+      background-color: $dark-green;
+    }
+
+    &#redCheckbox ~ .border .checkmark {
+      background-color: $dark-red;
+    }
+
+    &#yellowCheckbox ~ .border .checkmark {
+      background-color: $dark-yellow;
+    }
+
+    &#blueCheckbox ~ .border .checkmark {
+      background-color: $dark-blue;
+    }
+  }
 }
 
 @include mobile {
diff --git a/src/components/LoginPage.vue b/src/components/LoginPage.vue
index bd0922f..657c6ae 100644
--- a/src/components/LoginPage.vue
+++ b/src/components/LoginPage.vue
@@ -15,8 +15,10 @@ export default {};
 </script>
 
 <style lang="scss" scoped>
+@import "../styles/global.scss";
+@import "../styles/media-queries.scss";
 div {
-  font-family: "knowit";
+  font-family: Arial;
 }
 .outer {
   display: flex;
@@ -30,6 +32,7 @@ h2 {
   width: 100vw;
   text-align: center;
   font-size: 3rem;
+  font-family: knowit;
 }
 
 form {
diff --git a/src/components/RegisterPage.vue b/src/components/RegisterPage.vue
index 8cd28ec..04a45f0 100644
--- a/src/components/RegisterPage.vue
+++ b/src/components/RegisterPage.vue
@@ -39,13 +39,25 @@
           </select>
         </div>
         <div class="label-div">
-          <input type="text" v-model="winner.wine.name" placeholder="Vin-navn" />
+          <input
+            type="text"
+            v-model="winner.wine.name"
+            placeholder="Vin-navn"
+          />
         </div>
         <div class="label-div">
-          <input type="text" v-model="winner.wine.vivinoLink" placeholder="Vivino-link" />
+          <input
+            type="text"
+            v-model="winner.wine.vivinoLink"
+            placeholder="Vivino-link"
+          />
         </div>
         <div class="label-div">
-          <input type="text" v-model="winner.wine.rating" placeholder="Rating" />
+          <input
+            type="text"
+            v-model="winner.wine.rating"
+            placeholder="Rating"
+          />
         </div>
         <hr />
       </div>
@@ -143,12 +155,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "../styles/global.scss";
+@import "../styles/media-queries.scss";
 h1 {
   width: 100vw;
   text-align: center;
+  font-family: knowit;
 }
 div {
   font-size: 2rem;
+  font-family: Arial;
 }
 input {
   font-size: 1.5rem;
diff --git a/src/components/VinlottisPage.vue b/src/components/VinlottisPage.vue
index 3b97be9..f8d67df 100644
--- a/src/components/VinlottisPage.vue
+++ b/src/components/VinlottisPage.vue
@@ -10,8 +10,6 @@
         <PurchaseGraph class="purchase" />
         <WinGraph class="win" />
       </div>
-
-      <!-- <img src="/public/assets/images/vipps.png" class="vipps-image" /> -->
       <div class="bottom-container">
         <div class="left-bottom">
           <TotalBought />
@@ -50,18 +48,10 @@ export default {
   }
 };
 </script>
-<style lang="scss">
 
-body {
-  margin: 0;
-  color: #333333;
-  font-family: sans-serif;
-  padding-bottom: 30px;
-}
-</style>
 <style lang="scss" scoped>
-@import '../styles/global.scss';
-@import '../styles/media-queries.scss';
+@import "../styles/global.scss";
+@import "../styles/media-queries.scss";
 
 .bottom-container {
   display: flex;
@@ -70,6 +60,7 @@ body {
   margin: auto;
   justify-content: space-evenly;
   align-items: center;
+  padding: 0 25px;
 }
 
 .left-bottom {
@@ -104,17 +95,6 @@ body {
   }
 }
 
-@font-face {
-  font-family: "knowit";
-  font-weight: 600;
-  src: url("/../../public/assets/fonts/bold.eot");
-}
-
-@font-face {
-  font-family: "knowit";
-  font-weight: 300;
-  src: url("/../../public/assets/fonts/regular.eot");
-}
 .outer {
   height: 100vh;
   width: 100vw;
@@ -135,6 +115,11 @@ h1 {
   width: 100vw;
   text-align: center;
   margin-bottom: 0px;
+
+  @include mobile {
+    width: 60vw;
+    margin: auto;
+  }
 }
 
 .vipps-image {
@@ -207,7 +192,8 @@ h1 {
   }
 
   .wines-container,
-  .vipps-outer-container {
+  .vipps-outer-container,
+  .vipps-container {
     margin-left: 0px;
   }
 }
diff --git a/src/styles/global.scss b/src/styles/global.scss
index fced0d0..95d03ff 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -1,7 +1,20 @@
-@import './media-queries.scss';
+@import "./media-queries.scss";
+
+@font-face {
+  font-family: "knowit";
+  font-weight: 600;
+  src: url("/../../public/assets/fonts/bold.eot");
+}
+
+@font-face {
+  font-family: "knowit";
+  font-weight: 300;
+  src: url("/../../public/assets/fonts/regular.eot");
+}
 
 body {
   font-family: Arial;
+  margin: 0;
 }
 
 .title {
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
new file mode 100644
index 0000000..e70104d
--- /dev/null
+++ b/src/styles/variables.scss
@@ -0,0 +1,15 @@
+$light-green: #c8f9df;
+$green: #0be881;
+$dark-green: #0ed277;
+
+$light-blue: #d4f2fe;
+$blue: #4bcffa;
+$dark-blue: #24acda;
+
+$light-yellow: #fff6d6;
+$yellow: #ffde5d;
+$dark-yellow: #ecc31d;
+
+$light-red: #fbd7de;
+$red: #ef5878;
+$dark-red: #ec3b61;
diff --git a/src/ui/PurchaseGraph.vue b/src/ui/PurchaseGraph.vue
index 4c7ff95..c796371 100644
--- a/src/ui/PurchaseGraph.vue
+++ b/src/ui/PurchaseGraph.vue
@@ -12,11 +12,10 @@ export default {
   async mounted() {
     let canvas = this.$refs["purchase-chart"].getContext("2d");
 
-    let _response = undefined
-    if (process.env.NODE_ENV == 'development') {
+    let _response = undefined;
+    if (process.env.NODE_ENV == "development") {
       _response = await fetch("http://localhost:30030/api/purchase/statistics");
-    }
-    else {
+    } else {
       _response = await fetch("/api/purchase/statistics");
     }
     let response = await _response.json();
@@ -111,7 +110,15 @@ export default {
   },
   methods: {
     getPrettierDateString(date) {
-      return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`;
+      return `${this.pad(date.getDate())}.${this.pad(
+        date.getMonth() + 1
+      )}.${this.pad(date.getYear() - 100)}`;
+    },
+    pad(num) {
+      if (num < 10) {
+        return `0${num}`;
+      }
+      return num;
     }
   }
 };
@@ -120,14 +127,6 @@ export default {
 <style lang="scss" scoped>
 @import "../styles/media-queries.scss";
 
-.chartjsLegend li span {
-  display: inline-block;
-  width: 12px;
-  height: 12px;
-  margin-right: 5px;
-  border-radius: 25px;
-}
-
 .chart {
   height: 40vh;
 
diff --git a/src/ui/TotalBought.vue b/src/ui/TotalBought.vue
index aa791f7..90a766f 100644
--- a/src/ui/TotalBought.vue
+++ b/src/ui/TotalBought.vue
@@ -98,6 +98,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "../styles/variables.scss";
 @import "../styles/media-queries.scss";
 
 .inner-bought-container {
@@ -134,6 +135,10 @@ export default {
   margin: auto;
   justify-content: space-between;
   font-family: Arial;
+
+  @include mobile {
+    padding-bottom: 0px;
+  }
 }
 
 .green,
@@ -146,19 +151,19 @@ export default {
 }
 
 .green {
-  color: #10e783;
+  color: $green;
 }
 
 .red {
-  color: #ef5878;
+  color: $red;
 }
 
 .yellow {
-  color: #ffde5d;
+  color: $yellow;
 }
 
 .blue {
-  color: #57d2fb;
+  color: $blue;
 }
 
 @include mobile {
diff --git a/src/ui/Vipps.vue b/src/ui/Vipps.vue
index e02a6f5..6207ba8 100644
--- a/src/ui/Vipps.vue
+++ b/src/ui/Vipps.vue
@@ -13,8 +13,10 @@
 </template>
 
 <style lang="scss" scoped>
+@import "../styles/global.scss";
+@import "../styles/media-queries.scss";
 .vipps-container {
-  font-family: sans-serif;
+  font-family: Arial;
 }
 
 .vipps-container {
@@ -57,4 +59,10 @@
   font-weight: 600;
   font-size: 1rem;
 }
+
+@include mobile {
+  .vipps-container {
+    margin-left: 0px;
+  }
+}
 </style>
diff --git a/src/ui/WinGraph.vue b/src/ui/WinGraph.vue
index 4470c23..f64a88e 100644
--- a/src/ui/WinGraph.vue
+++ b/src/ui/WinGraph.vue
@@ -9,11 +9,12 @@ export default {
   async mounted() {
     let canvas = this.$refs["win-chart"].getContext("2d");
 
-    let _response = undefined
-    if (process.env.NODE_ENV == 'development') {
-      _response = await fetch("http://localhost:30030/api/purchase/statistics/color");
-    }
-    else {
+    let _response = undefined;
+    if (process.env.NODE_ENV == "development") {
+      _response = await fetch(
+        "http://localhost:30030/api/purchase/statistics/color"
+      );
+    } else {
       _response = await fetch("/api/purchase/statistics/color");
     }
     let response = await _response.json();
diff --git a/src/ui/Wines.vue b/src/ui/Wines.vue
index 2f06997..974dae7 100644
--- a/src/ui/Wines.vue
+++ b/src/ui/Wines.vue
@@ -42,7 +42,7 @@ h3 {
 }
 div {
   margin: 15px 0 0 0;
-  font-family: "knowit";
+  font-family: arial;
   display: inline-flex;
   flex-direction: column;
 }