refactor: update UI components to utilize 'popover-border' for consistent styling and enhance overall design coherence

surfsense_web/app/globals.css

@@ -20,6 +20,7 @@
 	--card-foreground: oklch(0.145 0 0);
 	--popover: oklch(0.99 0 0);
 	--popover-foreground: oklch(0.145 0 0);
+	--popover-border: oklch(0.92 0 0);
 	--primary: oklch(0.205 0 0);
 	--primary-foreground: oklch(0.985 0 0);
 	--secondary: oklch(0.97 0 0);
@@ -64,6 +65,7 @@
 	--card-foreground: oklch(0.985 0 0);
 	--popover: oklch(0.32 0 0);
 	--popover-foreground: oklch(0.985 0 0);
+	--popover-border: oklch(0.4 0 0);
 	--primary: oklch(0.985 0 0);
 	--primary-foreground: oklch(0.205 0 0);
 	--secondary: oklch(0.269 0 0);
@@ -107,6 +109,7 @@
 	--color-card-foreground: var(--card-foreground);
 	--color-popover: var(--popover);
 	--color-popover-foreground: var(--popover-foreground);
+	--color-popover-border: var(--popover-border);
 	--color-primary: var(--primary);
 	--color-primary-foreground: var(--primary-foreground);
 	--color-secondary: var(--secondary);

surfsense_web/components/agent-action-log/action-log-sheet.tsx

