Justerte plassering av knapper for å unngå overlapp

src/components/EatFridgeItemModal.vue

@@ -9,8 +9,8 @@
       <input type = "range" id = "slider" name = "slider" min="0" :max = "this.maxValue" v-model="sliderValue">
 
       <div id="buttons">
-          <button @click="logFoodAsDiscarded">Ble kastet 🗑️ </button>
-          <button id="eatenBtn" @click="logFoodAsEaten" >Ble spist 😋</button>
+          <button @click="logFoodAsDiscarded">Ble kastet</button>
+          <button id="eatenBtn" @click="logFoodAsEaten" >Ble spist</button>
       </div>
       <div v-if="isExpired" id = "itemHasExpiredMessage">
           <h2>Varen har gått ut på dato</h2>
@@ -105,7 +105,7 @@ export default {
 #popup {
   background-color: base.$white;
   color: black;
-  width: 70%;
+  width: 90%;
   padding:2em;
   display:flex;
   flex-direction: column;
@@ -126,7 +126,7 @@ export default {
 }
 
 #buttons {
-  justify-content: center;
+  justify-content: space-between;
   display: flex;
     width: 100%;
   margin: 1em;
@@ -143,7 +143,7 @@ export default {
 button {
   margin:.1em;
   font-weight: bolder;
-    width: 40%;
+    width: 50%;
     padding:1em;
   background-color: base.$red;
   color:white;

src/components/FridgeItem.vue

@@ -44,7 +44,7 @@ export default {
             const dateString = this.formatDate();
 
             if(expirationDays<0) {
-                return "Utgikk " + this.item.expiration
+                return "Utgikk " + dateString
             }
 
             switch (expirationDays){

src/components/ItemSearch.vue

@@ -67,9 +67,10 @@ select {
 }
 
 #wrapper{
-    background-color: base.$grey;
+    background-color: base.$white;
     padding: 2em;
-    border-radius: 9%;
+   border: 3px dashed base.$light-green;
+
 
 }
 

src/views/FridgeView.vue

-<template>
+<template><h1>Kjøleskap</h1><br><br>
     <main>
-        <h1>Kjøleskap</h1><br><br>
+
         <ItemSearch v-if="searchVisible" @itemsAdded="updateFridge"></ItemSearch>
-        <div><p>{{this.fridgeMsg}}</p></div>
+
+
+        <div id = "fridgeMsg"><p>Melding fra kjøleskapet:</p><span>{{this.fridgeMsg}}</span></div>
         <eat-fridge-item-modal @closeModal="hideModal" v-if="visible" :fridge-item="selectedItem"></eat-fridge-item-modal>
 
         <div id = "itemContainer" >
@@ -40,7 +42,7 @@ export default {
           selectedItem: null,
           fridgeItems: [],
           searchVisible: false,
-          fridgeMsg: "fridge message:"
+          fridgeMsg: ""
       }
   },
   methods: {
@@ -53,6 +55,7 @@ export default {
         },
       showItemSearch() {
         this.searchVisible=!this.searchVisible;
+        window.scrollTo({ top: 0, behavior: 'smooth' });
       },
       hideItemSearch() {
           this.searchVisible=false;
@@ -64,7 +67,8 @@ export default {
           this.fridgeItems = await API.getFridgeItems();
           this.hideItemSearch();
           this.updateFridgeMessage("Varen ble lagt i kjøleskapet.")
-      }
+      },
+
   },
   async mounted() {
       this.fridgeItems = await API.getFridgeItems();
@@ -74,14 +78,17 @@ export default {
 
 <style scoped lang="scss">
 main {
-    padding-top: 4em;
+
     color:black;
-    background-color: base.$white;
+    background-color: base.$grey;
+    padding: 2em;
+    min-height: 600px;
 }
 
 h1 {
   width:100%;
   padding-left: 1em;
+  padding-top: 2em;
   font-weight: bold;
 }
 
@@ -109,10 +116,24 @@ h1 {
 }
 
 #addItemBtn-container {
-  padding-bottom: 9em;
+  padding-bottom: 3em;
   z-index: 9999;
   position: fixed;
   bottom: 15px;
   right: 1em;
 }
+
+#fridgeMsg {
+  background-color: base.$light-green;
+  padding: 1em;
+}
+
+#fridgeMsg span, #fridgeMsg p{
+
+  font-weight: bolder;
+  font-size: 1.2em;
+}
+
+
+
 </style>
\ No newline at end of file