Updates from designer

src/components/GeneratePage.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="container">
     <h1 class="title" @click="startCountdown">Loddgenerator</h1>
-    <p class="subtext">
-      Velg hvilke farger du vil ha, fyll inn antall lodd og klikk 'generer'
-    </p>
+    <p class="subtext">Velg hvilke farger du vil ha, fyll inn antall lodd og klikk 'generer'</p>
     <div class="input-line">
       <label for="redCheckbox">
         <input type="checkbox" id="redCheckbox" v-model="redCheckbox" />
@@ -53,6 +51,13 @@
       ></div>
     </div>
 
+    <div class="color-count-container" v-if="generated && !generating">
+      <span>Rød: {{red}}</span>
+      <span>Blå: {{blue}}</span>
+      <span>Gul: {{yellow}}</span>
+      <span>Grønn: {{green}}</span>
+    </div>
+
     <Vipps class="vipps" :amount="numberOfBallots" />
     <Countdown :hardEnable="hardStart" @countdown="changeEnabled" />
   </div>
@@ -83,7 +88,9 @@ export default {
       greenCheckbox: true,
       yellowCheckbox: true,
       blueCheckbox: true,
-      hardStart: false
+      hardStart: false,
+      generated: false,
+      generating: false
     };
   },
   watch: {
@@ -105,7 +112,10 @@ export default {
       this.hardStart = true;
     },
     generateColors: function(event, time) {
+      this.generating = true;
       if (time == 5) {
+        this.generating = false;
+        this.generated = true;
         if (this.numberOfBallots > 1 && new Set(this.colors).size == 1) {
           alert("BINGO");
         }
@@ -212,6 +222,16 @@ p {
   margin: 0;
 }
 
+.color-count-container {
+  margin: auto;
+  width: 20vw;
+  justify-content: space-around;
+  align-items: center;
+  display: flex;
+  font-family: Arial;
+  margin-top: 35px;
+}
+
 .input-line {
   margin: auto;
   display: flex;
@@ -243,7 +263,7 @@ p {
 }
 
 .vipps {
-  margin: 8rem auto 2.5rem auto;
+  margin: 5rem auto 2.5rem auto;
 
   @include mobile {
     margin-top: 2rem;