diff --git a/src/assets/base.css b/src/assets/base.css
index a3d1d2d008ca97720ade9492a48401d5acae500e..442cf4ed65f18f74431c4abf239b36102501bc5e 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -4,13 +4,18 @@
--vt-c-white-mute: #f2f2f2;
--vt-c-kellyGreen: #6AB40A;
+ --vt-c-kellyGreen-Dark: #4E9208;
--vt-c-kellyGreen-Light: #A4ED45;
--vt-c-borderGrey: #C1C1C1;
--vt-c-borderGreyDark: #a19f9f;
--vt-c-Raspberry: #E91658;
+ --vt-c-Raspberry-Dark: #C2134A;
--vt-c-Orange: #FFA600;
+ --vt-c-Orange-Dark: #CC8400;;
--vt-c-Orange-Light: #FCBD47;
--vt-c-DarkBlue: #1600B2;
+ --vt-c-DarkBlue-Dark: #0F0099;;
+ --vt-c-DarkBlue-Light: #2500CC;
--vt-c-Grape: #8332AC;
--vt-c-Grey: #A4A4A6;
--vt-c-Grey-Light: #CCCCCF;
@@ -29,9 +34,16 @@
/* semantic color variables for this project */
:root {
+ --color-pageination-button: var(--vt-c-white);
+ --color-pageination-button-click: var(--vt-c-borderGrey);
--color-confirm-button: var(--vt-c-kellyGreen);
+ --color-confirm-button-click: var(--vt-c-kellyGreen-Dark);
--color-cancel-button: var(--vt-c-Raspberry);
+ --color-cancel-button-click: var(--vt-c-Raspberry-Dark);
+ --color-save-button: var(--vt-c-Orange);
+ --color-save-button-click: var(--vt-c-Orange-Dark);
--color-buttonText: var(--vt-c-white);
+ --color-button-text: var(--vt-c-white);
--color-inactive-button: var(--vt-c-borderGrey);
--color-inactive-button-text: var(--vt-c-borderGreyDark);
@@ -60,6 +72,7 @@
--color-sideBar: var(--vt-c-white);
--color-background: var(--vt-c-white);
+ --color-background-white: var(--vt-c-white);
--color-background-soft: var(--vt-c-white-soft);
--color-background-mute: var(--vt-c-white-mute);
@@ -68,6 +81,7 @@
--color-border-error: var(--vt-c-Raspberry);
--color-text: var(--vt-c-text-light-1);
+ --color-text-black: var(--vt-c-black);
--color-text-error: var(--vt-c-Raspberry);
--color-shadow: rgba(0, 0, 0, 0.2);
@@ -148,17 +162,17 @@ h1{
}
h2{
- font-size: 2.5em;
+ font-size: 2.0em;
}
h3{
- font-size: 1em;
+ font-size: 1.5em;
}
h4{
- font-size: 0.5em;
+ font-size: 1.0em;
}
h5{
- font-size: 0.25em;
+ font-size: 0.5em;
}
\ No newline at end of file
diff --git a/src/assets/png/gold-coin.png b/src/assets/png/gold-coin.png
new file mode 100644
index 0000000000000000000000000000000000000000..815cab94fabe54be732f91c1cd3661653062237c
Binary files /dev/null and b/src/assets/png/gold-coin.png differ
diff --git a/src/assets/pig_394778.png b/src/assets/png/pig_394778.png
similarity index 100%
rename from src/assets/pig_394778.png
rename to src/assets/png/pig_394778.png
diff --git a/src/components/TopBanner.vue b/src/components/TopBanner.vue
index 002c33a8e612a82c7dfa5a072f03236397622157..7741573d9111a67b4ab3b8832181dcce451f82b6 100644
--- a/src/components/TopBanner.vue
+++ b/src/components/TopBanner.vue
@@ -10,7 +10,7 @@ function navigateToStartingPage(){
<template>
<div id = TopBanner>
- <h2 id = "AppName">Sparesti<img src="../assets/pig_394778.png" alt = "logo" id = "logo" @click="navigateToStartingPage()"></h2>
+ <h2 id = "AppName">Sparesti<img src="../assets/png/pig_394778.png" alt = "logo" id = "logo" @click="navigateToStartingPage()"></h2>
</div>
</template>
diff --git a/src/components/profile/BadgeInfo.vue b/src/components/profile/BadgeInfo.vue
index a99abdbd0f77b00700f4bb04b867a7afcd7c980f..5da882c0c0187f4e659a68acc28aab5a8e8dcff3 100644
--- a/src/components/profile/BadgeInfo.vue
+++ b/src/components/profile/BadgeInfo.vue
@@ -5,13 +5,81 @@ const props = defineProps <{
title: string
}>();
+const testData = [
+ {
+ id:1,
+ title: 'Mynt A',
+ img:'/src/assets/png/gold-coin.png'
+ },
+ {
+ id:2,
+ title: 'Mynt B',
+ img:'/src/assets/png/gold-coin.png'
+ },
+ {
+ id:3,
+ title: 'Mynt C',
+ img:'/src/assets/png/gold-coin.png'
+ },
+ {
+ id:4,
+ title: 'Mynt D',
+ img:'/src/assets/png/gold-coin.png'
+ },
+ {
+ id:5,
+ title: 'Mynt E',
+ img:'/src/assets/png/gold-coin.png'
+ },
+ {
+ id:6,
+ title: 'Mynt F',
+ img:'/src/assets/png/gold-coin.png'
+ },
+ {
+ id:7,
+ title: 'Mynt G',
+ img:'/src/assets/png/gold-coin.png'
+ },
+ {
+ id:8,
+ title: 'Mynt H',
+ img:'/src/assets/png/gold-coin.png'
+ },
+ {
+ id:9,
+ title: 'Mynt I',
+ img:'/src/assets/png/gold-coin.png'
+ },
+ {
+ id:10,
+ title: 'Mynt J',
+ img:'/src/assets/png/gold-coin.png'
+ },
+
+]
+
const title = ref<string>(props.title)
+const achievements = ref<Achievement[]>(testData)
+
+interface Achievement{
+ id: number,
+ title: string,
+ img: string
+};
</script>
<template>
<div class="badge-container">
<h3 class="title">{{title}}</h3>
+ <div class="badges">
+ <div class="badge" v-for="(achievement) in achievements" :key="achievement.id">
+ <img class="badge-img" :src="achievement.img" :alt="achievement.title">
+ <h3 class="badge-title"> {{achievement.title}}</h3>
+ </div>
+ </div>
+
</div>
</template>
@@ -20,9 +88,39 @@ const title = ref<string>(props.title)
.badge-container{
display: flex;
flex-direction: column;
+ width: 100%;
}
.title{
font-weight: bold;
}
+.badges{
+ display: flex;
+ flex-direction: row;
+ overflow-x: scroll;
+ width: 100%;
+ gap: 2.0%;
+}
+
+.badge{
+ display: flex;
+ flex-direction: column;
+
+ min-width: 10%;
+ aspect-ratio: 1/1;
+}
+
+.badge-img{
+ width: 100%;
+}
+
+.badge-title{
+ text-align: center;
+}
+
+@media only screen and (max-width: 1000px) {
+ .badge{
+ min-width: 16.5%;
+ }
+}
</style>
\ No newline at end of file
diff --git a/src/components/profile/BankAccountInfo.vue b/src/components/profile/BankAccountInfo.vue
index 4ecef5b093d451b3490c3727821991501c85e3ba..353a892506a885aa093d033c55da93ce946a67b9 100644
--- a/src/components/profile/BankAccountInfo.vue
+++ b/src/components/profile/BankAccountInfo.vue
@@ -38,13 +38,15 @@ const saveAccountInfo = async ()=> {
<div class="account-info">
<div class="header">
<h3 class="title">Konto opplysninger</h3>
- <button class="save-button" @click="saveAccountInfo">Lagre</button>
+ <button class="save-button" @click="saveAccountInfo">
+ <h3 class="save-button-title">Lagre</h3>
+ </button>
</div>
<div class="input-fields">
<div class="input-collection">
- <h3>Forbrukskonto: </h3>
+ <h4>Forbrukskonto: </h4>
<select class="accounts" v-model="checkingAccount">
<option key="check-default" :value="checkingAccount">{{checkingAccount}}</option>
<option v-for="(account, index) in checkingAccountOptions" :key="'check' + index" :value="account">{{ account }}</option>
@@ -52,7 +54,7 @@ const saveAccountInfo = async ()=> {
</div>
<div class="input-collection">
- <h3>Sparekonto: </h3>
+ <h4>Sparekonto: </h4>
<select class="accounts" :class="{'error': accountError}" v-model="savingAccount">
<option key="saving-default" :value="savingAccount">{{savingAccount}}</option>
<option v-for="(account, index) in savingAccountOptions" :key="'saving' + index" :value="account">{{ account }}</option>
@@ -60,7 +62,7 @@ const saveAccountInfo = async ()=> {
</div>
<div class="alert-box">
- <h3 v-if="accountError" class="error-message">{{accountError}}</h3>
+ <h4 v-if="accountError" class="error-message">{{accountError}}</h4>
</div>
</div>
@@ -91,6 +93,21 @@ const saveAccountInfo = async ()=> {
border-radius: 20px;
padding-right: 5.0%;
padding-left: 5.0%;
+ color: var(--color-headerText);
+ background-color: var(--color-save-button);
+ border: none;
+}
+
+.save-button:hover{
+ transform: scale(1.02);
+}
+
+.save-button:active{
+ background-color: var(--color-save-button-click);
+}
+
+.save-button-title{
+ font-weight: bold;
}
@@ -125,6 +142,7 @@ const saveAccountInfo = async ()=> {
display: flex;
flex-direction: column;
place-items: center;
+ min-height: 25px;
}
.error{
diff --git a/src/components/profile/IncomeInfo.vue b/src/components/profile/IncomeInfo.vue
index 6235b45c569549ca65a9cbe82f425957dfb17f6e..01131f2c48cbbba5e2862c006e712af6bae1fd2e 100644
--- a/src/components/profile/IncomeInfo.vue
+++ b/src/components/profile/IncomeInfo.vue
@@ -44,19 +44,21 @@ const saveInput = async () => {
<div class="income-info">
<div class="header">
<h3 class="title">Økonomiske opplysninger</h3>
- <button class="save-button" @click="saveInput">Lagre</button>
+ <button class="save-button" @click="saveInput">
+ <h3 class="save-button-title">Lagre</h3>
+ </button>
</div>
<div class="input-fields">
<div class="description-collection">
<div class="description-box">
- <h3 class="description">MÃ¥nedlig inntekt (nok): </h3>
+ <h4 class="description">MÃ¥nedlig inntekt (nok): </h4>
</div>
<div class="description-box">
- <h3 class="description">Faste utgifter (nok): </h3>
+ <h4 class="description">Faste utgifter (nok): </h4>
</div>
<div class="description-box">
- <h3 class="description">Ønsket sparebeløp (nok): </h3>
+ <h4 class="description">Ønsket sparebeløp (nok): </h4>
</div>
</div>
@@ -64,21 +66,21 @@ const saveInput = async () => {
<div class="input">
<input class="input-field" :class="{'error': monthlyIncomeError}" v-model="monthlyIncome">
<div class="alert-box">
- <h3 v-if="monthlyIncomeError" class="error-message">{{monthlyIncomeError}}</h3>
+ <h4 v-if="monthlyIncomeError" class="error-message">{{monthlyIncomeError}}</h4>
</div>
</div>
<div class="input">
<input class="input-field" :class="{'error': monthlySpendingError}" v-model="monthlySpending">
<div class="alert-box">
- <h3 v-if="monthlySpendingError" class="error-message">{{monthlySpendingError}}</h3>
+ <h4 v-if="monthlySpendingError" class="error-message">{{monthlySpendingError}}</h4>
</div>
</div>
<div class="input">
<input class="input-field" :class="{'error': monthlySavingError}" v-model="monthlySaving">
<div class="alert-box">
- <h3 v-if="monthlySavingError" class="error-message">{{monthlySavingError}}</h3>
+ <h4 v-if="monthlySavingError" class="error-message">{{monthlySavingError}}</h4>
</div>
</div>
@@ -113,6 +115,21 @@ const saveInput = async () => {
border-radius: 20px;
padding-right: 5.0%;
padding-left: 5.0%;
+ color: var(--color-headerText);
+ background-color: var(--color-save-button);
+ border: none;
+}
+
+.save-button:hover{
+ transform: scale(1.02);
+}
+
+.save-button:active{
+ background-color: var(--color-save-button-click);
+}
+
+.save-button-title{
+ font-weight: bold;
}
.input-fields{
@@ -171,8 +188,7 @@ const saveInput = async () => {
place-items: center;
width: 100%;
- height: 50%;
- min-height: 1rem;
+ min-height: 25px;
}
.error{
@@ -185,7 +201,7 @@ const saveInput = async () => {
@media only screen and (max-width: 1000px){
.input-fields{
- padding-top: 1.0%;
+ padding-top: 3.0%;
}
}
diff --git a/src/components/profile/PasswordInfo.vue b/src/components/profile/PasswordInfo.vue
index e3fa7fcc62d3c0c1c4be304405d5466c7c88789d..e1dffd0505c6890abef5b088d0c83bbfe7f72da6 100644
--- a/src/components/profile/PasswordInfo.vue
+++ b/src/components/profile/PasswordInfo.vue
@@ -45,29 +45,31 @@ const saveInfo = async () => {
<div class="password-info">
<div class="header">
<h3 class="title">Passord</h3>
- <button class="save-button" @click="saveInfo"> Lagre</button>
+ <button class="save-button" @click="saveInfo">
+ <h3 class="save-button-title">Lagre</h3>
+ </button>
</div>
<div class="input-fields">
<div class="input-collection">
- <h3>Nåværende passord: </h3>
+ <h4>Nåværende passord: </h4>
<input class="input"
:class="{'error': currentPasswordError}"
type="password"
v-model="currentPassword">
<div class="alert-box">
- <h3 v-if="currentPasswordError" class="error-message">{{currentPasswordError}}</h3>
+ <h4 v-if="currentPasswordError" class="error-message">{{currentPasswordError}}</h4>
</div>
</div>
<div class="input-collection">
- <h3>Nytt passord: </h3>
+ <h4>Nytt passord: </h4>
<input class="input"
:class="{'error': newPasswordError}"
type="password"
v-model="newPassword">
<div class="alert-box">
- <h3 v-if="newPasswordError" class="error-message">{{newPasswordError}}</h3>
+ <h4 v-if="newPasswordError" class="error-message">{{newPasswordError}}</h4>
</div>
</div>
</div>
@@ -80,7 +82,7 @@ const saveInfo = async () => {
flex-direction: column;
width: 100%;
- height: 100%;
+ min-height: 100%;
}
@@ -98,14 +100,29 @@ const saveInfo = async () => {
border-radius: 20px;
padding-right: 5.0%;
padding-left: 5.0%;
+ color: var(--color-headerText);
+ background-color: var(--color-save-button);
+ border: none;
+}
+
+.save-button:hover{
+ transform: scale(1.02);
+}
+
+.save-button:active{
+ background-color: var(--color-save-button-click);
+}
+
+.save-button-title{
+ font-weight: bold;
}
.input-fields{
display: flex;
flex-direction: column;
- height: 100%;
width: 100%;
+ height: 100%;
place-content: start;
}
@@ -126,6 +143,7 @@ const saveInfo = async () => {
display: flex;
flex-direction: column;
place-items: center;
+ min-height: 20px;
}
.error{
diff --git a/src/components/profile/UserInfo.vue b/src/components/profile/UserInfo.vue
index 90a658f83cba3d1c03795a65d1ca1dde7e20b8ce..e82fb66026ab949f7bcc524789011eaadc35fcba 100644
--- a/src/components/profile/UserInfo.vue
+++ b/src/components/profile/UserInfo.vue
@@ -40,7 +40,9 @@ const saveUserInfo = async ()=>{
<div class="user-info">
<div class="header">
<h3 class="title">Bruker opplysninger</h3>
- <button class="save-button" @click="saveUserInfo">Lagre</button>
+ <button class="save-button" @click="saveUserInfo">
+ <h3 class="save-button-title">Lagre</h3>
+ </button>
</div>
<div class="input-fields">
<div class="img-input">
@@ -50,17 +52,17 @@ const saveUserInfo = async ()=>{
</div>
<div class="text-input">
<div class="input-collection">
- <H3>Brukernavn: </H3>
+ <H4>Brukernavn: </H4>
<input class="input" :class="{'error': usernameError}" v-model="username">
<div class="alert-box">
- <h3 v-if="usernameError" class="error-message">{{usernameError}}</h3>
+ <h4 v-if="usernameError" class="error-message">{{usernameError}}</h4>
</div>
</div>
<div class="input-collection">
- <H3>E-post: </H3>
+ <H4>E-post: </H4>
<input class="input" :class="{'error': emailError}" v-model="email">
<div class="alert-box">
- <h3 v-if="emailError" class="error-message">{{emailError}}</h3>
+ <h4 v-if="emailError" class="error-message">{{emailError}}</h4>
</div>
</div>
</div>
@@ -94,6 +96,21 @@ const saveUserInfo = async ()=>{
border-radius: 20px;
padding-right: 5.0%;
padding-left: 5.0%;
+ color: var(--color-headerText);
+ background-color: var(--color-save-button);
+ border: none;
+}
+
+.save-button:hover{
+ transform: scale(1.02);
+}
+
+.save-button:active{
+ background-color: var(--color-save-button-click);
+}
+
+.save-button-title{
+ font-weight: bold;
}
.input-fields{
@@ -118,6 +135,12 @@ const saveUserInfo = async ()=>{
height: 100%;
}
+.input{
+ border-radius: 20px;
+ min-height: 30px;
+ padding-left: 2.0%;
+}
+
.img-input{
display: flex;
flex-direction: column;
@@ -135,10 +158,22 @@ const saveUserInfo = async ()=>{
height: 50%;
}
-.input{
+.save-button{
border-radius: 20px;
- min-height: 30px;
- padding-left: 2.0%;
+ padding-right: 5.0%;
+ padding-left: 5.0%;
+ color: var(--color-headerText);
+ font-weight: bold;
+ background-color: var(--color-save-button);
+ border: none;
+}
+
+.save-button:hover{
+ transform: scale(1.02);
+}
+
+.save-button:active{
+ background-color: var(--color-save-button-click);
}
.profile-picture-button{
@@ -148,7 +183,7 @@ const saveUserInfo = async ()=>{
width: 100%;
aspect-ratio: 1/1;
border-radius: 50%;
- background-color: transparent;
+ background-color: var(--color-headerText);
border: 2px solid var(--color-border);
}
@@ -168,6 +203,7 @@ const saveUserInfo = async ()=>{
place-items: center;
width: 100%;
+ min-height: 20px;
}
.error{
@@ -178,4 +214,10 @@ const saveUserInfo = async ()=>{
color: var(--color-text-error);
}
+@media only screen and (max-width: 1000px) {
+ .img-input{
+ max-width: 15%;
+ }
+}
+
</style>
\ No newline at end of file
diff --git a/src/views/FrontPage/StartView.vue b/src/views/FrontPage/StartView.vue
index 87deeb1f0fe77d58b4518da86aba9e6a286b4156..3b6684d5a6d625cd03e4bfac2dd58ee8a6cbbccd 100644
--- a/src/views/FrontPage/StartView.vue
+++ b/src/views/FrontPage/StartView.vue
@@ -13,7 +13,7 @@ function navigateToLogin(){
<template>
<div id = StartPage>
<div id = "heading">
- <h1 id = "title">Sparesti<img src="../../assets/pig_394778.png" alt ="logo" id = "logo"></h1>
+ <h1 id = "title">Sparesti<img src="../../assets/png/pig_394778.png" alt ="logo" id = "logo"></h1>
</div>
<div id = Info>
<InfoComponent/>
diff --git a/src/views/HomePage/ProfileView.vue b/src/views/HomePage/ProfileView.vue
index 9101954df71bcfdb5eefad9a4969c6c13fe6eb18..4eb91960aa84ab8cab10be73779d11558143af2e 100644
--- a/src/views/HomePage/ProfileView.vue
+++ b/src/views/HomePage/ProfileView.vue
@@ -31,7 +31,7 @@ const username = ref<string>('$$$$')
</div>
</div>
<div id="bottom">
- <div class="component">
+ <div class="component" id="badges">
<BadgeInfo title="Mynter"></BadgeInfo>
</div>
</div>
@@ -46,7 +46,6 @@ const username = ref<string>('$$$$')
width: 100%;
height: 100%;
- min-height: 650px;
gap: 2.5%;
}
@@ -58,12 +57,22 @@ const username = ref<string>('$$$$')
#top, #middle{
display: flex;
flex-direction: row;
-
width: 100%;
- height: 33%;
gap: 1.5%;
}
+#top{
+ min-height: 35%;
+}
+
+#middle{
+ min-height: 38.5%;
+}
+
+#bottom{
+ padding-bottom: 100px;
+ min-height: 35%;
+}
.component{
border: 2px solid var(--color-border);
border-radius: 20px;
@@ -74,22 +83,40 @@ const username = ref<string>('$$$$')
#user-info, #income-info{
width: 60%;
+ height: 100%;
}
#password-info, #account-info{
width: 40%;
+ height: 100%;
+}
+
+#badges{
+ width: 100%;
}
@media only screen and (max-width: 1000px){
- #top, #middle{
+ #top{
+ display: flex;
+ flex-direction: column;
+ place-content: space-evenly;
+ width: 100%;
+ min-height: 60%;
+ }
+ #middle{
display: flex;
flex-direction: column;
+ place-content: space-evenly;
width: 100%;
- height: 100%;
+ min-height: 70%;
}
#user-info, #password-info, #income-info, #account-info{
width: 100%;
}
+
+ #user-info, #password-info{
+ height: 50%;
+ }
}
</style>
\ No newline at end of file
diff --git a/src/views/HomePageView.vue b/src/views/HomePageView.vue
index 477fafbef51bc5ba575927796dfe7f20595de04e..3a0a81285fe318381592e37c48ef9487189a98d8 100644
--- a/src/views/HomePageView.vue
+++ b/src/views/HomePageView.vue
@@ -40,13 +40,13 @@ import SideNav from '@/components/navigation/SideNav.vue'
.main{
display: flex;
flex-direction: row;
- height: 100%;
+ height: 88%;
width: 100%;
+ min-height: 650px;
}
.side-nav{
width: 15%;
- min-height: 650px;
padding: 2.0% 1.0% 2.0% 1.0% ;
box-shadow: 0 2px 5px var(--color-shadow);
}
@@ -66,6 +66,14 @@ import SideNav from '@/components/navigation/SideNav.vue'
.view-element{
width: 100%;
}
+
+ .main{
+ min-height: 0;
+ }
+
+ .view-element{
+ min-height: 650px;
+ }
}
</style>
\ No newline at end of file