From 468f4ef121c00631a57bd6777a26bdf949c3b7cc Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Thu, 14 May 2026 02:10:33 +0530
Subject: [PATCH] refactor: standardize hover effects and focus styles across
 UI components

---
 surfsense_web/components/assistant-ui/assistant-message.tsx | 4 ++--
 surfsense_web/components/ui/inline-combobox.tsx             | 2 +-
 surfsense_web/components/ui/select.tsx                      | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/surfsense_web/components/assistant-ui/assistant-message.tsx b/surfsense_web/components/assistant-ui/assistant-message.tsx
index 28dc9aacc..3f4e972fc 100644
--- a/surfsense_web/components/assistant-ui/assistant-message.tsx
+++ b/surfsense_web/components/assistant-ui/assistant-message.tsx
@@ -328,7 +328,7 @@ const MessageInfoDropdown: FC = () => {
 								return (
 									<ActionBarMorePrimitive.Item
 										key={model}
-										className="focus:bg-neutral-200 dark:focus:bg-neutral-700 relative flex cursor-default flex-col items-start gap-0.5 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none"
+										className="focus:bg-accent focus:text-accent-foreground relative flex cursor-default flex-col items-start gap-0.5 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none"
 										onSelect={(e) => e.preventDefault()}
 									>
 										<span className="flex items-center gap-1.5 text-xs font-medium">
@@ -344,7 +344,7 @@ const MessageInfoDropdown: FC = () => {
 							})
 						) : (
 							<ActionBarMorePrimitive.Item
-								className="focus:bg-neutral-200 dark:focus:bg-neutral-700 relative flex cursor-default flex-col items-start gap-0.5 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none"
+								className="focus:bg-accent focus:text-accent-foreground relative flex cursor-default flex-col items-start gap-0.5 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none"
 								onSelect={(e) => e.preventDefault()}
 							>
 								<span className="text-xs text-muted-foreground">
diff --git a/surfsense_web/components/ui/inline-combobox.tsx b/surfsense_web/components/ui/inline-combobox.tsx
index 941c1c7db..1747dc469 100644
--- a/surfsense_web/components/ui/inline-combobox.tsx
+++ b/surfsense_web/components/ui/inline-combobox.tsx
@@ -299,7 +299,7 @@ const comboboxItemVariants = cva(
 		variants: {
 			interactive: {
 				false: "",
-				true: "cursor-pointer transition-colors hover:bg-accent hover:text-accent-foreground data-[active-item=true]:bg-accent data-[active-item=true]:text-accent-foreground dark:hover:bg-neutral-700 dark:data-[active-item=true]:bg-neutral-700",
+				true: "cursor-pointer transition-colors hover:bg-accent hover:text-accent-foreground data-[active-item=true]:bg-accent data-[active-item=true]:text-accent-foreground",
 			},
 		},
 	}
diff --git a/surfsense_web/components/ui/select.tsx b/surfsense_web/components/ui/select.tsx
index 637349e7f..0a17516d5 100644
--- a/surfsense_web/components/ui/select.tsx
+++ b/surfsense_web/components/ui/select.tsx
@@ -97,7 +97,7 @@ function SelectItem({
 		<SelectPrimitive.Item
 			data-slot="select-item"
 			className={cn(
-				"focus:bg-accent focus:text-accent-foreground dark:focus:bg-neutral-700 hover:bg-accent dark:hover:bg-neutral-700 [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 px-2 text-sm outline-hidden select-none transition-all data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 data-[highlighted]:bg-accent dark:data-[highlighted]:bg-neutral-700",
+				"focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 px-2 text-sm outline-hidden select-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
 				className
 			)}
 			{...props}
@@ -121,7 +121,7 @@ function SelectSeparator({
 	return (
 		<SelectPrimitive.Separator
 			data-slot="select-separator"
-			className={cn("bg-border dark:bg-neutral-700 pointer-events-none -mx-1 my-1 h-px", className)}
+			className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
 			{...props}
 		/>
 	);