From 64ae67bd2d117f4719f102e4482b0072da49f8b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Malin=20Haugland=20H=C3=B8li?= <malin.holi@gmail.com>
Date: Thu, 2 May 2024 14:41:32 +0200
Subject: [PATCH] refactor: :lipstick: More style changes
---
src/App.vue | 3 +-
src/views/BiometricLoginView.vue | 10 ++++--
src/views/ManageConfigView.vue | 54 +++++++++++++++++---------------
src/views/ManageProfileView.vue | 6 ++--
src/views/ResetPasswordView.vue | 1 -
src/views/ViewProfileView.vue | 8 ++---
6 files changed, 45 insertions(+), 37 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 37a918f..7c9c776 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')
)
})
diff --git a/src/views/BiometricLoginView.vue b/src/views/BiometricLoginView.vue
index 1ffb51f..195ce7d 100644
--- a/src/views/BiometricLoginView.vue
+++ b/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>
diff --git a/src/views/ManageConfigView.vue b/src/views/ManageConfigView.vue
index 6ff3eaa..fd0eeec 100644
--- a/src/views/ManageConfigView.vue
+++ b/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>
diff --git a/src/views/ManageProfileView.vue b/src/views/ManageProfileView.vue
index aee14b0..b64bd43 100644
--- a/src/views/ManageProfileView.vue
+++ b/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"
/>
diff --git a/src/views/ResetPasswordView.vue b/src/views/ResetPasswordView.vue
index cce6427..1558f00 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 dc7f677..9f09c81 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
--
GitLab