mirror/api
1
0
Fork 0
mirror of https://github.com/unraid/api.git synced 2025-12-31 13:39:52 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## 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.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Eli Bosley
2025-06-25 15:26:08 -04:00
committed by GitHub
parent 17b7428779
commit b7c2407840
3 changed files with 5 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/__test__/store/theme.test.ts
View File

@@ -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%);"`);
});
});

2
web/components/UserProfile.ce.vue
View File

@@ -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"
/>

4
web/store/theme.ts
View File

@@ -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