Variables and colors

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;
 

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 {

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>

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();

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;
 }