diff --git a/surfsense_web/components/layout/ui/tabs/TabBar.tsx b/surfsense_web/components/layout/ui/tabs/TabBar.tsx index dc346b6cb..c38b84df9 100644 --- a/surfsense_web/components/layout/ui/tabs/TabBar.tsx +++ b/surfsense_web/components/layout/ui/tabs/TabBar.tsx @@ -58,7 +58,7 @@ export function TabBar({ onTabSwitch, onNewChat, className }: TabBarProps) { if (tabs.length <= 1) return null; return ( -
+
handleTabClick(tab)} className={cn( - "group relative flex h-full w-[170px] items-center self-stretch px-3 min-w-0 overflow-hidden text-sm font-medium border-r transition-colors shrink-0", + "group relative flex h-full w-[170px] items-center self-stretch px-3 min-w-0 overflow-hidden text-sm font-medium border-r border-border/35 transition-colors shrink-0", isActive - ? "bg-muted/40 text-foreground" + ? "bg-muted/50 text-foreground" : "bg-transparent text-muted-foreground hover:bg-muted/25 hover:text-foreground" )} > - {isActive && } {tab.title} @@ -97,8 +96,8 @@ export function TabBar({ onTabSwitch, onNewChat, className }: TabBarProps) { className={cn( "absolute right-2 top-1/2 -translate-y-1/2 shrink-0 rounded-sm p-0.5 transition-colors", isActive - ? "opacity-0 group-hover:opacity-70 group-focus-within:opacity-70 hover:opacity-100 hover:bg-muted" - : "opacity-0 group-hover:opacity-60 group-focus-within:opacity-60 hover:opacity-100! hover:bg-muted" + ? "opacity-0 group-hover:opacity-70 group-focus-within:opacity-70 hover:opacity-100" + : "opacity-0 group-hover:opacity-60 group-focus-within:opacity-60 hover:opacity-100!" )} >