From f6836cf11f15718b6801301162efea08db266d79 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sat, 25 Jul 2026 01:39:26 +0530
Subject: [PATCH] fix(globals.css, models-selection-panel): update brand color
 and improve button styles for active state

---
 surfsense_web/app/globals.css                          |  4 ++--
 .../model-connections/models-selection-panel.tsx       | 10 ++++++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/surfsense_web/app/globals.css b/surfsense_web/app/globals.css
index 4a29edfa6..72a3bbfef 100644
--- a/surfsense_web/app/globals.css
+++ b/surfsense_web/app/globals.css
@@ -54,7 +54,7 @@
 	--sidebar-ring: oklch(0.708 0 0);
 	--main-panel: var(--panel);
 	--syntax-bg: #f5f5f5;
-	--brand: oklch(0.623 0.214 259.815);
+	--brand: oklch(0.546 0.245 262.881);
 	--highlight: oklch(0.852 0.199 91.936);
 }
 
@@ -103,7 +103,7 @@ html[data-surfsense-auth-type="LOCAL"] .runtime-auth-google {
 	--sidebar-ring: oklch(0.439 0 0);
 	--main-panel: var(--panel);
 	--syntax-bg: #1e1e1e;
-	--brand: oklch(0.707 0.165 254.624);
+	--brand: oklch(0.546 0.245 262.881);
 	--highlight: oklch(0.852 0.199 91.936);
 }
 
diff --git a/surfsense_web/components/settings/model-connections/models-selection-panel.tsx b/surfsense_web/components/settings/model-connections/models-selection-panel.tsx
index a24cf1504..78ad69b4b 100644
--- a/surfsense_web/components/settings/model-connections/models-selection-panel.tsx
+++ b/surfsense_web/components/settings/model-connections/models-selection-panel.tsx
@@ -99,11 +99,17 @@ export function ModelsSelectionPanel({
 								type="button"
 								variant="secondary"
 								size="sm"
-								className={`h-7 rounded-full px-3 text-xs ${isActive ? "" : "opacity-80"}`}
+								className={`h-7 rounded-full px-3 text-xs ${
+									isActive
+										? "bg-brand text-white hover:bg-brand/90"
+										: "opacity-80"
+								}`}
 								onClick={() => setModelFilter(isActive ? null : filter.key)}
 							>
 								{filter.label}
-								<span className="ml-1 text-muted-foreground">{count}</span>
+								<span className={`ml-1 ${isActive ? "text-white/80" : "text-muted-foreground"}`}>
+									{count}
+								</span>
 							</Button>
 						);
 					})}