From 32b6f058667b8735024f64553e273f11ea5de6a6 Mon Sep 17 00:00:00 2001
From: SaelixCode <dev@saelix.com>
Date: Fri, 3 Jul 2026 23:52:15 -0400
Subject: [PATCH] fix: change tab highlight from neutral to brand color

Replaced bg-glass-highlight with bg-brand/20 on all TabsHighlight
instances and updated TabsTrigger active state to text-brand,
matching the SegmentedControl selected style. Works on both
dark and light themes.
---
 frontend/src/components/EditorLayout/EditorView.tsx             | 2 +-
 frontend/src/components/FleetView.tsx                           | 2 +-
 frontend/src/components/ResourcesView.tsx                       | 2 +-
 frontend/src/components/SecurityView.tsx                        | 2 +-
 frontend/src/components/settings/NotificationRoutingSection.tsx | 2 +-
 frontend/src/components/settings/NotificationsSection.tsx       | 2 +-
 frontend/src/components/stack/GitSourceDiffDialog.tsx           | 2 +-
 frontend/src/components/ui/tabs.tsx                             | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/EditorLayout/EditorView.tsx b/frontend/src/components/EditorLayout/EditorView.tsx
index 96208d49..312790d1 100644
--- a/frontend/src/components/EditorLayout/EditorView.tsx
+++ b/frontend/src/components/EditorLayout/EditorView.tsx
@@ -435,7 +435,7 @@ export function EditorView(props: EditorViewProps) {
                             <div className="flex items-center gap-4">
                                 <Tabs value={activeTab} onValueChange={(value) => setActiveTab(value as 'compose' | 'env' | 'files')}>
                                     <TabsList>
-                                        <TabsHighlight className="rounded-md bg-glass-highlight" transition={springs.snappy}>
+                                        <TabsHighlight className="rounded-md bg-brand/20" transition={springs.snappy}>
                                             <TabsHighlightItem value="compose">
                                                 <TabsTrigger value="compose">compose.yaml</TabsTrigger>
                                             </TabsHighlightItem>
diff --git a/frontend/src/components/FleetView.tsx b/frontend/src/components/FleetView.tsx
index 5532e9a2..e24b2b91 100644
--- a/frontend/src/components/FleetView.tsx
+++ b/frontend/src/components/FleetView.tsx
@@ -110,7 +110,7 @@ export function FleetView({ onNavigateToNode, onOpenSettingsSection, fleetUpdate
                     {/* Flatten the list's own pill band so the tabs sit directly in
                         the single full-width band, not a nested second band. */}
                     <TabsList className="border-transparent bg-transparent max-md:w-full max-md:overflow-x-auto max-md:[scrollbar-width:none]">
-                        <TabsHighlight className="rounded-md bg-glass-highlight" transition={springs.snappy}>
+                        <TabsHighlight className="rounded-md bg-brand/20" transition={springs.snappy}>
                             <TabsHighlightItem value="overview">
                                 <TabsTrigger value="overview">Overview</TabsTrigger>
                             </TabsHighlightItem>
diff --git a/frontend/src/components/ResourcesView.tsx b/frontend/src/components/ResourcesView.tsx
index 961ac75c..d6afe0b0 100644
--- a/frontend/src/components/ResourcesView.tsx
+++ b/frontend/src/components/ResourcesView.tsx
@@ -834,7 +834,7 @@ export default function ResourcesView({ headerActions }: ResourcesViewProps = {}
                 ) : (
                 <div className="px-4 pt-3 pb-2 flex items-center justify-between gap-3">
                     <TabsList className="grid grid-cols-4 w-full md:w-[680px] h-9 gap-1 p-0">
-                        <TabsHighlight className="rounded-md bg-glass-highlight" transition={springs.snappy}>
+                        <TabsHighlight className="rounded-md bg-brand/20" transition={springs.snappy}>
                             {(['images', 'volumes', 'networks'] as const).map(tab => (
                                 <TabsHighlightItem key={tab} value={tab}>
                                     <TabsTrigger value={tab} className="capitalize text-xs">
diff --git a/frontend/src/components/SecurityView.tsx b/frontend/src/components/SecurityView.tsx
index 7f3ed718..828767f8 100644
--- a/frontend/src/components/SecurityView.tsx
+++ b/frontend/src/components/SecurityView.tsx
@@ -404,7 +404,7 @@ export function SecurityView({ activeTab, onTabChange, headerActions }: Security
             is flattened so the tabs sit directly in this single band. */}
         <div className="flex items-center gap-3 mb-4 flex-wrap rounded-lg border border-card-border bg-card/40 px-2.5 py-1.5">
           <TabsList className="border-transparent bg-transparent max-md:w-full max-md:overflow-x-auto max-md:[scrollbar-width:none]">
-            <TabsHighlight className="rounded-md bg-glass-highlight" transition={springs.snappy}>
+            <TabsHighlight className="rounded-md bg-brand/20" transition={springs.snappy}>
             <TabsHighlightItem value="overview">
               <TabsTrigger value="overview"><LayoutDashboard className="w-4 h-4 mr-1.5" />Overview</TabsTrigger>
             </TabsHighlightItem>
diff --git a/frontend/src/components/settings/NotificationRoutingSection.tsx b/frontend/src/components/settings/NotificationRoutingSection.tsx
index 1ad9b678..80c42cd5 100644
--- a/frontend/src/components/settings/NotificationRoutingSection.tsx
+++ b/frontend/src/components/settings/NotificationRoutingSection.tsx
@@ -433,7 +433,7 @@ export function NotificationRoutingSection() {
                                 <Label>Channel</Label>
                                 <Tabs value={formChannelType} onValueChange={(v) => setFormChannelType(v as 'discord' | 'slack' | 'webhook')}>
                                     <TabsList className="w-full grid grid-cols-3">
-                                        <TabsHighlight className="rounded-md bg-glass-highlight" transition={springs.snappy}>
+                                        <TabsHighlight className="rounded-md bg-brand/20" transition={springs.snappy}>
                                             <TabsHighlightItem value="discord">
                                                 <TabsTrigger value="discord">Discord</TabsTrigger>
                                             </TabsHighlightItem>
diff --git a/frontend/src/components/settings/NotificationsSection.tsx b/frontend/src/components/settings/NotificationsSection.tsx
index c3fa9fb0..de1ba118 100644
--- a/frontend/src/components/settings/NotificationsSection.tsx
+++ b/frontend/src/components/settings/NotificationsSection.tsx
@@ -157,7 +157,7 @@ export function NotificationsSection() {
         <div className="flex flex-col gap-6">
             <Tabs value={notifTab} onValueChange={(v) => setNotifTab(v as 'discord' | 'slack' | 'webhook')} className="w-full">
                 <TabsList className="w-full mb-4 grid grid-cols-3">
-                    <TabsHighlight className="rounded-md bg-glass-highlight" transition={springs.snappy}>
+                    <TabsHighlight className="rounded-md bg-brand/20" transition={springs.snappy}>
                         <TabsHighlightItem value="discord">
                             <TabsTrigger value="discord">Discord</TabsTrigger>
                         </TabsHighlightItem>
diff --git a/frontend/src/components/stack/GitSourceDiffDialog.tsx b/frontend/src/components/stack/GitSourceDiffDialog.tsx
index cc40cc23..3b4bb819 100644
--- a/frontend/src/components/stack/GitSourceDiffDialog.tsx
+++ b/frontend/src/components/stack/GitSourceDiffDialog.tsx
@@ -101,7 +101,7 @@ export function GitSourceDiffDialog({
           {envAvailable && (
             <Tabs value={diffTab} onValueChange={(v) => setDiffTab(v as 'compose' | 'env')}>
               <TabsList>
-                <TabsHighlight className="rounded-md bg-glass-highlight" transition={springs.snappy}>
+                <TabsHighlight className="rounded-md bg-brand/20" transition={springs.snappy}>
                   <TabsHighlightItem value="compose">
                     <TabsTrigger value="compose">Compose</TabsTrigger>
                   </TabsHighlightItem>
diff --git a/frontend/src/components/ui/tabs.tsx b/frontend/src/components/ui/tabs.tsx
index a2a77a61..aac97805 100644
--- a/frontend/src/components/ui/tabs.tsx
+++ b/frontend/src/components/ui/tabs.tsx
@@ -32,7 +32,7 @@ const TabsTrigger = React.forwardRef<
   <AnimateTabsTrigger
     ref={ref}
     className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-muted/50 hover:text-foreground data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow data-[state=active]:hover:bg-background',
+      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-foreground data-[state=active]:text-brand',
       className
     )}
     {...props}