flere seksjoner lagt inn. Endring i css

src/views/ProfileSettings.vue

 <template>
     <main>
 
-        <h1>Profilinnstillinger</h1>
+        <h1><br><br>Profilinnstillinger <br></h1>
 
         <div id = "profilepicture">
-            <Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '30px'}" />
+            <Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '500px'}" />
         </div>
+
+        <h2>Petter</h2>
         <button id="changeUserBtn">Bytt bruker</button>
 
         <form @submit.prevent="submit">
-            <label for="brukernavn">Navn</label><br>
+            <label for="brukernavn">Profilnavn</label><br>
             <input type="text" required><br>
-
-            <h3>Brukertype</h3>
+          <br>
+            <h4>Brukertype</h4>
             <input type="radio" id="normal" name="userType" value="normal">
-            <label for="normal">Vanlig</label><br>
+            <label for="normal"> Standard</label><br>
 
             <input type="radio" id="restricted" name="userType" value="restricted">
-            <label for="restricted">Begrenset - Kan ikke redigere ukeplan eller handleliste</label><br>
+            <label for="restricted"> Begrenset - Kan ikke redigere ukeplan eller handleliste</label><br>
 
             <br>
             <h3>Profilbilde</h3>
             <div id="changeUserImage">
                 <div id = "profilepicture">
                     <Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '30px'}" />
-                    <img src="#" alt="profile picture">
                 </div>
                 <button>Endre bilde</button>
             </div>
 
             <div id = "submitbuttonBox">
-                <button>Lagre brukerinnstillinger</button>
-                <button>Slett brukerprofil</button>
+                <button class="saveBtn" @click="saveUserSettings" >Lagre brukerinnstillinger</button>
+                <button class="delBtn" @click="deleteUser">Slett brukerprofil</button>
             </div>
 
         </form>
@@ -40,39 +41,58 @@
 
         <form @submit.prevent="submit">
 
-            <h2>Matpreferanser</h2>
+            <h2>-Matpreferanser-</h2>
+            <p class ="infoText">Hvis huket av, så vil du kun få oppskrifter av disse typene:</p>
+
             <input type="checkbox" id="vegetar" name="vegetar" value="vegetar">
             <label for="vegetar"> vegetar </label><br>
             <input type="checkbox" id="vegan" name="vegan" value="vegan">
-            <label for="vegetar"> vegan </label><br>
+            <label for="vegan"> vegan </label><br>
 
             <br>
 
-            <h3>Allergener</h3>
+            <h2>-Allergener-</h2>
+
+            <p class ="infoText">Du vil ikke få forslag om oppskrifter med disse varene:</p>
+
             <input type="checkbox" id="gluten" name="gluten" value="Gluten">
-            <label for="vehicle1"> gluten</label><br>
+            <label for="allergen"> gluten</label><br>
             <input type="checkbox" id="nøtter" name="nøtter" value="nøtter">
-            <label for="vehicle1">nøtter</label><br>
-
-            <button>Lagre Appinnstillinger</button>
+            <label for="allergen"> nøtter</label><br>
+            <input type="checkbox" id="melk" name="melk" value="melk">
+            <label for="allergen"> melk</label><br>
 
+            <button class="saveBtn" @click="saveFoodPreference">Lagre matpreferanser <br>  og allergener</button>
         </form>
 
         <h1>Konto-innstillinger</h1>
         <form @submit.prevent="submit">
 
+            <p class="infoText">OBS: Ved å endre epost endrer du også brukernavnet ditt</p>
+
             <label for="email">Epost</label><br>
             <input type="text" id="email">
 
             <label for="password">Passord</label><br>
             <input type="password" id="password">
 
-            <button>Lagre Appinnstillinger</button>
+            <button class="saveBtn" @click="saveAccountSettings">Lagre kontoinnstillinger</button>
 
-        </form>
+          </form>
+          <br>
+          <br>
+          <hr>
 
-    </main>
+          <form  @submit.prevent="submit" id = "dangerZone">
+          <h1>🔺FARESONE🔺</h1>
+          <p class="infoText">Ved å trykke på knappen nedenfor, vil du slette din SmartMat-konto</p>
+            <input type="checkbox" id="melk" name="melk" value="melk">
+            <label for="allergen"> Jeg bekrefter jeg skjønner dette, og ønsker å slette kontoen min SmartMat-konto for alltid.</label><br>
+            <button class="delBtn" @click="deleteAccount">SLETT KONTO</button>
+          </form>
 
+          <br><br><br>
+    </main>
 </template>
 
 <script>
@@ -86,22 +106,61 @@ export default {
         iconColor() {
             return "#000000"
         }
+    },
+    methods: {
+      saveUserSettings(){
+        alert("(Denne knappen gjør ingen ting) brukerinnstillinger lagret!")
+      },
+      saveAccountSettings(){
+        alert("(Denne knappen gjør ingen ting) konto oppdatert")
+      },
+      deleteAccount(){
+        alert("(Denne knappen gjør ingen ting) men  account deleted")
+      },
+      deleteUser(){
+        alert("(Denne knappen gjør ingen ting)  bruker slettet")
+      },
+      saveFoodPreference() {
+        alert("(Denne knappen gjør ingen ting) matpreferanser lagret")
+      }
     }
 }
 </script>
 
 <style scoped lang ="scss">
+#dangerZone {
+  color: white;
+  color: darkred;
+  qwidth: 100%;
+}
+
 #profilepicture {
+    display:flex;
     border-radius:50%;
-    width:50px;
+    width:100px;
+    height: 100px;
     background-color: white;
-    border: 2px solid black;
+    justify-content: center;
+    align-items: center;
+    border: 3px solid base.$grey;
 }
 
 #changeUserImage {
     display:flex;
 }
 
+#changeUserImage #profilepicture {
+  width: 50px;
+  height: 50px;
+}
+
+.infoText {
+  background-color: white;
+  padding: .5em;
+  margin: .4em;
+}
+
+
 form {
     background-color: base.$grey;
     color: black;
@@ -126,12 +185,32 @@ input[type="password"]{
 button {
     background-color: base.$red;
     color: black;
+
     border: 1px solid black;
+
     margin: 1em;
 }
+
+button:hover{
+  background-color: #282828;
+
+}
+
+.saveBtn, .delBtn {
+  background-color: base.$green;
+  color: white;
+  font-weight: bold;
+  padding:.9em;
+  border:none;
+}
+
+.delBtn {
+  background-color: darkred;
+}
+
 #changeUserBtn {
     padding:.9em;
-    padding-right: 1.5em;
+
 }
 
 main {
@@ -141,8 +220,9 @@ main {
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    width: 90%;
+    width: 100%;
     text-align: left;
+  left:0;
 }