From 05888ef82b1a99722efce14a1251b432d5d07e39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Midb=C3=B8e?= <kevin.midboe@gmail.com>
Date: Wed, 22 Jan 2020 10:54:56 +0100
Subject: [PATCH] Moved banner to a separate component.

---
 src/components/GeneratePage.vue  |  9 ++++++---
 src/components/VinlottisPage.vue | 12 +++---------
 src/ui/Banner.vue                | 18 ++++++++++++++++++
 3 files changed, 27 insertions(+), 12 deletions(-)
 create mode 100644 src/ui/Banner.vue

diff --git a/src/components/GeneratePage.vue b/src/components/GeneratePage.vue
index b4d83f5..756c56c 100644
--- a/src/components/GeneratePage.vue
+++ b/src/components/GeneratePage.vue
@@ -1,8 +1,6 @@
 <template>
   <div class="container">
-    <router-link to="/" class="header-link">
-      <h1 class="top-banner">knowit</h1>
-    </router-link>
+    <banner />
     <h1>Loddgenerator</h1>
     <p>Velg hvilke farger du vil ha, fyll inn antall lodd og klikk 'generer'</p>
     <div class="input-line">
@@ -34,7 +32,12 @@
 </template>
 
 <script>
+import Banner from "@/ui/Banner";
+
 export default {
+  components: {
+    Banner
+  },
   data() {
     return {
       numberOfBallots: 0,
diff --git a/src/components/VinlottisPage.vue b/src/components/VinlottisPage.vue
index 33a7694..dc4d29a 100644
--- a/src/components/VinlottisPage.vue
+++ b/src/components/VinlottisPage.vue
@@ -1,8 +1,6 @@
 <template>
   <div class="outer">
-    <h1 class="top-banner">
-      <img src="/public/assets/images/knowit.svg" />
-    </h1>
+    <banner />
     <div class="container">
       <h1>Vinlotteri</h1>
       <router-link to="generate" class="generate-link">
@@ -28,6 +26,7 @@ import PurchaseGraph from "@/ui/PurchaseGraph";
 import TotalBought from "@/ui/TotalBought";
 import Highscore from "@/ui/Highscore";
 import WinGraph from "@/ui/WinGraph";
+import Banner from "@/ui/Banner";
 import Wines from "@/ui/Wines";
 
 export default {
@@ -36,6 +35,7 @@ export default {
     TotalBought,
     Highscore,
     WinGraph,
+    Banner,
     Wines
   }
 };
@@ -74,12 +74,6 @@ h1 {
   font-weight: 300;
 }
 
-.top-banner {
-  margin-top: 0px;
-  padding: 20px 0;
-  background-color: #dbeede;
-  box-shadow: 0 0 10px 0px #0000003a;
-}
 
 .generate-link {
   color: #333333;
diff --git a/src/ui/Banner.vue b/src/ui/Banner.vue
new file mode 100644
index 0000000..b2dcfbe
--- /dev/null
+++ b/src/ui/Banner.vue
@@ -0,0 +1,18 @@
+<template>
+  <router-link to="/">
+    <div class="top-banner">
+      <img src="/public/assets/images/knowit.svg" />
+    </div>
+  </router-link>
+</template>
+
+<style>
+.top-banner {
+  text-align: center;
+  width: 100vw;
+  margin-top: 0px;
+  padding: 20px 0;
+  background-color: #dbeede;
+  box-shadow: 0 0 10px 0px #0000003a;
+}
+</style>
\ No newline at end of file