mirror/api
1
0
Fork 0
mirror of https://github.com/unraid/api.git synced 2026-01-07 09:10:05 -06:00
Code Issues Packages Projects Releases Wiki Activity

fix: azure and gray theme custom colors

Browse Source
This commit is contained in:
Zack Spear
2024-01-03 15:48:07 -06:00
committed by Zack Spear
parent f91ae5c7a0
commit 6d29ec2b90
3 changed files with 4 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -36,7 +36,7 @@ const {
state,
connectPluginInstalled,
} = storeToRefs(serverStore);
const { bannerGradient, theme, altTheme } = storeToRefs(useThemeStore());
const { bannerGradient, theme } = storeToRefs(useThemeStore());
const hideDropdown = computed(() => state.value === 'PRO' && !connectPluginInstalled.value);
@@ -105,11 +105,7 @@ onBeforeMount(() => {
<template>
<div
id="UserProfile"
:class="{
'text-alpha': !altTheme,
'text-beta': altTheme,
}"
class="relative z-20 flex flex-col h-full gap-y-4px pt-4px pr-16px pl-40px"
class="text-alpha relative z-20 flex flex-col h-full gap-y-4px pt-4px pr-16px pl-40px"
>
<div v-if="bannerGradient" class="absolute z-0 w-[125%] top-0 bottom-0 right-0" :style="bannerGradient" />

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

@@ -53,7 +53,7 @@ const title = computed((): string => {
<span class="absolute bottom-[-3px] inset-x-0 h-2px w-full bg-gradient-to-r from-unraid-red to-orange rounded opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity" />
</span>
<BellAlertIcon v-if="osUpdateAvailable && !rebootType" class="hover:animate-pulse text-alpha fill-current relative w-16px h-16px" />
<BellAlertIcon v-if="osUpdateAvailable && !rebootType" class="hover:animate-pulse fill-current relative w-16px h-16px" />
<Bars3Icon v-if="!dropdownVisible" class="w-20px" />
<Bars3BottomRightIcon v-else class="w-20px" />

4
web/store/theme.ts
View File

@@ -21,9 +21,8 @@ export const useThemeStore = defineStore('theme', () => {
// State
const theme = ref<Theme | undefined>();
// Getters
const darkMode = computed(() => (theme.value?.name === 'black' || theme.value?.name === 'gray') ?? false);
const darkMode = computed(() => (theme.value?.name === 'black' || theme.value?.name === 'azure') ?? false);
// used to swap the UPC text color when using the azure or gray theme
const altTheme = computed(() => (theme.value?.name === 'azure' || theme.value?.name === 'gray') ?? false);
const bannerGradient = computed(() => {
if (!theme.value?.banner || !theme.value?.bannerGradient) { return undefined; }
const start = theme.value?.bgColor ? 'var(--color-customgradient-start)' : 'rgba(0, 0, 0, 0)';
@@ -75,7 +74,6 @@ export const useThemeStore = defineStore('theme', () => {
// state
bannerGradient,
darkMode,
altTheme,
theme,
// actions
setTheme,