Skip to content
Snippets Groups Projects
Commit 64ae67bd authored by Malin Haugland Høli's avatar Malin Haugland Høli
Browse files

refactor: :lipstick: More style changes

parent c94a6773
No related branches found
No related tags found
3 merge requests!66Final merge,!51Update design on the application,!4Pipeline fix
Hide whitespace changes
Inline Side-by-side
src/App.vue
+ 2
− 1
View file @ 64ae67bd
......@@ -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
+ 7
− 3
View file @ 64ae67bd
......@@ -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
+ 28
− 26
View file @ 64ae67bd
......@@ -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
+ 4
− 2
View file @ 64ae67bd
......@@ -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
+ 0
− 1
View file @ 64ae67bd
......@@ -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
+ 4
− 4
View file @ 64ae67bd
......@@ -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
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment