feat: fix shading in UPC to be less severe (#1438)

elibosley · web-flow · commit b7c240784052 · 2025-06-25T15:26:08.000-04:00
&lt;!-- This is an auto-generated comment: release notes by coderabbit.ai
--&gt;
## Summary by CodeRabbit

- **Style**
- Updated the banner gradient to match the full width of its container.
- Extended the gradient effect for a smoother visual transition across
the banner.
&lt;!-- end of auto-generated comment: release notes by coderabbit.ai --&gt;
diff --git a/web/__test__/store/theme.test.ts b/web/__test__/store/theme.test.ts
@@ -80,19 +80,15 @@ 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,
         banner: true,
         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/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
@@ -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) => {
@@ -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

Original file line number	Diff line number	Diff line change
`@@ -96,7 +96,7 @@ onMounted(() => {`
`96`	`96`	`>`
`97`	`97`	`<div`
`98`	`98`	`v-if="bannerGradient"`
`99`		`- class="absolute z-0 w-[125%] top-0 bottom-0 right-0"`
	`99`	`+ class="absolute z-0 w-full top-0 bottom-0 right-0"`
`100`	`100`	`:style="bannerGradient"`
`101`	`101`	`/>`
`102`	`102`