From 26acb5f7c09320d9bcdf26a85e430f600d74c992 Mon Sep 17 00:00:00 2001
From: YoVinchen <gzh298255@gmail.com>
Date: Mon, 8 Dec 2025 17:12:15 +0800
Subject: [PATCH] style(app): update header and app switcher styling

App.tsx:
- Replace glass-header with explicit bg-background/80 backdrop-blur
- Update navigation button container to use bg-muted

AppSwitcher:
- Replace hardcoded gray colors with semantic muted/foreground tokens
- Ensure consistent dark mode support via CSS variables
- Add group class for better hover state transitions
---
 src/App.tsx                    |  4 ++--
 src/components/AppSwitcher.tsx | 24 ++++++++++++------------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index a7860d577..e79df20dd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -374,7 +374,7 @@ function App() {
       )}
 
       <header
-        className="glass-header fixed top-0 z-50 w-full py-3 transition-all duration-300"
+        className="fixed top-0 z-50 w-full py-3 bg-background/80 backdrop-blur-md transition-all duration-300"
         data-tauri-drag-region
         style={{ WebkitAppRegion: "drag" } as any}
       >
@@ -483,7 +483,7 @@ function App() {
               <>
                 <AppSwitcher activeApp={activeApp} onSwitch={setActiveApp} />
 
-                <div className="glass p-1 rounded-xl flex items-center gap-1">
+                <div className="bg-muted p-1 rounded-xl flex items-center gap-1">
                   <Button
                     variant="ghost"
                     size="sm"
diff --git a/src/components/AppSwitcher.tsx b/src/components/AppSwitcher.tsx
index c1143949c..76c4da5d3 100644
--- a/src/components/AppSwitcher.tsx
+++ b/src/components/AppSwitcher.tsx
@@ -24,14 +24,14 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
   };
 
   return (
-    <div className="inline-flex bg-gray-100 dark:bg-gray-800 rounded-lg p-1 gap-1">
+    <div className="inline-flex bg-muted rounded-lg p-1 gap-1">
       <button
         type="button"
         onClick={() => handleSwitch("claude")}
         className={`group inline-flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
           activeApp === "claude"
-            ? "bg-white text-gray-900 shadow-sm dark:bg-gray-900 dark:text-gray-100"
-            : "text-gray-500 hover:text-gray-900 hover:bg-white/50 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-gray-800/60"
+            ? "bg-background text-foreground shadow-sm"
+            : "text-muted-foreground hover:text-foreground hover:bg-background/50"
         }`}
       >
         <ProviderIcon
@@ -41,7 +41,7 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
           className={
             activeApp === "claude"
               ? "text-foreground"
-              : "text-gray-500 dark:text-gray-400 group-hover:text-foreground transition-colors"
+              : "text-muted-foreground group-hover:text-foreground transition-colors"
           }
         />
         <span>{appDisplayName.claude}</span>
@@ -50,10 +50,10 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
       <button
         type="button"
         onClick={() => handleSwitch("codex")}
-        className={`inline-flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
+        className={`group inline-flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
           activeApp === "codex"
-            ? "bg-white text-gray-900 shadow-sm dark:bg-gray-900 dark:text-gray-100"
-            : "text-gray-500 hover:text-gray-900 hover:bg-white/50 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-gray-800/60"
+            ? "bg-background text-foreground shadow-sm"
+            : "text-muted-foreground hover:text-foreground hover:bg-background/50"
         }`}
       >
         <ProviderIcon
@@ -63,7 +63,7 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
           className={
             activeApp === "codex"
               ? "text-foreground"
-              : "text-gray-500 dark:text-gray-400 group-hover:text-foreground transition-colors"
+              : "text-muted-foreground group-hover:text-foreground transition-colors"
           }
         />
         <span>{appDisplayName.codex}</span>
@@ -72,10 +72,10 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
       <button
         type="button"
         onClick={() => handleSwitch("gemini")}
-        className={`inline-flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
+        className={`group inline-flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
           activeApp === "gemini"
-            ? "bg-white text-gray-900 shadow-sm dark:bg-gray-900 dark:text-gray-100"
-            : "text-gray-500 hover:text-gray-900 hover:bg-white/50 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-gray-800/60"
+            ? "bg-background text-foreground shadow-sm"
+            : "text-muted-foreground hover:text-foreground hover:bg-background/50"
         }`}
       >
         <ProviderIcon
@@ -85,7 +85,7 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
           className={
             activeApp === "gemini"
               ? "text-foreground"
-              : "text-gray-500 dark:text-gray-400 group-hover:text-foreground transition-colors"
+              : "text-muted-foreground group-hover:text-foreground transition-colors"
           }
         />
         <span>{appDisplayName.gemini}</span>