fix(web): azure & gray theme header font colors

web/components/UserProfile.ce.vue

@@ -40,7 +40,7 @@ const {
   state,
   connectPluginInstalled,
 } = storeToRefs(serverStore);
-const { bannerGradient, theme } = storeToRefs(useThemeStore());
+const { bannerGradient, theme, altTheme } = storeToRefs(useThemeStore());
 
 const hideDropdown = computed(() => state.value === 'PRO' && !connectPluginInstalled.value);
 
@@ -116,7 +116,14 @@ onBeforeMount(() => {
 </script>
 
 <template>
-  <div id="UserProfile" class="text-alpha relative z-20 flex flex-col h-full gap-y-4px pt-4px pr-16px pl-40px">
+  <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"
+  >
     <div v-if="bannerGradient" class="absolute z-0 w-[125%] top-0 bottom-0 right-0" :style="bannerGradient" />
 
     <div class="text-gamma text-10px xs:text-12px text-right font-semibold leading-normal relative z-10 flex flex-col items-end justify-end gap-x-4px xs:flex-row xs:items-baseline xs:gap-x-12px">
@@ -126,7 +133,7 @@ onBeforeMount(() => {
     </div>
 
     <div class="relative z-10 flex flex-row items-center justify-end gap-x-16px h-full">
-      <h1 class="text-alpha text-14px sm:text-18px relative flex flex-col-reverse items-end md:flex-row border-0">
+      <h1 class="text-14px sm:text-18px relative flex flex-col-reverse items-end md:flex-row border-0">
         <template v-if="description && theme?.descriptionShow">
           <span class="text-right text-12px sm:text-18px hidden 2xs:block">{{ description }}</span>
           <span class="text-gamma hidden md:inline-block px-8px">&bull;</span>

web/components/UserProfile/DropdownTrigger.vue

@@ -39,7 +39,7 @@ const title = computed((): string => {
 
 <template>
   <button
-    class="group text-18px border-0 relative flex flex-row justify-end items-center h-full gap-x-8px opacity-100 hover:opacity-75 focus:opacity-75 hover:text-alpha focus:text-alpha transition-opacity"
+    class="group text-18px border-0 relative flex flex-row justify-end items-center h-full gap-x-8px opacity-100 hover:opacity-75 focus:opacity-75 transition-opacity"
     :title="title"
     @click="dropdownStore.dropdownToggle()"
   >

web/store/theme.ts

@@ -21,7 +21,9 @@ export const useThemeStore = defineStore('theme', () => {
   // State
   const theme = ref<Theme | undefined>();
   // Getters
-  const darkMode = computed(() => (theme.value?.name === 'black' || theme.value?.name === 'azure') ?? false);
+  const darkMode = computed(() => (theme.value?.name === 'black' || theme.value?.name === 'gray') ?? 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)';
@@ -73,6 +75,7 @@ export const useThemeStore = defineStore('theme', () => {
     // state
     bannerGradient,
     darkMode,
+    altTheme,
     theme,
     // actions
     setTheme,