feat(ui): refine TopNav design with premium 24px duotone icons and adaptive glow

Author: nodfans

packages/app/src/components/layout/top-nav.tsx

@@ -15,49 +15,55 @@ const NAV_ITEMS = [
     id: "dashboard",
     label: "Dashboard",
     icon: DashboardIcon,
-    size: 42,
-    color: "text-rose-400",
-    glow: "rgba(59,130,246,0.35)",
+    size: 24,
+    color: "text-rose-500",
+    glow: "rgba(244,63,94,0.1)",
+    activeGlow: "rgba(244,63,94,0.25)",
   },
   {
     id: "hql",
     label: "HQL",
     icon: HQLIcon,
-    size: 42,
+    size: 24,
     color: "text-emerald-500",
-    glow: "rgba(16,185,129,0.35)",
+    glow: "rgba(16,185,129,0.1)",
+    activeGlow: "rgba(16,185,129,0.25)",
   },
   {
     id: "queries",
     label: "Queries",
     icon: QueriesIcon,
-    size: 42,
-    color: "text-yellow-500",
-    glow: "rgba(245,158,11,0.35)",
+    size: 24,
+    color: "text-amber-500",
+    glow: "rgba(245,158,11,0.1)",
+    activeGlow: "rgba(245,158,11,0.25)",
   },
   {
     id: "editor",
     label: "Modeler",
     icon: ModelerIcon,
-    size: 42,
+    size: 24,
     color: "text-orange-500",
-    glow: "rgba(249,115,22,0.35)",
+    glow: "rgba(249,115,22,0.1)",
+    activeGlow: "rgba(249,115,22,0.25)",
   },
   {
     id: "schema",
     label: "Schema",
     icon: SchemaIcon,
-    size: 42,
+    size: 24,
     color: "text-indigo-500",
-    glow: "rgba(99,102,241,0.35)",
+    glow: "rgba(99,102,241,0.1)",
+    activeGlow: "rgba(99,102,241,0.25)",
   },
   {
     id: "graph",
     label: "Graph",
     icon: GraphIcon,
-    size: 42,
+    size: 24,
     color: "text-purple-500",
-    glow: "rgba(168,85,247,0.35)",
+    glow: "rgba(168,85,247,0.1)",
+    activeGlow: "rgba(168,85,247,0.25)",
   },
 ] as const;
 
@@ -72,10 +78,10 @@ const ConnectionButton = (props: { isConnected: boolean; onClick: () => void })
         style={{ "-webkit-tap-highlight-color": "transparent" }}
         title={props.isConnected ? `Connected to ${active.name} - Click to disconnect` : "Disconnected - Click to configure"}
       >
-        <div class="relative w-12 h-11 flex items-center justify-center">
+        <div class="relative w-12 h-9 flex items-center justify-center">
           <ConnectionIcon
             connected={props.isConnected}
-            size={42}
+            size={24}
             class={`transition-all duration-300 ${props.isConnected ? "scale-105 drop-shadow-[0_0_8px_rgba(16,185,129,0.4)]" : "text-native-tertiary grayscale"} group-hover:scale-110`}
           />
         </div>
@@ -89,18 +95,20 @@ const ConnectionButton = (props: { isConnected: boolean; onClick: () => void })
   );
 };
 
-const NavButton = (props: { label: string; icon: any; color: string; glow?: string; size?: number; isActive: boolean; onClick: () => void }) => {
+const NavButton = (props: { label: string; icon: any; color: string; glow: string; activeGlow: string; size?: number; isActive: boolean; onClick: () => void }) => {
   return (
     <button
       onClick={props.onClick}
       class="flex flex-col items-center justify-center min-w-[72px] h-[52px] pb-px transition-all group relative outline-none select-none"
       style={{ "-webkit-tap-highlight-color": "transparent" }}
     >
       <div
-        class={`relative w-12 h-11 flex items-center justify-center transition-all duration-300 ${props.isActive ? "text-accent scale-110" : props.color + " group-hover:scale-110"}`}
-        style={{ filter: props.glow ? `drop-shadow(0 2px 6px ${props.glow})` : undefined }}
+        class={`relative w-12 h-9 flex items-center justify-center transition-all duration-300 ${props.isActive ? "text-accent scale-110" : props.color + " group-hover:scale-110"}`}
+        style={{
+          filter: `drop-shadow(0 2px ${props.isActive ? "6px" : "3px"} ${props.isActive ? props.activeGlow : props.glow})`,
+        }}
       >
-        <props.icon size={props.size || 42} theme={props.isActive ? "dark" : "light"} />
+        <props.icon size={props.size || 24} theme={props.isActive ? "dark" : "light"} />
       </div>
 
       <span
@@ -138,7 +146,16 @@ export const TopNav = (props: TopNavProps) => {
         <div class="flex items-center gap-0.5">
           <For each={NAV_ITEMS}>
             {(item) => (
-              <NavButton label={item.label} icon={item.icon} color={item.color} glow={item.glow} size={item.size} isActive={props.activeView === item.id} onClick={() => props.onSelectView(item.id)} />
+              <NavButton
+                label={item.label}
+                icon={item.icon}
+                color={item.color}
+                glow={item.glow}
+                activeGlow={item.activeGlow}
+                size={item.size}
+                isActive={props.activeView === item.id}
+                onClick={() => props.onSelectView(item.id)}
+              />
             )}
           </For>
         </div>