From 3a6749e86fe58d6f37cb55b5fefffeb6b3336356 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Wed, 31 Dec 2025 23:24:20 +0530
Subject: [PATCH] feat: Update connector UI components with improved button
 styles and border adjustments for better visual consistency

---
 .../connector-popup/components/connector-card.tsx           | 5 +++--
 .../connector-popup/components/connector-dialog-header.tsx  | 6 ++----
 .../connector-popup/tabs/active-connectors-tab.tsx          | 4 ++--
 surfsense_web/components/new-chat/model-selector.tsx        | 6 +++---
 4 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx b/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx
index 126945fa6..f14151aa3 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx
@@ -108,10 +108,11 @@ export const ConnectorCard: FC<ConnectorCardProps> = ({
 			</div>
 			<Button
 				size="sm"
-				variant={isConnected ? "outline" : "default"}
+				variant={isConnected ? "secondary" : "default"}
 				className={cn(
 					"h-8 text-[11px] px-3 rounded-lg flex-shrink-0 font-medium",
-					isConnected && "border-0"
+					isConnected && "bg-white text-slate-700 hover:bg-slate-50 border-0 shadow-xs dark:bg-secondary dark:text-secondary-foreground dark:hover:bg-secondary/80",
+					!isConnected && "shadow-xs"
 				)}
 				onClick={isConnected ? onManage : onConnect}
 				disabled={isConnecting || isIndexing}
diff --git a/surfsense_web/components/assistant-ui/connector-popup/components/connector-dialog-header.tsx b/surfsense_web/components/assistant-ui/connector-popup/components/connector-dialog-header.tsx
index d4126f2ce..c21c305b7 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/components/connector-dialog-header.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/components/connector-dialog-header.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Search } from "lucide-react";
-import { type FC } from "react";
+import type { FC } from "react";
 import {
 	DialogDescription,
 	DialogHeader,
@@ -23,10 +23,8 @@ interface ConnectorDialogHeaderProps {
 }
 
 export const ConnectorDialogHeader: FC<ConnectorDialogHeaderProps> = ({
-	activeTab,
 	totalSourceCount,
 	searchQuery,
-	onTabChange,
 	onSearchChange,
 	isScrolled,
 }) => {
@@ -46,7 +44,7 @@ export const ConnectorDialogHeader: FC<ConnectorDialogHeaderProps> = ({
 				</DialogDescription>
 			</DialogHeader>
 
-			<div className="flex flex-col-reverse sm:flex-row sm:items-end justify-between gap-6 sm:gap-8 mt-6 sm:mt-8 border-b border-slate-400/5 dark:border-white/5">
+			<div className="flex flex-col-reverse sm:flex-row sm:items-end justify-between gap-6 sm:gap-8 mt-6 sm:mt-8 border-b border-border/80 dark:border-white/5">
 				<TabsList className="bg-transparent p-0 gap-4 sm:gap-8 h-auto w-full sm:w-auto justify-center sm:justify-start">
 					<TabsTrigger
 						value="all"
diff --git a/surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx b/surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx
index b033b5f20..5016e1626 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx
@@ -115,9 +115,9 @@ export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
 										)}
 									</div>
 									<Button
-										variant="outline"
+										variant="secondary"
 										size="sm"
-										className="h-8 text-[11px] px-3 rounded-lg font-medium border-0"
+										className="h-8 text-[11px] px-3 rounded-lg font-medium bg-white text-slate-700 hover:bg-slate-50 border-0 shadow-xs dark:bg-secondary dark:text-secondary-foreground dark:hover:bg-secondary/80"
 										onClick={onManage ? () => onManage(connector) : undefined}
 										disabled={isIndexing}
 									>
diff --git a/surfsense_web/components/new-chat/model-selector.tsx b/surfsense_web/components/new-chat/model-selector.tsx
index 1d223a411..ead378e86 100644
--- a/surfsense_web/components/new-chat/model-selector.tsx
+++ b/surfsense_web/components/new-chat/model-selector.tsx
@@ -212,7 +212,7 @@ export function ModelSelector({ onEdit, onAddNew, className }: ModelSelectorProp
 			</PopoverTrigger>
 
 			<PopoverContent
-				className="w-[280px] md:w-[360px] p-0 rounded-lg md:rounded-xl shadow-lg border-border/30"
+				className="w-[280px] md:w-[360px] p-0 rounded-lg md:rounded-xl shadow-lg border-border/60"
 				align="start"
 				sideOffset={8}
 			>
@@ -252,7 +252,7 @@ export function ModelSelector({ onEdit, onAddNew, className }: ModelSelectorProp
 						{/* Global Configs Section */}
 						{filteredGlobalConfigs.length > 0 && (
 							<CommandGroup>
-								<div className="flex items-center gap-2 px-3 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+								<div className="flex items-center gap-2 px-3 py-2 text-xs font-semibold text-muted-foreground tracking-wider">
 									<Globe className="size-3.5" />
 									Global Models
 								</div>
@@ -314,7 +314,7 @@ export function ModelSelector({ onEdit, onAddNew, className }: ModelSelectorProp
 						{/* User Configs Section */}
 						{filteredUserConfigs.length > 0 && (
 							<CommandGroup>
-								<div className="flex items-center gap-2 px-3 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+								<div className="flex items-center gap-2 px-3 py-2 text-xs font-semibold text-muted-foreground tracking-wider">
 									<User className="size-3.5" />
 									Your Configurations
 								</div>