Attempt to fix note resizing with React keys and Muuri sync

keep-notes/app/(main)/settings/appearance/appearance-form.tsx

@@ -30,13 +30,15 @@ export function AppearanceSettingsForm({ initialTheme, initialFontSize }: Appear
             if (window.matchMedia('(prefers-color-scheme: dark)').matches) root.classList.add('dark')
         } else if (value === 'dark') {
             root.classList.add('dark')
+        } else if (value === 'light') {
+            root.setAttribute('data-theme', 'light')
         } else {
             root.setAttribute('data-theme', value)
-            if (['midnight'].includes(value)) root.classList.add('dark')
+            if (['midnight', 'blue', 'sepia'].includes(value)) root.classList.add('dark')
         }
 
         // Save to DB (no need for router.refresh - localStorage handles immediate visuals)
-        await updateUser({ theme: value as 'light' | 'dark' | 'auto' | 'sepia' | 'midnight' })
+        await updateUser({ theme: value as 'light' | 'dark' | 'auto' | 'sepia' | 'midnight' | 'blue' })
     }
 
     const handleFontSizeChange = async (value: string) => {
@@ -71,10 +73,11 @@ export function AppearanceSettingsForm({ initialTheme, initialFontSize }: Appear
                     description="Select app's visual theme"
                     value={theme}
                     options={[
-                        { value: 'light', label: 'Light' },
+                        { value: 'slate', label: 'Light' },
                         { value: 'dark', label: 'Dark' },
                         { value: 'sepia', label: 'Sepia' },
                         { value: 'midnight', label: 'Midnight' },
+                        { value: 'blue', label: 'Blue' },
                         { value: 'auto', label: 'Auto (system)' },
                     ]}
                     onChange={handleThemeChange}

keep-notes/app/(main)/settings/page.tsx

@@ -100,7 +100,7 @@ export default function SettingsPage() {
         </Link>
         <Link href="/settings/profile">
           <div className="p-4 border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors cursor-pointer">
-            <RefreshCw className="h-6 w-6 text-blue-500 mb-2" />
+            <RefreshCw className="h-6 w-6 text-primary mb-2" />
             <h3 className="font-semibold">Profile Settings</h3>
             <p className="text-sm text-gray-600 dark:text-gray-400">
               Manage your account and preferences