diff --git a/src/App.vue b/src/App.vue
index 6713c1cf7e165d3b6f1969ed07b447812ea39ef0..6aeb0e570757a0879a907d81c7de19094bb5b86f 100644
--- a/src/App.vue
+++ b/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">
diff --git a/src/components/HelpComponent.vue b/src/components/HelpComponent.vue
index 54d5cd0b6e8dd90882edf1ba7818337989d0bb29..90182c9df571e9f5517529c93da5bc92ab0342fb 100644
--- a/src/components/HelpComponent.vue
+++ b/src/components/HelpComponent.vue
@@ -1,12 +1,10 @@
<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
diff --git a/src/views/BiometricLoginView.vue b/src/views/BiometricLoginView.vue
index 1ffb51f09170c153890baa63a77110a08a7d915f..15d669023dc049728d7ceff61eea7e6c2c00ad20 100644
--- a/src/views/BiometricLoginView.vue
+++ b/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>
diff --git a/src/views/ManageConfigView.vue b/src/views/ManageConfigView.vue
index a5de5c708b6b41c0e5de2abbaaea52fa7c24a5a3..5e5f634de622323ebaae2fc6f5e0783b12b9d3c1 100644
--- a/src/views/ManageConfigView.vue
+++ b/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>
diff --git a/src/views/ManageProfileView.vue b/src/views/ManageProfileView.vue
index cb252427879cd97fe78808cda58f6d76d6c777c7..adc8b26a59ce9dabf1a9d7743bc760151bebf558 100644
--- a/src/views/ManageProfileView.vue
+++ b/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>
diff --git a/src/views/ResetPasswordView.vue b/src/views/ResetPasswordView.vue
index cce6427a6d0dbea6bd91a5dfb1905a439374ca56..1558f00d20fd122a9a4dcca02795fff1b41ca803 100644
--- a/src/views/ResetPasswordView.vue
+++ b/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"
diff --git a/src/views/ViewProfileView.vue b/src/views/ViewProfileView.vue
index 6993e7d21e75ef166287754e724686434d228467..47e1ac6a7dcc2cbf9bad622c4db113c08010d2ae 100644
--- a/src/views/ViewProfileView.vue
+++ b/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>