@@ -8,7 +8,6 @@ import { actionLogSheetAtom } from "@/atoms/agent/action-log-sheet.atom";
 import { agentFlagsAtom } from "@/atoms/agent/agent-flags-query.atom";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
 import {
 	Sheet,
 	SheetContent,
@@ -22,15 +21,11 @@ import { ActionLogItem } from "./action-log-item";
 
 function EmptyState() {
 	return (
-		<div className="flex flex-1 flex-col items-center justify-center gap-3 px-6 text-center">
+		<div className="flex flex-1 flex-col items-center justify-center gap-4 px-6 pb-12 text-center">
-			<div className="flex size-12 items-center justify-center rounded-full bg-muted">
+			<div className="flex max-w-[260px] flex-col gap-1.5">
-				<Activity className="size-5 text-muted-foreground" />
+				<p className="text-sm font-semibold tracking-tight">No actions logged yet</p>
-			</div>
+				<p className="text-xs leading-relaxed text-muted-foreground">
-			<div className="flex flex-col gap-1">
+				A complete audit trail of every tool the agent uses in this thread will appear here
-				<p className="text-sm font-medium">No actions logged yet</p>
-				<p className="text-xs text-muted-foreground">
-					Once the agent calls a tool in this thread, it will show up here. From the log you can
-					inspect arguments and revert reversible actions.
 				</p>
 			</div>
 		</div>
@@ -39,15 +34,15 @@ function EmptyState() {
 
 function DisabledState() {
 	return (
-		<div className="flex flex-1 flex-col items-center justify-center gap-3 px-6 text-center">
+		<div className="flex flex-1 flex-col items-center justify-center gap-4 px-6 pb-12 text-center">
-			<div className="flex size-12 items-center justify-center rounded-full bg-muted">
+			<div className="flex size-12 items-center justify-center rounded-full border border-popover-border bg-muted/40">
-				<Activity className="size-5 text-muted-foreground" />
+				<Activity className="size-5 text-muted-foreground" strokeWidth={1.75} />
 			</div>
-			<div className="flex flex-col gap-1">
+			<div className="flex max-w-[280px] flex-col gap-1.5">
-				<p className="text-sm font-medium">Action log is disabled</p>
+				<p className="text-sm font-semibold tracking-tight">Action log is disabled</p>
-				<p className="text-xs text-muted-foreground">
+				<p className="text-xs leading-relaxed text-muted-foreground">
-					This deployment hasn't enabled the agent action log. An admin can flip
+					This deployment hasn't enabled the agent action log. An admin can enable{" "}
-					<code className="ml-1 rounded bg-muted px-1 text-[10px]">
+					<code className="rounded bg-muted px-1 py-0.5 font-mono text-[10px] text-foreground">
 						SURFSENSE_ENABLE_ACTION_LOG
 					</code>
 					.
@@ -75,7 +70,6 @@ export function ActionLogSheet() {
 
 	const { data: flags } = useAtomValue(agentFlagsAtom);
 	const actionLogEnabled = !!flags?.enable_action_log && !flags?.disable_new_agent_stack;
-	const revertEnabled = !!flags?.enable_revert_route && !flags?.disable_new_agent_stack;
 
 	const threadId = state.threadId;
 
@@ -94,12 +88,10 @@ export function ActionLogSheet() {
 		<Sheet open={state.open} onOpenChange={(open) => setState((s) => ({ ...s, open }))}>
 			<SheetContent
 				side="right"
-				className="flex h-full w-full flex-col gap-0 overflow-hidden p-0 sm:max-w-md"
+				className="flex h-full w-full flex-col gap-0 overflow-hidden p-0 sm:max-w-md select-none"
 			>
-				<SheetHeader className="shrink-0 border-b px-4 py-4">
+				<SheetHeader className="shrink-0 px-4 py-4">
-					<div className="flex items-center justify-between gap-2">
+					<div className="flex items-center gap-2 pr-24">
-						<div className="flex items-center gap-2">
-							<Activity className="size-4 text-muted-foreground" />
 						<SheetTitle className="text-base font-semibold">Agent actions</SheetTitle>
 						{data?.total !== undefined && data.total > 0 && (
 							<Badge variant="secondary" className="text-[10px]">
@@ -107,26 +99,21 @@ export function ActionLogSheet() {
 							</Badge>
 						)}
 					</div>
+					<SheetDescription className="sr-only">
+						Audit trail of every tool call the agent made in this thread.
+					</SheetDescription>
+				</SheetHeader>
+
 				<Button
 					size="sm"
 					variant="ghost"
 					onClick={() => refetch()}
 					disabled={isFetching || !actionLogEnabled}
-							className="size-8 p-0"
+					className="absolute right-14 top-4 size-8 rounded-full p-0 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
 					aria-label="Refresh action log"
 				>
 					<RefreshCcw className={isFetching ? "size-3.5 animate-spin" : "size-3.5"} />
 				</Button>
-					</div>
-					<SheetDescription className="text-xs text-muted-foreground">
-						Audit trail of every tool call the agent made in this thread.
-						{revertEnabled
-							? " Reversible actions can be undone in place."
-							: " Reverts are read-only on this deployment."}
-					</SheetDescription>
-				</SheetHeader>
-
-				<Separator />
 
 				<div className="flex min-h-0 flex-1 flex-col overflow-y-auto scrollbar-thin">
 					{!actionLogEnabled ? (

surfsense_web/components/assistant-ui/assistant-message.tsx

@@ -320,7 +320,7 @@ const MessageInfoDropdown: FC = () => {
 				)}
 				{hasUsage && (
 					<>
-						<ActionBarMorePrimitive.Separator className="bg-border mx-2 my-1 h-px" />
+						<ActionBarMorePrimitive.Separator className="bg-popover-border mx-2 my-1 h-px" />
 						{models.length > 0 ? (
 							models.map(([model, counts]) => {
 								const { name, icon } = resolveModel(model);

surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx

@@ -145,7 +145,7 @@ export const ConnectorCard: FC<ConnectorCardProps> = ({
 				size="sm"
 				variant={isConnected ? "secondary" : "default"}
 				className={cn(
-					"relative h-8 text-[11px] px-3 rounded-lg shrink-0 font-medium items-center justify-center",
+					"relative h-8 text-[11px] px-3 shrink-0 font-medium items-center justify-center",
 					isConnected &&
 						"bg-white text-slate-700 hover:bg-accent hover:text-accent-foreground border-0 shadow-xs dark:bg-secondary dark:text-secondary-foreground",
 					!isConnected && "shadow-xs"

surfsense_web/components/assistant-ui/connector-popup/components/connector-dialog-header.tsx

@@ -37,7 +37,7 @@ export const ConnectorDialogHeader: FC<ConnectorDialogHeaderProps> = ({
 				</DialogDescription>
 			</DialogHeader>
 
-			<div className="flex flex-col-reverse sm:flex-row sm:items-end justify-between gap-4 sm:gap-8 mt-4 sm:mt-8 border-b border-border/80 dark:border-white/5">
+			<div className="flex flex-col-reverse sm:flex-row sm:items-end justify-between gap-4 sm:gap-8 mt-4 sm:mt-8 border-b border-popover-border">
 				<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"
@@ -63,7 +63,7 @@ export const ConnectorDialogHeader: FC<ConnectorDialogHeaderProps> = ({
 
 				<div className="w-full sm:w-72 sm:pb-1">
 					<div className="relative">
-						<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-gray-500 dark:text-gray-500" />
+						<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
 						<input
 							type="text"
 							autoComplete="off"
@@ -79,7 +79,7 @@ export const ConnectorDialogHeader: FC<ConnectorDialogHeaderProps> = ({
 							<button
 								type="button"
 								onClick={() => onSearchChange("")}
-								className="absolute right-3 top-1/2 -translate-y-1/2 size-4 text-gray-500 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition-colors"
+								className="absolute right-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground hover:text-accent-foreground transition-colors"
 								aria-label="Clear search"
 							>
 								<X className="size-4" />

surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/mcp-connect-form.tsx

@@ -210,7 +210,7 @@ export const MCPConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitting })
 							onClick={handleTestConnection}
 							disabled={isTesting}
 							variant="secondary"
-							className="w-full h-8 text-[13px] px-3 rounded-lg font-medium bg-white text-slate-700 hover:bg-accent hover:text-accent-foreground border-0 shadow-xs dark:bg-secondary dark:text-secondary-foreground"
+							className="w-full h-8 text-[13px] px-3 font-medium bg-white text-slate-700 hover:bg-accent hover:text-accent-foreground border-0 shadow-xs dark:bg-secondary dark:text-secondary-foreground"
 						>
 							{isTesting ? (
 								<>

surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/mcp-config.tsx

@@ -215,7 +215,7 @@ export const MCPConfig: FC<MCPConfigProps> = ({ connector, onConfigChange, onNam
 							onClick={handleTestConnection}
 							disabled={isTesting}
 							variant="secondary"
-							className="w-full h-8 text-[13px] px-3 rounded-lg font-medium bg-white text-slate-700 hover:bg-accent hover:text-accent-foreground border-0 shadow-xs dark:bg-secondary dark:text-secondary-foreground"
+							className="w-full h-8 text-[13px] px-3 font-medium bg-white text-slate-700 hover:bg-accent hover:text-accent-foreground border-0 shadow-xs dark:bg-secondary dark:text-secondary-foreground"
 						>
 							{isTesting ? (
 								<>

surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx

@@ -133,7 +133,7 @@ export const ConnectorConnectView: FC<ConnectorConnectViewProps> = ({
 			</div>
 
 			{/* Fixed Footer - Action buttons */}
-			<div className="flex-shrink-0 flex items-center justify-between px-6 sm:px-12 py-6 bg-muted border-t border-border">
+			<div className="flex-shrink-0 flex items-center justify-between px-6 sm:px-12 py-6 bg-popover">
 				<Button
 					variant="ghost"
 					onClick={onBack}

surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-edit-view.tsx

@@ -382,8 +382,8 @@ export const ConnectorEditView: FC<ConnectorEditViewProps> = ({
 					<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 flex-1 sm:flex-initial">
 						<span className="text-xs sm:text-sm text-muted-foreground sm:whitespace-nowrap">
 							{isLive
-								? "Your agent will lose access to this service."
+								? "Your agent will lose access to this service"
-								: "This will remove all indexed data."}
+								: "This will remove all indexed data"}
 						</span>
 						<div className="flex items-center gap-2 sm:gap-3">
 							<Button

surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/indexing-configuration-view.tsx

@@ -255,7 +255,7 @@ export const IndexingConfigurationView: FC<IndexingConfigurationViewProps> = ({
 			</div>
 
 			{/* Fixed Footer - Action buttons */}
-			<div className="flex-shrink-0 flex items-center justify-end px-6 sm:px-12 py-6 bg-muted">
+			<div className="flex-shrink-0 flex items-center justify-end px-6 sm:px-12 py-6 bg-popover">
 				{isLive ? (
 					<Button onClick={onSkip} className="text-xs sm:text-sm">
 						Done

surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx

@@ -222,7 +222,7 @@ export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
 											<Button
 												variant="secondary"
 												size="sm"
-												className="h-8 text-[11px] px-3 rounded-lg font-medium bg-white text-slate-700 hover:bg-accent hover:text-accent-foreground border-0 shadow-xs dark:bg-secondary dark:text-secondary-foreground shrink-0"
+												className="h-8 text-[11px] px-3 font-medium bg-white text-slate-700 hover:bg-accent hover:text-accent-foreground border-0 shadow-xs dark:bg-secondary dark:text-secondary-foreground shrink-0"
 												onClick={handleManageClick}
 											>
 												Manage
@@ -280,7 +280,7 @@ export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
 											<Button
 												variant="secondary"
 												size="sm"
-												className="h-8 text-[11px] px-3 rounded-lg font-medium bg-white text-slate-700 hover:bg-accent hover:text-accent-foreground border-0 shadow-xs dark:bg-secondary dark:text-secondary-foreground shrink-0"
+												className="h-8 text-[11px] px-3 font-medium bg-white text-slate-700 hover:bg-accent hover:text-accent-foreground border-0 shadow-xs dark:bg-secondary dark:text-secondary-foreground shrink-0"
 												onClick={onManage ? () => onManage(connector) : undefined}
 											>
 												Manage

surfsense_web/components/assistant-ui/connector-popup/views/connector-accounts-list-view.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useAtomValue } from "jotai";
-import { ArrowLeft, Plus, RefreshCw, Server, Trash2 } from "lucide-react";
+import { ArrowLeft, Plus, RefreshCw, Server } from "lucide-react";
 import { type FC, useCallback, useState } from "react";
 import { toast } from "sonner";
 import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
@@ -231,7 +231,7 @@ export const ConnectorAccountsListView: FC<ConnectorAccountsListViewProps> = ({
 									{isAuthExpired ? (
 										<Button
 											size="sm"
-											className="h-8 text-[11px] px-3 rounded-lg font-medium bg-amber-600 hover:bg-amber-700 text-white border-0 shadow-xs shrink-0"
+											className="h-8 text-[11px] px-3 font-medium bg-amber-600 hover:bg-amber-700 text-white border-0 shadow-xs shrink-0"
 											onClick={() => handleReauth(connector)}
 											disabled={reauthingId === connector.id}
 										>
@@ -246,7 +246,7 @@ export const ConnectorAccountsListView: FC<ConnectorAccountsListViewProps> = ({
 												<Button
 													variant="destructive"
 													size="sm"
-													className="h-8 text-[11px] px-3 rounded-lg font-medium shadow-xs"
+													className="h-8 text-[11px] px-3 font-medium shadow-xs"
 													onClick={async () => {
 														setDisconnectingId(connector.id);
 														setConfirmDisconnectId(null);
@@ -267,7 +267,7 @@ export const ConnectorAccountsListView: FC<ConnectorAccountsListViewProps> = ({
 												<Button
 													variant="ghost"
 													size="sm"
-													className="h-8 text-[11px] px-2 rounded-lg"
+													className="h-8 text-[11px] px-2"
 													onClick={() => setConfirmDisconnectId(null)}
 													disabled={disconnectingId === connector.id}
 												>
@@ -276,12 +276,11 @@ export const ConnectorAccountsListView: FC<ConnectorAccountsListViewProps> = ({
 											</div>
 										) : (
 										<Button
-												variant="secondary"
+											variant="destructive"
 											size="sm"
-												className="h-8 text-[11px] px-3 rounded-lg font-medium bg-white text-slate-700 hover:bg-red-50 hover:text-red-700 border-0 shadow-xs dark:bg-secondary dark:text-secondary-foreground dark:hover:bg-red-950 dark:hover:text-red-400 shrink-0"
+											className="h-8 text-[11px] px-3 font-medium shrink-0"
 											onClick={() => setConfirmDisconnectId(connector.id)}
 										>
-												<Trash2 className="size-3.5" />
 											Disconnect
 										</Button>
 										)
@@ -289,7 +288,7 @@ export const ConnectorAccountsListView: FC<ConnectorAccountsListViewProps> = ({
 										<Button
 											variant="secondary"
 											size="sm"
-											className="h-8 text-[11px] px-3 rounded-lg font-medium bg-white text-slate-700 hover:bg-accent hover:text-accent-foreground border-0 shadow-xs dark:bg-secondary dark:text-secondary-foreground shrink-0"
+											className="h-8 text-[11px] px-3 font-medium bg-white text-slate-700 hover:bg-accent hover:text-accent-foreground border-0 shadow-xs dark:bg-secondary dark:text-secondary-foreground shrink-0"
 											onClick={() => onManage(connector)}
 										>
 											Manage

surfsense_web/components/assistant-ui/connector-popup/views/youtube-crawler-view.tsx

@@ -323,7 +323,7 @@ export const YouTubeCrawlerView: FC<YouTubeCrawlerViewProps> = ({ searchSpaceId,
 			</div>
 
 			{/* Fixed Footer - Action buttons */}
-			<div className="shrink-0 flex items-center justify-between px-6 sm:px-12 py-6 bg-muted border-t border-border">
+			<div className="shrink-0 flex items-center justify-between px-6 sm:px-12 py-6 bg-popover">
 				<Button
 					variant="ghost"
 					onClick={onBack}

surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx

@@ -234,7 +234,7 @@ export function SidebarUserProfile({
 							</div>
 						</DropdownMenuLabel>
 
-						<DropdownMenuSeparator className="dark:bg-neutral-700" />
+						<DropdownMenuSeparator />
 
 						<DropdownMenuItem onClick={onUserSettings}>
 							<UserCog className="h-4 w-4" />
@@ -329,7 +329,7 @@ export function SidebarUserProfile({
 											</a>
 										</DropdownMenuItem>
 									))}
-									<DropdownMenuSeparator className="dark:bg-neutral-700" />
+									<DropdownMenuSeparator />
 									<p className="select-none px-2 py-1.5 text-xs text-muted-foreground/50">
 										v{APP_VERSION}
 									</p>
@@ -346,7 +346,7 @@ export function SidebarUserProfile({
 							</DropdownMenuItem>
 						)}
 
-						<DropdownMenuSeparator className="dark:bg-neutral-700" />
+						<DropdownMenuSeparator />
 
 						<DropdownMenuItem onClick={handleLogout} disabled={isLoggingOut}>
 							{isLoggingOut ? (
@@ -400,7 +400,7 @@ export function SidebarUserProfile({
 						</div>
 					</DropdownMenuLabel>
 
-					<DropdownMenuSeparator className="dark:bg-neutral-700" />
+					<DropdownMenuSeparator />
 
 					<DropdownMenuItem onClick={onUserSettings}>
 						<UserCog className="h-4 w-4" />
@@ -495,7 +495,7 @@ export function SidebarUserProfile({
 										</a>
 									</DropdownMenuItem>
 								))}
-								<DropdownMenuSeparator className="dark:bg-neutral-700" />
+								<DropdownMenuSeparator />
 								<p className="select-none px-2 py-1.5 text-xs text-muted-foreground/50">
 									v{APP_VERSION}
 								</p>
@@ -512,7 +512,7 @@ export function SidebarUserProfile({
 						</DropdownMenuItem>
 					)}
 
-					<DropdownMenuSeparator className="dark:bg-neutral-700" />
+					<DropdownMenuSeparator />
 
 					<DropdownMenuItem onClick={handleLogout} disabled={isLoggingOut}>
 						{isLoggingOut ? <Spinner size="sm" className="mr-2" /> : <LogOut className="h-4 w-4" />}

surfsense_web/components/new-chat/chat-share-button.tsx

@@ -231,7 +231,7 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
 						{canCreatePublicLink && (
 							<>
 								{/* Divider */}
-								<div className="border-t border-border dark:border-white/5 my-1" />
+								<div className="border-t border-popover-border my-1" />
 
 								{/* Public Link Option */}
 								<button

surfsense_web/components/new-chat/document-mention-picker.tsx

@@ -521,7 +521,7 @@ export const DocumentMentionPicker = forwardRef<
 						{userDocsList.length > 0 && (
 							<>
 								{surfsenseDocsList.length > 0 && (
-									<div className="mx-2 my-4 border-t border-border dark:border-white/5" />
+									<div className="mx-2 my-4 border-t border-popover-border" />
 								)}
 								<div className="px-3 py-2 text-xs font-bold text-muted-foreground/55">
 									Your Documents
@@ -581,7 +581,7 @@ export const DocumentMentionPicker = forwardRef<
 						{folderMentions.length > 0 && (
 							<>
 								{(surfsenseDocsList.length > 0 || userDocsList.length > 0) && (
-									<div className="mx-2 my-4 border-t border-border dark:border-white/5" />
+									<div className="mx-2 my-4 border-t border-popover-border" />
 								)}
 								<div className="px-3 py-2 text-xs font-bold text-muted-foreground/55">
 									Folders

surfsense_web/components/new-chat/model-selector.tsx

@@ -840,8 +840,8 @@ export function ModelSelector({
 		return (
 			<div
 				className={cn(
-					"shrink-0 border-border/50 flex relative",
+					"shrink-0 border-popover-border flex relative",
-					isMobile ? "flex-row items-center border-b border-border/40" : "flex-col w-10 border-r"
+					isMobile ? "flex-row items-center border-b" : "flex-col w-10 border-r"
 				)}
 			>
 				{!isMobile && (
@@ -907,9 +907,9 @@ export function ModelSelector({
 							<Fragment key={provider}>
 								{showSeparator &&
 									(isMobile ? (
-										<div className="w-px h-5 bg-border/60 shrink-0 self-center mx-0.5" />
+										<div className="w-px h-5 bg-popover-border shrink-0 self-center mx-0.5" />
 									) : (
-										<div className="h-px w-5 bg-border/60 mx-auto my-0.5" />
+										<div className="h-px w-5 bg-popover-border mx-auto my-0.5" />
 									))}
 								<Tooltip>
 									<TooltipTrigger asChild>
@@ -1125,7 +1125,11 @@ export function ModelSelector({
 							<Pencil className="size-3.5 text-muted-foreground" />
 						</Button>
 					)}
-					{isSelected && <Check className="size-4 text-primary shrink-0" />}
+					{isSelected && (
+						<div className="size-7 grid place-items-center shrink-0">
+							<Check className="size-4" />
+						</div>
+					)}
 				</div>
 			</div>
 		);
@@ -1150,7 +1154,7 @@ export function ModelSelector({
 		return (
 			<div className="flex flex-col w-full overflow-hidden">
 				{/* Tab header */}
-				<div className="border-b border-border/50">
+				<div className="border-b border-popover-border">
 					<div className="w-full grid grid-cols-3 h-11">
 						{(
 							[
@@ -1303,7 +1307,7 @@ export function ModelSelector({
 										</>
 									)}
 									{globalItems.length > 0 && userItems.length > 0 && (
-										<div className="my-1.5 mx-4 h-px bg-border/60" />
+										<div className="my-1.5 mx-4 h-px bg-popover-border" />
 									)}
 									{userItems.length > 0 && (
 										<>

surfsense_web/components/new-chat/prompt-picker.tsx

@@ -171,7 +171,7 @@ export const PromptPicker = forwardRef<PromptPickerRef, PromptPickerProps>(funct
 							</button>
 						))}
 
-						<div className="mx-2 my-1 border-t border-border dark:border-white/5" />
+						<div className="mx-2 my-1 border-t border-popover-border" />
 						<button
 							ref={(el) => {
 								if (el) itemRefs.current.set(createPromptIndex, el);

surfsense_web/components/ui/command.tsx

@@ -118,7 +118,7 @@ function CommandSeparator({
 	return (
 		<CommandPrimitive.Separator
 			data-slot="command-separator"
-			className={cn("bg-border -mx-1 h-px", className)}
+			className={cn("bg-popover-border -mx-1 h-px", className)}
 			{...props}
 		/>
 	);

surfsense_web/components/ui/context-menu.tsx

@@ -189,7 +189,7 @@ function ContextMenuSeparator({
 	return (
 		<ContextMenuPrimitive.Separator
 			data-slot="context-menu-separator"
-			className={cn("bg-border -mx-1 my-1 h-px", className)}
+			className={cn("bg-popover-border -mx-1 my-1 h-px", className)}
 			{...props}
 		/>
 	);

surfsense_web/components/ui/dropdown-menu.tsx

@@ -149,7 +149,7 @@ function DropdownMenuSeparator({
 	return (
 		<DropdownMenuPrimitive.Separator
 			data-slot="dropdown-menu-separator"
-			className={cn("bg-border mx-2 my-1 h-px", className)}
+			className={cn("bg-popover-border mx-2 my-1 h-px", className)}
 			{...props}
 		/>
 	);

surfsense_web/components/ui/select.tsx

@@ -121,7 +121,7 @@ function SelectSeparator({
 	return (
 		<SelectPrimitive.Separator
 			data-slot="select-separator"
-			className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+			className={cn("bg-popover-border pointer-events-none -mx-1 my-1 h-px", className)}
 			{...props}
 		/>
 	);

surfsense_web/components/ui/toolbar.tsx

@@ -337,8 +337,7 @@ export function ToolbarMenuGroup({
 			<DropdownMenuSeparator
 				className={cn(
 					"hidden",
-					"mb-0 mx-2 shrink-0 peer-has-[[role=menuitem]]/menu-group:block peer-has-[[role=menuitemradio]]/menu-group:block peer-has-[[role=option]]/menu-group:block",
+					"mb-0 mx-2 shrink-0 peer-has-[[role=menuitem]]/menu-group:block peer-has-[[role=menuitemradio]]/menu-group:block peer-has-[[role=option]]/menu-group:block"
-					"dark:bg-neutral-700"
 				)}
 			/>