Feat: Refine design language and use theme tokens across most pages.

src/components/sidebar/view/subcomponents/SidebarFooter.tsx

@@ -1,7 +1,6 @@
-import { Settings } from 'lucide-react';
+import { Settings, ArrowUpCircle } from 'lucide-react';
 import type { TFunction } from 'i18next';
 import type { ReleaseInfo } from '../../../../types/sharedTypes';
-import { Button } from '../../../ui/button';
 
 type SidebarFooterProps = {
   updateAvailable: boolean;
@@ -21,74 +20,81 @@ export default function SidebarFooter({
   t,
 }: SidebarFooterProps) {
   return (
-    <>
+    <div className="flex-shrink-0">
+      {/* Update banner */}
       {updateAvailable && (
-        <div className="md:p-2 border-t border-border/50 flex-shrink-0">
-          <div className="hidden md:block">
-            <Button
-              variant="ghost"
-              className="w-full justify-start gap-3 p-3 h-auto font-normal text-left hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors duration-200 border border-blue-200 dark:border-blue-700 rounded-lg mb-2"
+        <>
+          <div className="nav-divider" />
+          {/* Desktop update */}
+          <div className="hidden md:block px-2 py-1.5">
+            <button
+              className="w-full flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-left hover:bg-blue-50/80 dark:hover:bg-blue-900/15 transition-colors group"
               onClick={onShowVersionModal}
             >
-              <div className="relative">
-                <svg className="w-4 h-4 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
-                </svg>
-                <div className="absolute -top-1 -right-1 w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
+              <div className="relative flex-shrink-0">
+                <ArrowUpCircle className="w-4 h-4 text-blue-500 dark:text-blue-400" />
+                <span className="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 bg-blue-500 rounded-full animate-pulse" />
               </div>
               <div className="min-w-0 flex-1">
-                <div className="text-sm font-medium text-blue-700 dark:text-blue-300">
-                  {releaseInfo?.title || `Version ${latestVersion}`}
-                </div>
-                <div className="text-xs text-blue-600 dark:text-blue-400">{t('version.updateAvailable')}</div>
-              </div>
-            </Button>
-          </div>
-
-          <div className="md:hidden p-3 pb-2">
-            <button
-              className="w-full h-12 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded-xl flex items-center justify-start gap-3 px-4 active:scale-[0.98] transition-all duration-150"
-              onClick={onShowVersionModal}
-            >
-              <div className="relative">
-                <svg className="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
-                </svg>
-                <div className="absolute -top-1 -right-1 w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
-              </div>
-              <div className="min-w-0 flex-1 text-left">
-                <div className="text-sm font-medium text-blue-700 dark:text-blue-300">
-                  {releaseInfo?.title || `Version ${latestVersion}`}
-                </div>
-                <div className="text-xs text-blue-600 dark:text-blue-400">{t('version.updateAvailable')}</div>
+                <span className="text-xs font-medium text-blue-600 dark:text-blue-300 truncate block">
+                  {releaseInfo?.title || `v${latestVersion}`}
+                </span>
+                <span className="text-[10px] text-blue-500/70 dark:text-blue-400/60">
+                  {t('version.updateAvailable')}
+                </span>
               </div>
             </button>
           </div>
-        </div>
+
+          {/* Mobile update */}
+          <div className="md:hidden px-3 py-2">
+            <button
+              className="w-full h-11 bg-blue-50/80 dark:bg-blue-900/15 border border-blue-200/60 dark:border-blue-700/40 rounded-xl flex items-center gap-3 px-3.5 active:scale-[0.98] transition-all"
+              onClick={onShowVersionModal}
+            >
+              <div className="relative flex-shrink-0">
+                <ArrowUpCircle className="w-4.5 h-4.5 text-blue-500 dark:text-blue-400" />
+                <span className="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 bg-blue-500 rounded-full animate-pulse" />
+              </div>
+              <div className="min-w-0 flex-1 text-left">
+                <span className="text-sm font-medium text-blue-600 dark:text-blue-300 truncate block">
+                  {releaseInfo?.title || `v${latestVersion}`}
+                </span>
+                <span className="text-xs text-blue-500/70 dark:text-blue-400/60">
+                  {t('version.updateAvailable')}
+                </span>
+              </div>
+            </button>
+          </div>
+        </>
       )}
 
-      <div className="md:p-2 md:border-t md:border-border flex-shrink-0">
-        <div className="md:hidden p-4 pb-20 border-t border-border/50">
-          <button
-            className="w-full h-14 bg-muted/50 hover:bg-muted/70 rounded-2xl flex items-center justify-start gap-4 px-4 active:scale-[0.98] transition-all duration-150"
-            onClick={onShowSettings}
-          >
-            <div className="w-10 h-10 rounded-2xl bg-background/80 flex items-center justify-center">
-              <Settings className="w-5 h-5 text-muted-foreground" />
-            </div>
-            <span className="text-lg font-medium text-foreground">{t('actions.settings')}</span>
-          </button>
-        </div>
+      {/* Settings */}
+      <div className="nav-divider" />
 
-        <Button
-          variant="ghost"
-          className="hidden md:flex w-full justify-start gap-2 p-2 h-auto font-normal text-muted-foreground hover:text-foreground hover:bg-accent transition-colors duration-200"
+      {/* Desktop settings */}
+      <div className="hidden md:block px-2 py-1.5">
+        <button
+          className="w-full flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent/60 transition-colors"
           onClick={onShowSettings}
         >
-          <Settings className="w-3 h-3" />
+          <Settings className="w-3.5 h-3.5" />
           <span className="text-xs">{t('actions.settings')}</span>
-        </Button>
+        </button>
       </div>
-    </>
+
+      {/* Mobile settings */}
+      <div className="md:hidden p-3 pb-20">
+        <button
+          className="w-full h-12 bg-muted/40 hover:bg-muted/60 rounded-xl flex items-center gap-3.5 px-4 active:scale-[0.98] transition-all"
+          onClick={onShowSettings}
+        >
+          <div className="w-8 h-8 rounded-xl bg-background/80 flex items-center justify-center">
+            <Settings className="w-4.5 h-4.5 text-muted-foreground" />
+          </div>
+          <span className="text-base font-medium text-foreground">{t('actions.settings')}</span>
+        </button>
+      </div>
+    </div>
   );
 }