refactor: More style changes

src/App.vue

@@ -36,7 +36,8 @@ const showSti = computed(() => {
         route.path == '/forgotPassword' ||
         route.path.startsWith('/konfigurasjon') ||
         route.path == '/hjem' ||
-        route.path == '/profil'
+        route.path == '/profil' ||
+        route.path.startsWith('/loggin')
     )
 })
 

src/views/BiometricLoginView.vue

@@ -18,10 +18,14 @@ const bioLogin = () => {
 
 <template>
     <div class="flex flex-col items-center h-screen gap-5 my-10">
-        <h1>Hei {{ username }}, velkommen tilbake</h1>
-        <button @click="bioLogin">Biometrisk login</button>
+        <h1>Hei {{ username }}, velkommen tilbake!💥</h1>
+        <button
+            class="primary"
+            @click="bioLogin">Biometrisk login</button>
         <p>Ikke deg? Eller funker ikke biometrisk innlogging?</p>
-        <button @click="removeBioCredential">Logg inn med brukernavn og passord</button>
+        <button 
+            class="primary"
+            @click="removeBioCredential">Logg inn med brukernavn og passord</button>
     </div>
 </template>
 

src/views/ManageConfigView.vue

@@ -96,79 +96,81 @@ onMounted(() => {
 <template>
     <div class="w-full flex px-10 justify-center">
         <div class="flex flex-col justify-center items-center max-w-screen-xl gap-3">
-            <h1>Rediger kofigurasjonen</h1>
+            <h1>Rediger konfigurasjon✏️</h1>
 
-            <h2 class="font-thin">Hvor store vaneedringer er du villig til å gjøre?</h2>
+            <h3 class="font-bold">Hvor store vaneedringer er du villig til å gjøre?</h3>
             <div v-if="configuration" class="flex flex-row gap-5">
                 <CardTemplate
-                    :class="{ 'bg-green-500': configuration.motivation === 'VERY_LOW' }"
-                    class="cursor-pointer p-5"
+                    :class="{ 'border-2 border-lime-400': configuration.motivation === 'VERY_LOW' }"
+                    class="cursor-pointer p-4 border-2"
                     @click="configuration.motivation = 'VERY_LOW'"
                 >
-                    <p class="text-2xl">Litt</p>
+                    <p class="font-bold">Litt</p>
                 </CardTemplate>
                 <CardTemplate
-                    :class="{ 'bg-green-500': configuration.motivation === 'MEDIUM' }"
-                    class="cursor-pointer p-5"
+                    :class="{ 'border-2 border-lime-400': configuration.motivation === 'MEDIUM' }"
+                    class="cursor-pointer p-4 border-2"
                     @click="configuration.motivation = 'MEDIUM'"
                 >
-                    <p class="text-2xl">Passe</p>
+                    <p class="font-bold">Passe</p>
                 </CardTemplate>
                 <CardTemplate
-                    :class="{ 'bg-green-500': configuration.motivation === 'VERY_HIGH' }"
-                    class="cursor-pointer p-5"
+                    :class="{ 'border-2 border-lime-400': configuration.motivation === 'VERY_HIGH' }"
+                    class="cursor-pointer p-4 border-2"
                     @click="configuration.motivation = 'VERY_HIGH'"
                 >
-                    <p class="text-2xl">Store</p>
+                    <p class="font-bold">Store</p>
                 </CardTemplate>
             </div>
 
-            <h2 class="font-thin">Hvor kjent er du med sparing fra før av?</h2>
+            <h3 class="font-bold">Hvor kjent er du med sparing fra før av?</h3>
             <div v-if="configuration" class="flex flex-row gap-5">
                 <CardTemplate
-                    :class="{ 'bg-green-500': configuration.experience === 'VERY_LOW' }"
-                    class="cursor-pointer p-5"
+                    :class="{ 'border-2 border-lime-400': configuration.experience === 'VERY_LOW' }"
+                    class="cursor-pointer p-4 border-2"
                     @click="configuration.experience = 'VERY_LOW'"
                 >
-                    <p class="text-2xl">Litt kjent</p>
+                    <p class="font-bold">Litt kjent</p>
                 </CardTemplate>
                 <CardTemplate
-                    :class="{ 'bg-green-500': configuration.experience === 'MEDIUM' }"
-                    class="cursor-pointer p-5"
+                    :class="{ 'border-2 border-lime-400': configuration.experience === 'MEDIUM' }"
+                    class="cursor-pointer p-4 border-2"
                     @click="configuration.experience = 'MEDIUM'"
                 >
-                    <p class="text-2xl">Noe kjent</p>
+                    <p class="font-bold">Noe kjent</p>
                 </CardTemplate>
                 <CardTemplate
-                    :class="{ 'bg-green-500': configuration.experience === 'VERY_HIGH' }"
-                    class="cursor-pointer p-5"
+                    :class="{ 'border-2 border-lime-400': configuration.experience === 'VERY_HIGH' }"
+                    class="cursor-pointer p-4 border-2"
                     @click="configuration.experience = 'VERY_HIGH'"
                 >
-                    <p class="text-2xl">Godt kjent</p>
+                    <p class="font-bold">Godt kjent</p>
                 </CardTemplate>
             </div>
 
-            <h2 class="font-thin my-0">Hva bruker du mye penger på?</h2>
+            <h3 class="font-bold my-0">Hva bruker du mye penger på?</h3>
             <div class="flex flex-col gap-4 p-4 items-center">
                 <CardTemplate
                     v-for="(item, index) in configuration.challengeTypeConfigs"
                     :key="index"
-                    class="flex flex-row flex-wrap justify-center gap-5 border-4 p-3"
+                    class="flex flex-row flex-wrap justify-center gap-5 border-2 p-4"
                 >
                     <input v-model="item.type" placeholder="Type" type="text" />
                     <input v-model="item.specificAmount" placeholder="Pris per uke" type="number" />
                     <input v-model="item.generalAmount" placeholder="Generell pris" type="number" />
                     <button
-                        class="cursor-pointer bg-red-500 rounded-full w-min items-center"
+                        class="primary danger w-min items-center"
                         @click="deleteChallengeType(item.type)"
                         v-text="'x'"
                     />
                 </CardTemplate>
-                <button class="secondary" @click="createChallengeType" v-text="'+'" />
+                <button 
+                    class="font-bold text-2xl cursor-pointer transition-transform duration-300 ease-in-out hover:scale-110 hover:opacity-100 justify-start"
+                    @click="createChallengeType" v-text="'Legg til flere📝'" />
             </div>
 
             <div class="flex flex-row justify-center gap-5">
-                <button class="secondary" @click="router.back()">Avbryt</button>
+                <button class="primary danger" @click="router.back()">Avbryt</button>
                 <button class="primary" @click="validateAndSave">Lagre</button>
             </div>
         </div>

src/views/ManageProfileView.vue

@@ -206,6 +206,8 @@ const saveChanges = async () => {
                     :isModalOpen="isModalOpen"
                 />
 
+                <p class="font-bold">Endre kontonummer:</p>
+
                 <CardTemplate>
                     <div class="bg-red-100">
                         <p class="font-bold mx-3" v-text="'Brukskonto'" />
@@ -213,7 +215,7 @@ const saveChanges = async () => {
                     <input
                         @input="restrictToNumbers($event as InputEvent, 'spending')"
                         v-model="profile.spendingAccount.accNumber"
-                        class="border-1 rounded-none rounded-b-xl w-full"
+                        class="border-transparent rounded-none rounded-b-xl w-full"
                         placeholder="Kontonummer"
                         type="number"
                     />
@@ -226,7 +228,7 @@ const saveChanges = async () => {
                     <input
                         @input="restrictToNumbers($event as InputEvent, 'saving')"
                         v-model="profile.savingAccount.accNumber"
-                        class="border-1 rounded-none rounded-b-xl w-full"
+                        class="border-transparent rounded-none rounded-b-xl w-full"
                         placeholder="Kontonummer"
                         type="number"
                     />

src/views/ResetPasswordView.vue

@@ -17,7 +17,6 @@
                         :type="showPassword ? 'text' : 'password'"
                         placeholder="Skriv inn passord"
                         class="w-full"
-                        :class="{ 'bg-green-200': isPasswordValid }"
                     />
                     <button
                         class="absolute right-0 top-1 bg-transparent hover:bg-transparent"

src/views/ViewProfileView.vue

@@ -65,9 +65,9 @@ const openSpare = () => {
     <div class="w-full flex px-10 justify-center">
         <div class="flex flex-row flex-wrap justify-center w-full max-w-screen-xl gap-20">
             <div class="flex flex-col max-w-96 w-full gap-5">
-                <h1>Profile</h1>
+                <h1>Profil</h1>
                 <div class="flex flex-row gap-5">
-                    <div class="w-32 h-32 border-black border-2 rounded-full shrink-0" />
+                    <div class="w-32 h-32 border-slate-200 border-2 rounded-full shrink-0" />
                     <div class="w-full flex flex-col justify-between">
                         <h3 class="font-thin my-0">{{ profile?.username }}</h3>
                         <h3 class="font-thin my-0">
@@ -80,7 +80,7 @@ const openSpare = () => {
                 <h3 class="font-bold" v-text="'Du har spart ' + '< totalSaved >' + 'kr'" />
 
                 <CardTemplate>
-                    <div class="bg-red-300">
+                    <div class="bg-red-100">
                         <p class="font-bold mx-3" v-text="'Brukskonto'" />
                     </div>
                     <p
@@ -90,7 +90,7 @@ const openSpare = () => {
                 </CardTemplate>
 
                 <CardTemplate>
-                    <div class="bg-red-300">
+                    <div class="bg-red-100">
                         <p class="font-bold mx-3" v-text="'Sparekonto'" />
                     </div>
                     <p