Merge remote-tracking branch 'origin/dev' into enhancement/project-cleanup

# Conflicts:
#	src/views/ManageProfileView.vue

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')
     )
 })
 
@@ -142,11 +143,11 @@ const helpMessages = computed(() => {
 </script>
 
 <template>
+    <HelpComponent v-if="showHelp" :speech="helpMessages" />
     <div
         class="min-h-screen bg-left-bottom bg-phone md:bg-pc bg-no-repeat"
         :style="backgroundImageStyle"
     >
-        <HelpComponent v-if="showHelp" :speech="helpMessages" />
         <NavBarComponent v-if="showNavBar" />
 
         <main class="mb-10">

src/components/HelpComponent.vue

 <template>
-    <div class="fixed bottom-5 left-5">
-        <div @click="isModalOpen = true" class="hover:cursor-pointer">
-            <img
-                alt="Hjelp"
-                class="w-1/12 transition-transform duration-300 ease-in-out hover:scale-110"
-                src="@/assets/hjelp.png"
-            />
-        </div>
+    <div class="fixed bottom-5 right-5 hover:cursor-pointer z-50" @click="isModalOpen = true">
+        <img
+            alt="Hjelp"
+            class="h-10 transition-transform duration-300 ease-in-out hover:scale-110"
+            src="@/assets/hjelp.png"
+        />
     </div>
     <ModalComponent v-if="isModalOpen" @close="isModalOpen = false">
         <InteractiveSpare

src/views/BiometricLoginView.vue

@@ -18,10 +18,12 @@ 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

@@ -95,79 +95,87 @@ 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

@@ -119,7 +119,7 @@ const saveChanges = async () => {
                     <div class="flex flex-col justify-center">
                         <button class="h-min bg-transparent text-4xl" v-text="'⬅️'" />
                     </div>
-                    <div class="w-32 h-32 border-black border-2 rounded-full shrink-0" />
+                    <div class="w-32 h-32 border-stale-200 border-2 rounded-full shrink-0" />
                     <div class="flex flex-col justify-center">
                         <button class="h-min bg-transparent text-4xl" v-text="'➡️'" />
                     </div>
@@ -134,7 +134,6 @@ const saveChanges = async () => {
                     </div>
                     <input
                         v-model="profile.firstName"
-                        :class="{ 'bg-green-200': isFirstNameValid }"
                         name="firstName"
                         placeholder="Skriv inn fornavn"
                         type="text"
@@ -149,7 +148,6 @@ const saveChanges = async () => {
                     </div>
                     <input
                         v-model="profile.lastName"
-                        :class="{ 'bg-green-200': isLastNameValid }"
                         name="lastName"
                         placeholder="Skriv inn etternavn"
                         type="text"
@@ -164,7 +162,6 @@ const saveChanges = async () => {
                     </div>
                     <input
                         v-model="profile.email"
-                        :class="{ 'bg-green-200': isEmailValid }"
                         name="email"
                         placeholder="Skriv inn e-post"
                         type="text"
@@ -184,7 +181,6 @@ const saveChanges = async () => {
                     <input
                         v-if="updatePassword"
                         v-model="profile.password"
-                        :class="{ 'bg-green-200': isPasswordValid }"
                         class="w-full"
                         name="password"
                         placeholder="Skriv inn passord"
@@ -192,7 +188,6 @@ const saveChanges = async () => {
                     <input
                         v-if="updatePassword"
                         v-model="confirmPassword"
-                        :class="{ 'bg-red-200': profile.password !== confirmPassword }"
                         class="mt-2"
                         name="confirm"
                         placeholder="Bekreft passord"
@@ -210,41 +205,37 @@ const saveChanges = async () => {
                     :isModalOpen="isModalOpen"
                 />
 
+                <p class="font-bold">Endre kontonummer:</p>
+
                 <CardTemplate>
-                    <div class="bg-red-300">
+                    <div class="bg-red-100">
                         <p class="font-bold mx-3" v-text="'Brukskonto'" />
                     </div>
                     <input
                         @input="restrictToNumbers($event as InputEvent, 'spending')"
                         v-model="profile.spendingAccount.accNumber"
-                        :class="{ 'bg-green-200': isSpendingAccountValid }"
-                        class="border-2 rounded-none rounded-b-xl w-full"
+                        class="border-transparent rounded-none rounded-b-xl w-full"
                         placeholder="Kontonummer"
                         type="number"
                     />
                 </CardTemplate>
 
                 <CardTemplate>
-                    <div class="bg-red-300">
+                    <div class="bg-red-100">
                         <p class="font-bold mx-3" v-text="'Sparekonto'" />
                     </div>
                     <input
                         @input="restrictToNumbers($event as InputEvent, 'saving')"
                         v-model="profile.savingAccount.accNumber"
-                        :class="{ 'bg-green-200': isSavingAccountValid }"
-                        class="border-2 rounded-none rounded-b-xl w-full"
+                        class="border-transparent rounded-none rounded-b-xl w-full"
                         placeholder="Kontonummer"
                         type="number"
                     />
                 </CardTemplate>
 
                 <div class="flex flex-row justify-between">
-                    <button class="bg-button-other" @click="router.back()" v-text="'Avbryt'" />
-                    <button
-                        :disabled="isFormInvalid"
-                        @click="saveChanges"
-                        v-text="'Lagre endringer'"
-                    />
+                    <button class="primary danger" @click="router.back()" v-text="'Avbryt'" />
+                    <button class="primary" @click="saveChanges" v-text="'Lagre endringer'" />
                 </div>
             </div>
         </div>

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
@@ -99,12 +99,17 @@ const openSpare = () => {
                     />
                 </CardTemplate>
 
-                <button @click="router.push({ name: 'edit-profile' })" v-text="'Rediger bruker'" />
                 <button
+                    class="primary secondary"
+                    @click="router.push({ name: 'edit-profile' })"
+                    v-text="'Rediger bruker'"
+                />
+                <button
+                    class="primary secondary"
                     @click="router.push({ name: 'edit-configuration' })"
                     v-text="'Rediger konfigurasjon'"
                 />
-                <button @click="updateBiometrics">
+                <button class="primary" @click="updateBiometrics">
                     {{ profile?.hasPasskey ? 'Endre biometri' : 'Legg til biometri' }}
                 </button>
             </div>