diff --git a/src/components/Settings/SettingsAccount.vue b/src/components/Settings/SettingsAccount.vue
index 90ed8d699a10f4e1f4e0e1d99ff8eee09f2b4ecc..e34e19a34e831e861049734f4e4a85aedbf1cd73 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 dfcc04ff941a34ce32c3d2c0271b0c11580343e8..481c0227bb8ffcfab6376be406514028832cae02 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 ea526eb7a1546ebdc7bb4b3b5b4f3002550a0a37..0ee945c814441846e6b6063e59fba3377f948068 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 db446c7f0f94f648ddb9013e2bebc538f948a87d..98ec8d13419531eaa97eaaf217df51db16cec0fc 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 1074b1596a1ca8deb768af0312ce43c350d1466f..8885415a96d1e4992b3991f1ec5a4f46f4c9e011 100644
--- a/src/components/UserProfile/MyProfile.vue
+++ b/src/components/UserProfile/MyProfile.vue
@@ -62,6 +62,10 @@ async function setupForm() {
if (response.profileImage) {
imageUrl.value = apiUrl + "/api/images/" + response.profileImage;
}
+ if (response.bannerImage != 0 && response.bannerImage !== null) {
+ console.log(response.bannerImage)
+ bannerImageUrl.value = apiUrl + "/api/images/" + response.bannerImage;
+ }
getInventory();
getBadges();
} catch (err) {
@@ -103,14 +107,20 @@ const getBadges = async () => {
}
const selectItem = (item: any) => {
+ try {
backgroundName.value = item.itemName;
let imageId = item.imageId;
- //const bannerImagePayload: UserUpdateDTO = {
- // bannerImage: imageId as any,
- // };
- //UserService.update({ requestBody: bannerImagePayload })
- //bannerImageUrl.value = `http://localhost:8080/api/images/${imageId}`;
-
+ const bannerImagePayload: UserUpdateDTO = {
+ bannerImage: imageId as any,
+ };
+ UserService.update({ requestBody: bannerImagePayload })
+ if (imageId != 0) {
+ bannerImageUrl.value = `${apiUrl}/api/images/${imageId}`;
+ }
+ } catch (error) {
+ handleUnknownError(error)
+ console.error(error)
+ }
}
onMounted(() => {
@@ -138,29 +148,32 @@ const toUpdateUserSettings = () => {
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col 12">
<div class="card">
- <div class="rounded-top text-white d-flex flex-row bg-primary" :style="{ height: '200px', backgroundImage: `url(${bannerImageUrl})` }">
- <div class=" d-flex flex-column align-items-center justify-content-center">
+ <div class="rounded-top text-white d-flex flex-row bg-primary justify-content-between" :style="{ height: '200px', backgroundImage: `url(${bannerImageUrl})` }">
+ <div class=" text-white d-flex flex-row">
+ <div class=" d-flex flex-column align-items-center justify-content-center">
<img :src="imageUrl" alt="Generisk plassholderbilde" class="img-fluid img-thumbnail"
style="width: 150px; height:150px; margin-left: 25px; margin-right: 15px;">
</div>
<h1 data-cy="firstname" style="display: flex; align-items: end; margin-bottom: 20px;">{{ firstname }} {{ lastname }}</h1>
+ </div>
+ <div class="d-flex align-items-end text-white my-3">
+ <div class="d-flex align-items-center flex-column">
+ <p class="mb-1 h2 d-flex flex-column align-items-center" data-cy="points">{{ points }} <img src="@/assets/items/pigcoin.png" style="width: 60px; height: 60px"></p>
+ <p class="small text-white mb-0">Poeng</p>
+ </div>
+ <div class="d-flex align-items-center flex-column px-3">
+ <p class="mb-1 h2 d-flex flex-column align-items-center" data-cy="streak">{{ streak }} <img src="@/assets/icons/fire.png" style="width: 60px; height: 60px"></p>
+ <p class="small text-white mb-0">Streak</p>
+ </div>
+ </div>
</div>
<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>
-
- </div>
- <div>
- <p class="mb-1 h2" data-cy="points">{{ points }} <img src="@/assets/items/pigcoin.png" style="width: 4rem"></p>
- <p class="small text-muted mb-0">Poeng</p>
- </div>
- <div class="px-3">
- <p class="mb-1 h2" data-cy="streak">{{ streak }} <img src="@/assets/icons/fire.png" style="width: 4rem"></p>
- <p class="small text-muted mb-0">Streak</p>
</div>
</div>
</div>
@@ -314,60 +327,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 485d8dd73014ae413f73fdebc29dd676b6ce578e..bd11bcc03a46c6c0739d948eb178efa782ffe0eb 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);
}