From 187594c69d731518ecd502d6e952846d81a6e4c1 Mon Sep 17 00:00:00 2001
From: VIktorGrev <viktog2210@gmail.com>
Date: Fri, 3 May 2024 13:36:41 +0200
Subject: [PATCH] style: Adding main colour to all settings
---
src/components/Settings/SettingsAccount.vue | 19 +++++-
src/components/Settings/SettingsBank.vue | 23 ++++++-
src/components/Settings/SettingsProfile.vue | 28 +++++----
src/components/Settings/SettingsSecurity.vue | 21 ++++++-
src/components/UserProfile/MyProfile.vue | 64 ++++----------------
src/views/User/UserSettingsView.vue | 5 ++
6 files changed, 90 insertions(+), 70 deletions(-)
diff --git a/src/components/Settings/SettingsAccount.vue b/src/components/Settings/SettingsAccount.vue
index 90ed8d6..e34e19a 100644
--- a/src/components/Settings/SettingsAccount.vue
+++ b/src/components/Settings/SettingsAccount.vue
@@ -66,7 +66,7 @@ onMounted(() => {
<p data-cy="change-email-msg-error" class="text-danger">{{ errorMsg }}</p>
<p data-cy="change-email-msg-confirm" class="text-success">{{ confirmationMsg }}</p>
<br>
- <button data-cy="change-email-btn" type="submit" class="btn btn-primary">Endre
+ <button data-cy="change-email-btn" type="submit" class="btn btn-primary classyButton">Endre
Informasjon</button>
<hr>
<div class="form-group">
@@ -77,3 +77,20 @@ onMounted(() => {
</form>
</div>
</template>
+
+<style scoped>
+ .classyButton {
+ background-color: #003A58;
+ border: #003A58;
+ }
+
+ .classyButton:hover {
+ background-color: #003b58ec;
+ border: #003A58;
+ }
+
+ .classyButton:active {
+ background-color: #003b58d6;
+ border: #003A58;
+ }
+</style>
diff --git a/src/components/Settings/SettingsBank.vue b/src/components/Settings/SettingsBank.vue
index dfcc04f..481c022 100644
--- a/src/components/Settings/SettingsBank.vue
+++ b/src/components/Settings/SettingsBank.vue
@@ -10,7 +10,7 @@
invalid-message="Vennligst skriv inn din brukskonto" />
</div>
<br>
- <button data-cy="update-spending-btn" type="submit" class="btn btn-primary">Oppdater
+ <button data-cy="update-spending-btn" type="submit" class="btn btn-primary classyButton">Oppdater
brukskonto</button>
</form>
<br>
@@ -22,7 +22,7 @@
invalid-message="Vennligst skriv inn din sparekonto" />
</div>
<br>
- <button data-cy="update-savings-btn" type="submit" class="btn btn-primary">Oppdater
+ <button data-cy="update-savings-btn" type="submit" class="btn btn-primary classyButton">Oppdater
sparekonto</button>
</form>
<hr>
@@ -110,4 +110,21 @@ async function getAccountInfo() {
handleUnknownError(err)
}
}
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+ .classyButton {
+ background-color: #003A58;
+ border: #003A58;
+ }
+
+ .classyButton:hover {
+ background-color: #003b58ec;
+ border: #003A58;
+ }
+
+ .classyButton:active {
+ background-color: #003b58d6;
+ border: #003A58;
+ }
+</style>
\ No newline at end of file
diff --git a/src/components/Settings/SettingsProfile.vue b/src/components/Settings/SettingsProfile.vue
index ea526eb..0ee945c 100644
--- a/src/components/Settings/SettingsProfile.vue
+++ b/src/components/Settings/SettingsProfile.vue
@@ -111,7 +111,7 @@ onMounted(() => {
style="display: none;" />
<img :src="iconSrc" alt="Brukeravatar" style="width: 200px; height: 200px;">
<div class="mt-2">
- <button type="button" class="btn btn-primary" @click="triggerFileUpload"><img
+ <button type="button" class="btn btn-primary classyButton" @click="triggerFileUpload"><img
src="../../assets/icons/download.svg"> Last opp bilde</button>
</div>
</div>
@@ -127,18 +127,9 @@ onMounted(() => {
placeholder="Skriv inn ditt etternavn" invalid-message="Vennligst skriv inn ditt etternavn" />
</div>
<br>
- <button data-cy="profile-submit-btn" type="submit" class="btn btn-primary">Oppdater
+ <button data-cy="profile-submit-btn" type="submit" class="btn btn-primary classyButton">Oppdater
profil</button>
</form>
- <hr>
- <div>
- <h6>Stilsett din profil banner</h6>
- <div class="bannerHolder">
- <div v-for="x in imageRange" :key="x">
- <img :src="apiUrl + '/api/images/' + x" style="width: 400px; height: 40px; margin: 10px">
- </div>
- </div>
- </div>
</div>
</template>
@@ -158,4 +149,19 @@ onMounted(() => {
flex-wrap: wrap;
margin-top: 20px;
}
+
+.classyButton {
+ background-color: #003A58;
+ border: #003A58;
+ }
+
+ .classyButton:hover {
+ background-color: #003b58ec;
+ border: #003A58;
+ }
+
+ .classyButton:active {
+ background-color: #003b58d6;
+ border: #003A58;
+ }
</style>
\ No newline at end of file
diff --git a/src/components/Settings/SettingsSecurity.vue b/src/components/Settings/SettingsSecurity.vue
index db446c7..98ec8d1 100644
--- a/src/components/Settings/SettingsSecurity.vue
+++ b/src/components/Settings/SettingsSecurity.vue
@@ -23,7 +23,7 @@
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,16}" label="Bekreft nytt passord" placeholder="Skriv inn passord"
invalid-message="Passordet må være mellom 4 og 16 tegn og inneholde en stor bokstav, en liten bokstav og et tall" />
</div>
- <button data-cy="update-password-btn" type="submit" class="btn btn-primary">Oppdater
+ <button data-cy="update-password-btn" type="submit" class="btn btn-primary classyButton">Oppdater
passord</button>
<button data-cy="reset-fields-btn" type="reset" class="btn btn-light">Tilbakestill
endringer</button>
@@ -76,4 +76,21 @@ const handleSubmit = async () => {
console.error(err)
}
}
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+ .classyButton {
+ background-color: #003A58;
+ border: #003A58;
+ }
+
+ .classyButton:hover {
+ background-color: #003b58ec;
+ border: #003A58;
+ }
+
+ .classyButton:active {
+ background-color: #003b58d6;
+ border: #003A58;
+ }
+</style>
\ No newline at end of file
diff --git a/src/components/UserProfile/MyProfile.vue b/src/components/UserProfile/MyProfile.vue
index 0df2eaf..b75cfad 100644
--- a/src/components/UserProfile/MyProfile.vue
+++ b/src/components/UserProfile/MyProfile.vue
@@ -158,7 +158,7 @@ const toUpdateUserSettings = () => {
<div class="p-3 text-black" style="background-color: #f8f9fa;">
<div class="d-flex justify-content-end text-center py-1">
<div style="width: 100%; display: flex; justify-content: start">
- <button data-cy="toUpdate" type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary"
+ <button data-cy="toUpdate" type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary classyButton"
data-mdb-ripple-color="dark" style="z-index: 1; height: 40px; margin-left: 17px" id="toUpdate" @click="toUpdateUserSettings">
Rediger profil
</button>
@@ -324,60 +324,18 @@ const toUpdateUserSettings = () => {
background-image: url('/src/assets/banners/stacked.svg');
}
-.card-1 {
- background-color: #4158D0;
- background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
-}
-
-.card-2 {
- background-color: #0093E9;
- background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
-}
-
-.card-3 {
- background-color: #00DBDE;
- background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
-}
-
-.card-4 {
- background-color: #FBAB7E;
- background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
-}
-
-.card-5 {
- background-color: #85FFBD;
- background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
-}
-
-.card-6 {
- background-color: #FA8BFF;
- background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
-}
-
-.card-7 {
- background-color: #FA8BFF;
- background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
-}
-
-.card-8 {
- background-color: #FBDA61;
- background-image: linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%);
-}
-
-.card-9 {
- background-color: #4158D0;
- background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
-}
-
-.card-10 {
- background-color: #FF3CAC;
- background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
-
-}
-
-
/*-------*/
.rounded-top {
background-color: #00DBDE;
}
+
+ .classyButton:hover {
+ background-color: #003b58ec;
+ border: #003A58;
+ }
+
+ .classyButton:active {
+ background-color: #003b58d6;
+ border: #003A58;
+ }
</style>
\ No newline at end of file
diff --git a/src/views/User/UserSettingsView.vue b/src/views/User/UserSettingsView.vue
index 485d8dd..bd11bcc 100644
--- a/src/views/User/UserSettingsView.vue
+++ b/src/views/User/UserSettingsView.vue
@@ -188,6 +188,11 @@ function toBilling() {
color: #4a5568;
}
+.nav-link.active {
+ color: white;
+ background-color: #003A58;
+}
+
.card {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
}
--
GitLab