From e73b6e2045aaea2ef5c5474e2d57e5fdaf180095 Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Wed, 25 Jun 2025 15:11:55 -0400
Subject: [PATCH 1/2] feat: fix shading in UPC to be less severe

---
 web/components/UserProfile.ce.vue | 2 +-
 web/store/theme.ts                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/components/UserProfile.ce.vue b/web/components/UserProfile.ce.vue
index c54088e801..f8bc7f3bda 100644
--- a/web/components/UserProfile.ce.vue
+++ b/web/components/UserProfile.ce.vue
@@ -96,7 +96,7 @@ onMounted(() => {
   >
     <div
       v-if="bannerGradient"
-      class="absolute z-0 w-[125%] top-0 bottom-0 right-0"
+      class="absolute z-0 w-full top-0 bottom-0 right-0"
       :style="bannerGradient"
     />
 
diff --git a/web/store/theme.ts b/web/store/theme.ts
index 11110e48d0..5c643c5022 100644
--- a/web/store/theme.ts
+++ b/web/store/theme.ts
@@ -59,7 +59,7 @@ export const useThemeStore = defineStore('theme', () => {
     }
     const start = theme.value?.bgColor ? 'var(--header-gradient-start)' : 'rgba(0, 0, 0, 0)';
     const end = theme.value?.bgColor ? 'var(--header-gradient-end)' : 'var(--header-background-color)';
-    return `background-image: linear-gradient(90deg, ${start} 0, ${end} 30%);`;
+    return `background-image: linear-gradient(90deg, ${start} 0, ${end} 90%);`;
   });
   // Actions
   const setTheme = async (data?: Theme) => {

From c404dc0172f1fe11caf04f55953d81d6f52da6bc Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Wed, 25 Jun 2025 15:20:06 -0400
Subject: [PATCH 2/2] chore: fix unit tests

---
 web/__test__/store/theme.test.ts | 8 ++------
 web/store/theme.ts               | 2 +-
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/web/__test__/store/theme.test.ts b/web/__test__/store/theme.test.ts
index 0b128278fd..e272595da3 100644
--- a/web/__test__/store/theme.test.ts
+++ b/web/__test__/store/theme.test.ts
@@ -80,9 +80,7 @@ describe('Theme Store', () => {
         banner: true,
         bannerGradient: true,
       });
-      expect(store.bannerGradient).toBe(
-        'background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, var(--header-background-color) 30%);'
-      );
+      expect(store.bannerGradient).toMatchInlineSnapshot(`"background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, var(--header-background-color) 90%);"`);
 
       store.setTheme({
         ...store.theme,
@@ -90,9 +88,7 @@ describe('Theme Store', () => {
         bannerGradient: true,
         bgColor: '#123456',
       });
-      expect(store.bannerGradient).toBe(
-        'background-image: linear-gradient(90deg, var(--header-gradient-start) 0, var(--header-gradient-end) 30%);'
-      );
+      expect(store.bannerGradient).toMatchInlineSnapshot(`"background-image: linear-gradient(90deg, var(--header-gradient-start) 0, var(--header-gradient-end) 90%);"`);
     });
   });
 
diff --git a/web/store/theme.ts b/web/store/theme.ts
index 5c643c5022..333c27894c 100644
--- a/web/store/theme.ts
+++ b/web/store/theme.ts
@@ -110,7 +110,7 @@ export const useThemeStore = defineStore('theme', () => {
         : customTheme['--header-gradient-end'];
 
       // set the banner gradient
-      customTheme['--banner-gradient'] = `linear-gradient(90deg, ${start} 0, ${end} 30%)`;
+      customTheme['--banner-gradient'] = `linear-gradient(90deg, ${start} 0, ${end} 90%)`;
     }
 
     // overwrite with hex colors set in webGUI @ /Settings/DisplaySettings