refactor: style tweaks

2026-01-02 22:50:02 -06:00 · 2023-06-22 14:11:44 -05:00
parent 2f905caccc
commit 4fffcb167e
9 changed files with 64 additions and 56 deletions
--- a/_data/serverState.ts
+++ b/_data/serverState.ts
@@ -29,7 +29,7 @@ const blacklistedGuid = '154B-00EE-0700-9B50CF819816';
 // EBLACKLISTED1
 // EBLACKLISTED2
 // ENOCONN
-const state: string = 'ENOKEYFILE2';
+const state: string = 'PLUS';

 const uptime = Date.now() - 60 * 60 * 1000; // 1 hour ago
 let expireTime = 0;
@@ -51,7 +51,7 @@ const serverState = {
  "locale": "en_US",
  "name": "fuji",
  // "pluginInstalled": "dynamix.unraid.net.staging.plg",
-  "pluginInstalled": false,
+  "pluginInstalled": true,
  "registered": true,
  "regGen": 0,
  "regGuid": "0781-5583-8355-81071A2B0211",
@@ -64,7 +64,6 @@ const serverState = {
    "descriptionShow": true,
    "metaColor": "",
    "name": "black",
-    // "name": "white",
    "textColor": ""
  },
  uptime,
--- a/components/Modal.vue
+++ b/components/Modal.vue
@@ -69,11 +69,11 @@ const ariaLablledById = computed((): string|undefined => props.title ? `ModalTit
          <div
            :class="[
              maxWidth,
-              error ? 'shadow-unraid-red/30' : '',
-              success ? 'shadow-green-400/30' : '',
-              !error && !success ? 'shadow-orange/10' : '',
+              error ? 'shadow-unraid-red/30 border-unraid-red/10' : '',
+              success ? 'shadow-green-600/30 border-green-600/10' : '',
+              !error && !success ? 'shadow-orange/10 border-white/10' : '',
            ]"
-            class="text-alpha bg-beta relative transform overflow-hidden rounded-lg px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:p-6"
+            class="text-alpha bg-beta border-2 border-solid relative transform overflow-hidden rounded-lg px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:p-6"
          >
            <div v-if="showCloseX" class="absolute z-20 right-0 top-0 hidden pt-2 pr-2 sm:block">
              <button @click="closeModal" type="button" class="rounded-md text-alpha bg-beta p-2 hover:text-white focus:text-white hover:bg-unraid-red focus:bg-unraid-red focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
--- a/components/UserProfile/CallbackFeedback.vue
+++ b/components/UserProfile/CallbackFeedback.vue
@@ -59,7 +59,7 @@ const { text, copy, copied, isSupported } = useClipboard({ source: keyUrl.value
        <p v-if="success === undefined || callbackLoading">Installing {{ keyType }} License Key…</p>
        <template v-else>
          <div v-if="success === true" class="flex items-center justify-center gap-x-8px">
-            <CheckCircleIcon class="fill-green-400 w-24px" />
+            <CheckCircleIcon class="fill-green-600 w-24px" />
            <p>Installed {{ keyType }} License Key</p>
          </div>
          <template v-else-if="success === false">
@@ -83,7 +83,7 @@ const { text, copy, copied, isSupported } = useClipboard({ source: keyUrl.value
        <p v-if="updateSuccess === undefined || callbackLoading">Updating Connect account config…</p>
        <template v-else>
          <div v-if="updateSuccess === true" class="flex items-center justify-center gap-x-8px">
-            <CheckCircleIcon class="fill-green-400 w-24px" />
+            <CheckCircleIcon class="fill-green-600 w-24px" />
            <p>Connect config updated</p>
          </div>
          <div v-else-if="updateSuccess === false" class="flex items-center justify-center gap-x-8px">
--- a/components/UserProfile/DropdownConnectStatus.vue
+++ b/components/UserProfile/DropdownConnectStatus.vue
@@ -17,7 +17,7 @@ const apiLoading = ref(false);
    </template>
    <span v-else class="w-full flex flex-row justify-start items-center gap-x-8px">
      <ExclamationTriangleIcon v-if="onlineStatus !== 'online'" class="text-unraid-red w-16px h-16px" />
-      <span v-else class="block w-12px h-12px bg-green-400 rounded-full"></span>
+      <span v-else class="block w-12px h-12px bg-green-600 rounded-full"></span>
      <span>{{ onlineStatus !== 'online' ? 'Disconnected' : 'Connected' }}</span>
    </span>
  </li>
--- a/components/UserProfile/DropdownWrapper.vue
+++ b/components/UserProfile/DropdownWrapper.vue
@@ -1,5 +1,9 @@
+<script lang="ts" setup>
+// shadow-[var(--ring-offset-shadow)_var(--ring-shadow)_var(--shadow-beta)]
+</script>
+
 <template>
-  <nav class="flex flex-col gap-y-8px p-8px bg-alpha rounded-lg shadow-[var(--ring-offset-shadow)_var(--ring-shadow)_var(--shadow-beta)]">
+  <nav class="flex flex-col gap-y-8px p-8px bg-alpha rounded-lg shadow-xl">
    <slot/>
  </nav>
 </template>
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
  <client-only>
-    <div class="flex flex-row items-center justify-center gap-6 p-6">
+    <div class="flex flex-row items-center justify-center gap-6 p-6 text-gray-200 bg-zinc-800">
      <NuxtLink to="/" class="underline hover:no-underline focus:no-underline">Test Vue Components</NuxtLink>
      <NuxtLink to="/webComponents" class="underline hover:no-underline focus:no-underline">Test Web Components</NuxtLink>
    </div>
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -8,29 +8,31 @@ onBeforeMount(() => {
 </script>

 <template>
-  <div class="max-w-5xl mx-auto bg-gray-200">
-    <client-only>
-      <div class="flex flex-col gap-6 p-6">
-        <h2>Vue Components</h2>
-        <h3>UserProfileCe</h3>
-        <UserProfileCe :server="serverState" />
-        <hr />
-        <h3>DownloadApiLogsCe</h3>
-        <DownloadApiLogsCe />
-        <hr />
-        <h3>AuthCe</h3>
-        <AuthCe />
-        <hr />
-        <h3>KeyActionsCe</h3>
-        <KeyActionsCe />
-        <hr />
-        <h3>WanIpCheckCe</h3>
-        <WanIpCheckCe php-wan-ip="47.184.85.45" />
-        <hr />
-        <h3>ModalsCe</h3>
-        <ModalsCe />
-      </div>
-    </client-only>
+  <div class="text-black bg-white dark:text-white dark:bg-black">
+    <div class="max-w-5xl mx-auto">
+      <client-only>
+        <div class="flex flex-col gap-6 p-6">
+          <h2>Vue Components</h2>
+          <h3>UserProfileCe</h3>
+          <UserProfileCe :server="serverState" />
+          <hr />
+          <h3>DownloadApiLogsCe</h3>
+          <DownloadApiLogsCe />
+          <hr />
+          <h3>AuthCe</h3>
+          <AuthCe />
+          <hr />
+          <h3>KeyActionsCe</h3>
+          <KeyActionsCe />
+          <hr />
+          <h3>WanIpCheckCe</h3>
+          <WanIpCheckCe php-wan-ip="47.184.85.45" />
+          <hr />
+          <h3>ModalsCe</h3>
+          <ModalsCe />
+        </div>
+      </client-only>
+    </div>
  </div>
 </template>

--- a/pages/webComponents.vue
+++ b/pages/webComponents.vue
@@ -9,26 +9,28 @@ onBeforeMount(() => {

 <template>
  <client-only>
-    <div class="max-w-5xl mx-auto bg-gray-200">
-      <div class="flex flex-col gap-6 p-6">
-        <h2>Web Components</h2>
-        <h3>UserProfileCe</h3>
-        <connect-user-profile :server="JSON.stringify(serverState)"></connect-user-profile>
-        <hr />
-        <h3>DownloadApiLogsCe</h3>
-        <connect-download-api-logs></connect-download-api-logs>
-        <hr />
-        <h3>AuthCe</h3>
-        <connect-auth></connect-auth>
-        <hr />
-        <h3>KeyActionsCe</h3>
-        <connect-key-actions></connect-key-actions>
-        <hr />
-        <h3>WanIpCheckCe</h3>
-        <connect-wan-ip-check php-wan-ip="47.184.85.45"></connect-wan-ip-check>
-        <hr />
-        <h3>ModalsCe</h3>
-        <connect-modals></connect-modals>
+    <div class="text-black bg-white dark:text-white dark:bg-black">
+      <div class="max-w-5xl mx-auto">
+        <div class="flex flex-col gap-6 p-6">
+          <h2>Web Components</h2>
+          <h3>UserProfileCe</h3>
+          <connect-user-profile :server="JSON.stringify(serverState)"></connect-user-profile>
+          <hr />
+          <h3>DownloadApiLogsCe</h3>
+          <connect-download-api-logs></connect-download-api-logs>
+          <hr />
+          <h3>AuthCe</h3>
+          <connect-auth></connect-auth>
+          <hr />
+          <h3>KeyActionsCe</h3>
+          <connect-key-actions></connect-key-actions>
+          <hr />
+          <h3>WanIpCheckCe</h3>
+          <connect-wan-ip-check php-wan-ip="47.184.85.45"></connect-wan-ip-check>
+          <hr />
+          <h3>ModalsCe</h3>
+          <connect-modals></connect-modals>
+        </div>
      </div>
    </div>
  </client-only>
--- a/store/theme.ts
+++ b/store/theme.ts
@@ -61,8 +61,9 @@ export const useThemeStore = defineStore('theme', () => {

  return {
    // state
-    theme,
    bannerGradient,
+    darkMode,
+    theme,
    // actions
    setTheme,
  };