refactor: theme usage and dropdown logo color

components/UserProfile/DropdownContent.vue

@@ -73,7 +73,7 @@ const links = computed(():UserProfileLink[] => {
   <div class="flex flex-col gap-y-8px min-w-300px max-w-350px">
     <header class="flex flex-row items-center justify-between mt-8px mx-8px">
       <h2 class="text-18px leading-none flex flex-row gap-x-8px items-center justify-between">
-        <BrandLogoConnect class="w-[120px]" />
+        <BrandLogoConnect gradient-start="currentcolor" gradient-stop="currentcolor" class="text-beta w-[120px]" />
         <UpcBeta />
       </h2>
       <span v-if="myServersEnv || devEnv" class="flex gap-x-4px cursor-default">
@@ -94,7 +94,6 @@ const links = computed(():UserProfileLink[] => {
         <UpcKeyline />
       </li>
 
-      
       <UpcDropdownConnectStatus v-if="!stateData.error && registered && pluginInstalled" />
 
       <template v-if="links">

store/server.ts

@@ -4,7 +4,7 @@ import { ArrowRightOnRectangleIcon, GlobeAltIcon, KeyIcon } from '@heroicons/vue
 import { useAccountStore } from './account';
 import { usePurchaseStore } from "./purchase";
 import { useTrialStore } from './trial';
-import { useThemeStore } from './theme';
+import { useThemeStore, type Theme } from './theme';
 import type {
   Server,
   ServerAccountCallbackSendPayload,
@@ -14,7 +14,6 @@ import type {
   ServerStateData,
   ServerStateDataAction,
 } from '~/types/server';
-import type { Theme } from '~/types/theme';
 /**
  * @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
  * @see https://github.com/vuejs/pinia/discussions/1085

store/theme.ts

@@ -1,12 +1,22 @@
 import { defineStore, createPinia, setActivePinia } from 'pinia';
 import hexToRgba from 'hex-to-rgba';
-import type { Theme } from "~/types/theme";
+
 /**
  * @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
  * @see https://github.com/vuejs/pinia/discussions/1085
  */
 setActivePinia(createPinia());
 
+export interface Theme {
+  banner: string;
+  bannerGradient: string;
+  bgColor: string;
+  descriptionShow: boolean;
+  metaColor: string;
+  name: string;
+  textColor: string;
+} 
+
 export const useThemeStore = defineStore('theme', () => {
   // State
   const theme = ref<Theme|undefined>();

types/server.ts

@@ -1,5 +1,5 @@
 import { KeyIcon } from '@heroicons/vue/24/solid';
-import { Theme } from '~/types/theme';
+import { Theme } from '~/store/theme';
 import { UserProfileLink } from '~/types/userProfile';
 
 export enum ServerState {

types/theme.ts

@@ -1,9 +0,0 @@
-export interface Theme {
-  banner: string;
-  bannerGradient: string;
-  bgColor: string;
-  descriptionShow: boolean;
-  metaColor: string;
-  name: string;
-  textColor: string;
-}