feat: style improvements

Author: elibosley

api/src/core/sso/sso-remove.ts

@@ -1,6 +1,6 @@
 import { existsSync, renameSync, unlinkSync } from 'node:fs';
 
-import { cliLogger } from '@app/core/log';
+import { logger } from '@app/core/log';
 
 export const removeSso = () => {
     const path = '/usr/local/emhttp/plugins/dynamix/include/.login.php';
@@ -13,8 +13,8 @@ export const removeSso = () => {
             unlinkSync(path);
         }
         renameSync(backupPath, path);
-        cliLogger.debug('SSO login file restored.');
+        logger.debug('SSO login file restored.');
     } else {
-        cliLogger.debug('No SSO login file backup found.');
+        logger.debug('No SSO login file backup found.');
     }
 };

api/src/index.ts

@@ -108,7 +108,6 @@ try {
             logger.info('SSO setup complete');
         } else {
             await removeSso();
-            logger.info('SSO removed');
         }
     } catch (err) {
         logger.error('Failed to setup SSO with error: %o', err);

api/src/unraid-api/cli/sso/add-sso-user.command.ts

@@ -40,7 +40,8 @@ export class AddSSOUserCommand extends CommandRunner {
                 writeConfigSync('flash');
                 this.logger.info(`User added ${options.username}`);
                 if (shouldRestart) {
-                    this.logger.info('Restarting the Unraid API to enable to SSO button');
+                    this.logger.info('Restarting the Unraid API in 5 seconds to enable the SSO button');
+                    await new Promise(resolve => setTimeout(resolve, 5000));
                     await this.restartCommand.run([]);
                 }
             }

api/src/unraid-api/cli/start.command.ts

@@ -17,6 +17,17 @@ export class StartCommand extends CommandRunner {
 
     async run(_: string[], options: StartCommandOptions): Promise<void> {
         this.logger.info('Starting the Unraid API');
+
+        // Update PM2 first if necessary
+        const { stderr: updateErr, stdout: updateOut } = await execa(`${PM2_PATH} update`);
+        if (updateOut) {
+            this.logger.log(updateOut);
+        }
+        if (updateErr) {
+            this.logger.error('PM2 Update Error: ' + updateErr);
+            process.exit(1);
+        }
+
         const envLog = options['log-level'] ? `LOG_LEVEL=${options['log-level']}` : '';
         const { stderr, stdout } = await execa(`${envLog} ${PM2_PATH}`.trim(), [
             'start',

unraid-ui/src/components/common/sheet/sheet.variants.ts

@@ -1,7 +1,7 @@
 import { cva } from "class-variance-authority";
 
 export const sheetVariants = cva(
-  "fixed z-50 bg-background gap-4 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  "fixed z-50 bg-background gap-4 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 border-border",
   {
     variants: {
       side: {

unraid-ui/src/theme/preset.ts

@@ -14,6 +14,9 @@ export const unraidPreset = {
       },
     },
     extend: {
+      borderColor: {
+        DEFAULT: "hsl(var(--border))",
+      },
       fontFamily: {
         sans: "clear-sans,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji",
       },

web/assets/main.css

@@ -39,9 +39,6 @@ body {
 @tailwind utilities;
 
 @layer base {
-  * {
-    @apply border-border;
-  }
   body {
     @apply bg-background text-foreground;
   }

web/components/Notifications/List.vue

@@ -70,7 +70,7 @@ async function onLoadMore() {
   <div
     v-if="notifications?.length > 0"
     v-infinite-scroll="[onLoadMore, { canLoadMore: () => canLoadMore }]"
-    class="divide-y divide-gray-200 px-7 flex flex-col overflow-y-scroll flex-1 min-h-0"
+    class="divide-y px-7 flex flex-col overflow-y-scroll flex-1 min-h-0"
   >
     <NotificationsItem
       v-for="notification in notifications"

web/components/shadcn/sheet/index.ts

@@ -10,7 +10,7 @@ export { default as SheetDescription } from './SheetDescription.vue'
 export { default as SheetFooter } from './SheetFooter.vue'
 
 export const sheetVariants = cva(
-  'fixed z-50 bg-muted dark:bg-background gap-4 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  'fixed z-50 bg-muted dark:bg-background gap-4 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 border-border',
   {
     variants: {
       side: {

web/store/theme.ts

@@ -32,7 +32,7 @@ export const defaultColors: Record<string, ThemeVariables> = {
     '--popover-foreground': '0 0% 98%',
     '--card': '0 0% 14.9%',
     '--card-foreground': '0 0% 98%',
-    '--border': '0 0% 14.9%',
+    '--border': '0 0% 20%',
     '--input': '0 0% 14.9%',
     '--primary': '24 100% 50%',
     '--primary-foreground': '0 0% 98%',
@@ -74,19 +74,20 @@ export const defaultColors: Record<string, ThemeVariables> = {
   },
 } as const;
 
-export const DARK_THEMES = ['black', 'azure'] as const;
-
+// used to swap the UPC text color when using the azure or gray theme
+export const DARK_THEMES = ['black', 'gray'] as const;
 
 export const useThemeStore = defineStore('theme', () => {
   // State
   const theme = ref<Theme | undefined>();
 
   const activeColorVariables = ref<ThemeVariables>(defaultColors.light);
   // Getters
+
   const darkMode = computed<boolean>(
     () => DARK_THEMES.includes(theme.value?.name as (typeof DARK_THEMES)[number]) ?? false
   );
-  // used to swap the UPC text color when using the azure or gray theme
+
   const bannerGradient = computed(() => {
     if (!theme.value?.banner || !theme.value?.bannerGradient) {
       return undefined;