gsadmin/sencho
1
0
Fork 0
mirror of https://github.com/Studio-Saelix/sencho.git synced 2026-08-13 04:06:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: change tab highlight from neutral to brand color

Browse Source 
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.
This commit is contained in:
SaelixCode
2026-07-03 23:52:15 -04:00
parent 9117ca13cf
commit 32b6f05866
8 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/EditorLayout/EditorView.tsx
+1 -1
View File
@@ -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>
frontend/src/components/FleetView.tsx
+1 -1
View File
@@ -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>
frontend/src/components/ResourcesView.tsx
+1 -1
View File
@@ -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">
frontend/src/components/SecurityView.tsx
+1 -1
View File
@@ -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>
frontend/src/components/settings/NotificationRoutingSection.tsx
+1 -1
View File
@@ -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>
frontend/src/components/settings/NotificationsSection.tsx
+1 -1
View File
@@ -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>
frontend/src/components/stack/GitSourceDiffDialog.tsx
+1 -1
View File
@@ -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>
frontend/src/components/ui/tabs.tsx
+1 -1
View File
@@ -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}