Refine admin UI

src/admin/AdminAppInfoIcon.tsx

@@ -27,7 +27,9 @@ export default function AdminAppInfoIcon({
           size={size === 'large' ? 8 : 7}
           className={clsx(
             'absolute',
-            'top-[1.5px] right-[0.5px]',
+            size === 'large'
+              ? 'top-[1.5px] right-[0.5px]'
+              : 'top-[1px] right-[-0.5px]',
             insightIndicatorStatus === 'blue'
               ? 'text-blue-500'
               : 'text-amber-500',

src/admin/AdminInfoPage.tsx

@@ -39,7 +39,7 @@ export default function AdminInfoPage({
                   href={path}
                   className={clsx(
                     page === titleShort
-                      ? 'underline underline-offset-10 decoration-[1.5px]'
+                      ? 'underline underline-offset-10 decoration-2'
                       : 'text-dim',
                     'px-1 py-0.5 rounded-md',
                   )}

src/admin/AdminOutdatedClient.tsx

@@ -11,6 +11,7 @@ import { useState } from 'react';
 import { syncPhotosAction } from '@/photo/actions';
 import { useRouter } from 'next/navigation';
 import ResponsiveText from '@/components/primitives/ResponsiveText';
+import { LiaBroomSolid } from 'react-icons/lia';
 
 const UPDATE_BATCH_SIZE_MAX = 4;
 
@@ -77,16 +78,19 @@ export default function AdminOutdatedClient({
       </LoaderButton>}
     >
       <div className="space-y-6">
-        <Note>
+        <Note
+          color="yellow"
+          icon={<LiaBroomSolid size={18}/>}
+        >
           <div className="space-y-1.5">
             <div className="font-bold">
               {photos.length} outdated
               {' '}
               {photos.length === 1 ? 'photo' : 'photos'} found
             </div>
-            They may have missing EXIF fields, inaccurate blur data,
+            Sync photos to import newer EXIF fields, improve blur data,
             {' '}
-            undesired privacy settings, or text that can be AI-generated
+            and leverage AI-generated text where possible
           </div>
         </Note>
         <div className="space-y-4">

src/components/Container.tsx

@@ -26,22 +26,22 @@ export default function Container({
     case 'gray': return [
       'text-medium',
       'bg-gray-50 dark:bg-gray-900/40',
-      'border-gray-200 dark:border-gray-800',
+      'border-medium',
     ];
     case 'blue': return [
       'text-blue-900 dark:text-blue-300',
-      'bg-blue-50/50 dark:bg-blue-950/30',
-      'border-blue-200 dark:border-blue-500/40',
+      'bg-blue-100/35 dark:bg-blue-950/60',
+      'border-transparent',
     ];
     case 'red': return [
-      'text-red-600 dark:text-red-500/90',
-      'bg-red-50/50 dark:bg-red-950/50',
-      'border-red-100 dark:border-red-950',
+      'text-red-700 dark:text-red-400',
+      'bg-red-100/50 dark:bg-red-950/55',
+      'border-transparent',
     ];
     case 'yellow': return [
-      'text-amber-700 dark:text-amber-500/90',
-      'bg-amber-50/50 dark:bg-amber-950/30',
-      'border-amber-600/30 dark:border-amber-800/30',
+      'text-amber-700 dark:text-amber-500',
+      'bg-amber-100/55 dark:bg-amber-950/55',
+      'border-transparent',
     ];
     }
   };

src/components/more/MoreMenuItem.tsx

@@ -48,10 +48,10 @@ export default function MoreMenuItem({
       disabled={isLoading}
       className={clsx(
         'flex items-center h-8',
-        'px-2 py-1.5 rounded-[3px]',
+        'pl-2 pr-4 py-1.5 rounded-[3px]',
         'select-none hover:outline-hidden',
-        'hover:bg-gray-50 active:bg-gray-100',
-        'dark:hover:bg-gray-900/75 dark:active:bg-gray-900',
+        'hover:bg-gray-100/90 active:bg-gray-200/75',
+        'dark:hover:bg-gray-800/60 dark:active:bg-gray-900/80',
         'whitespace-nowrap',
         isLoading
           ? 'cursor-not-allowed opacity-50'