From da00c7735e2b54da96ebf282ab3f5945a788b604 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Mon, 12 Oct 2020 00:05:34 +0200
Subject: [PATCH 1/3] Moved duplicate container & h1 styling to global.

---
 src/components/AllWinesPage.vue          | 22 +------------------
 src/components/GeneratePage.vue          | 19 +++++++----------
 src/components/HighscorePage.vue         | 19 -----------------
 src/components/PersonalHighscorePage.vue | 18 ----------------
 src/components/VinlottisPage.vue         |  7 +++++-
 src/components/WinnerPage.vue            |  5 +++++
 src/styles/global.scss                   | 27 ++++++++++++++++++++++++
 src/ui/RaffleGenerator.vue               |  8 +------
 8 files changed, 48 insertions(+), 77 deletions(-)

diff --git a/src/components/AllWinesPage.vue b/src/components/AllWinesPage.vue
index 24cad15..e4c63ec 100644
--- a/src/components/AllWinesPage.vue
+++ b/src/components/AllWinesPage.vue
@@ -66,23 +66,7 @@ export default {
 @import "./src/styles/variables";
 
 .container {
-  width: 90vw;
-  margin: 3rem auto;
-  margin-bottom: 0;
-  padding-bottom: 4rem;
-}
-
-h1 {
-  font-size: 3rem;
-  font-family: "knowit";
-  font-weight: normal;
-
-  font-family: knowit, Arial;
-  margin-bottom: 25px;
-}
-
-.label {
-  font-weight: 600;
+  max-width: unset;
 }
 
 #wines-container {
@@ -91,10 +75,6 @@ h1 {
   justify-content: space-evenly;
   align-items: flex-start;
 
-  @include desktop {
-    margin: 0 2rem;
-  }
-
   > div {
     justify-content: flex-start;
   }
diff --git a/src/components/GeneratePage.vue b/src/components/GeneratePage.vue
index e149888..037a03d 100644
--- a/src/components/GeneratePage.vue
+++ b/src/components/GeneratePage.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <h1 class="title" @click="startCountdown">Loddgenerator</h1>
+    <h1 class="text-center title" @click="startCountdown">Loddgenerator</h1>
     <p class="subtext">
       Velg hvilke farger du vil ha, fyll inn antall lodd og klikk 'generer'
     </p>
@@ -54,13 +54,16 @@ export default {
 @import "../styles/variables.scss";
 @import "../styles/global.scss";
 @import "../styles/media-queries.scss";
+
+.container {
+  display: flex;
+  flex-direction: column;
+  margin-top: 0;
+}
+
 h1 {
   cursor: pointer;
 }
-.header-link {
-  color: #333333;
-  text-decoration: none;
-}
 
 p {
   text-align: center;
@@ -74,10 +77,4 @@ p {
     margin-top: 2rem;
   }
 }
-
-.container {
-  margin: auto;
-  display: flex;
-  flex-direction: column;
-}
 </style>
diff --git a/src/components/HighscorePage.vue b/src/components/HighscorePage.vue
index c859be8..cae480b 100644
--- a/src/components/HighscorePage.vue
+++ b/src/components/HighscorePage.vue
@@ -101,25 +101,6 @@ $elementSpacing: 3.5rem;
   margin-bottom: $elementSpacing;
 }
 
-.container {
-  width: 90vw;
-  margin: 3rem auto;
-  max-width: 1200px;
-  margin-bottom: 0;
-  padding-bottom: 3rem;
-
-  @include desktop {
-    width: 80vw;
-  }
-}
-
-h1 {
-  font-size: 3rem;
-  font-family: "knowit";
-  color: $matte-text-color;
-  font-weight: normal;
-}
-
 .filter input {
   font-size: 1rem;
   width: 30%;
diff --git a/src/components/PersonalHighscorePage.vue b/src/components/PersonalHighscorePage.vue
index a925112..9604831 100644
--- a/src/components/PersonalHighscorePage.vue
+++ b/src/components/PersonalHighscorePage.vue
@@ -141,24 +141,6 @@ $elementSpacing: 3rem;
   border-color: gray;
 }
 
-.container {
-  width: 90vw;  
-  margin: 3rem auto;
-  margin-bottom: 0;
-  padding-bottom: 3rem;
-  max-width: 1200px;
-
-  @include desktop {
-    width: 80vw;
-  }
-}
-
-h1 {
-  font-size: 3rem;
-  font-family: "knowit";
-  font-weight: normal;
-}
-
 .name {
   text-transform: capitalize;
   font-size: 3.5rem;
diff --git a/src/components/VinlottisPage.vue b/src/components/VinlottisPage.vue
index e683a12..9588d4c 100644
--- a/src/components/VinlottisPage.vue
+++ b/src/components/VinlottisPage.vue
@@ -116,13 +116,18 @@ h1 {
 .container{
   display: flex;
   flex-direction: column;
-  
+  width: 100%;
+
   .header-and-notification{
     display: flex;
     flex-direction: row;
     margin: auto;
   }
 
+  h1 {
+    margin-top: 0;
+  }
+
   .vipps-icon{
     margin: 1em;
   }
diff --git a/src/components/WinnerPage.vue b/src/components/WinnerPage.vue
index 2b76296..ffc928d 100644
--- a/src/components/WinnerPage.vue
+++ b/src/components/WinnerPage.vue
@@ -77,6 +77,11 @@ export default {
   margin-top: 2rem;
   padding: 2rem;
 }
+
+h1 {
+  color: $matte-text-color;
+}
+
 .sent-container {
   width: 100%;
   height: 90vh;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 3680f58..43b5e72 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -37,6 +37,33 @@ a {
   }
 }
 
+.container {
+  width: 90vw;
+  margin: 3rem auto;
+  margin-bottom: 0;
+  padding-bottom: 3rem;
+  max-width: 1700px;
+
+  @include desktop {
+    width: 80vw;
+  }
+
+  h1 {
+    font-family: "knowit";
+    font-weight: normal;
+    font-size: 2rem;
+
+    @include desktop {
+      font-size: 3rem;
+    }
+  }
+}
+
+.text-center {
+  text-align: center;
+}
+
+
 .subtext {
   margin-top: 0.5rem;
   font-size: 1.22rem;
diff --git a/src/ui/RaffleGenerator.vue b/src/ui/RaffleGenerator.vue
index 83ccadb..02e8c4a 100644
--- a/src/ui/RaffleGenerator.vue
+++ b/src/ui/RaffleGenerator.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="flex column">
     <div class="input-line">
       <label for="redCheckbox">
         <input type="checkbox" id="redCheckbox" v-model="redCheckbox" @click="generateColors"/>
@@ -208,12 +208,6 @@ export default {
 @import "../styles/global.scss";
 @import "../styles/media-queries.scss";
 
-.container {
-  margin: auto;
-  display: flex;
-  flex-direction: column;
-}
-
 .input-line {
   margin: auto;
   display: flex;

From 2c574020d021cfba47a864eaaba9adb87ecf34b6 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Mon, 12 Oct 2020 00:09:06 +0200
Subject: [PATCH 2/3] Removed unsued styling from winnerPage.

---
 src/components/TodaysPage.vue | 71 +----------------------------------
 1 file changed, 1 insertion(+), 70 deletions(-)

diff --git a/src/components/TodaysPage.vue b/src/components/TodaysPage.vue
index 4cca96b..9ba6921 100644
--- a/src/components/TodaysPage.vue
+++ b/src/components/TodaysPage.vue
@@ -37,79 +37,10 @@ export default {
   height: 250px;
 }
 
-h1 {
-  font-family: knowit, Arial;
-  margin-bottom: 25px;
-}
-
 .wines-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-evenly;
-  margin: 0 2rem;
-
-  @media (min-width: 1500px) {
-    max-width: 1500px;
-    margin: 0 auto;
-  }
-
-  @include mobile {
-    flex-direction: column;
-  }
-}
-
-h3 {
-  max-width: 30vw;
-
-  @include mobile {
-    max-width: 50vw;
-  }
-}
-
-.inner-wine-container {
-  display: flex;
-  flex-direction: row;
-  margin: auto;
-  width: 500px;
-  font-family: Arial;
-  margin-bottom: 30px;
-
-  @include desktop {
-    justify-content: center;
-  }
-
-  @include mobile {
-    width: auto;
-  }
-}
-
-.right {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 150px;
-  margin-left: 50px;
-
-  @include mobile {
-    margin-left: 2rem;
-  }
-}
-
-a,
-a:focus,
-a:hover,
-a:visited {
-  color: #333333;
-  font-family: Arial;
-  text-decoration: none;
-  font-weight: bold;
-}
-
-.wine-link {
-  color: #333333;
-  font-family: Arial;
-  text-decoration: none;
-  font-weight: bold;
-  border-bottom: 1px solid $link-color;
-  width: fit-content;
+  align-items: flex-start;
 }
 </style>

From 82068f22a9577a21fb94bf4472856f084904e706 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Mon, 12 Oct 2020 00:11:25 +0200
Subject: [PATCH 3/3] Added margin between wine-details.

---
 src/ui/Wine.vue | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/ui/Wine.vue b/src/ui/Wine.vue
index 955bdcd..b13d47a 100644
--- a/src/ui/Wine.vue
+++ b/src/ui/Wine.vue
@@ -99,13 +99,10 @@ export default {
 .wine-details {
   display: flex;
   flex-direction: column;
-}
 
-h2 {
-  font-weight: normal;
-  font-size: 1.4rem;
-  margin: 2rem 0;
-  color: $matte-text-color;
+  > span {
+    margin-bottom: 0.5rem;
+  }
 }
 
 .bottom-section {