apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-21 18:55:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Anish Sarkar 2026-05-14 12:53:52 +05:30
parent 468f4ef121
commit 88f9c3353c
23 changed files with 89 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

3
surfsense_web/app/globals.css
View file

@ -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);

79
surfsense_web/components/agent-action-log/action-log-sheet.tsx
View file

@ -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 size-12 items-center justify-center rounded-full bg-muted">
<Activity className="size-5 text-muted-foreground" />
</div>
<div className="flex flex-col gap-1">
<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.
<div className="flex flex-1 flex-col items-center justify-center gap-4 px-6 pb-12 text-center">
<div className="flex max-w-[260px] flex-col gap-1.5">
<p className="text-sm font-semibold tracking-tight">No actions logged yet</p>
<p className="text-xs leading-relaxed text-muted-foreground">
A complete audit trail of every tool the agent uses in this thread will appear here
</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 size-12 items-center justify-center rounded-full bg-muted">
<Activity className="size-5 text-muted-foreground" />
<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 border border-popover-border bg-muted/40">
<Activity className="size-5 text-muted-foreground" strokeWidth={1.75} />
</div>
<div className="flex flex-col gap-1">
<p className="text-sm font-medium">Action log is disabled</p>
<p className="text-xs text-muted-foreground">
This deployment hasn't enabled the agent action log. An admin can flip
<code className="ml-1 rounded bg-muted px-1 text-[10px]">
<div className="flex max-w-[280px] flex-col gap-1.5">
<p className="text-sm font-semibold tracking-tight">Action log is disabled</p>
<p className="text-xs leading-relaxed text-muted-foreground">
This deployment hasn't enabled the agent action log. An admin can enable{" "}
<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,39 +88,32 @@ 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">
<div className="flex items-center justify-between gap-2">
<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]">
{data.total}
</Badge>
)}
</div>
<Button
size="sm"
variant="ghost"
onClick={() => refetch()}
disabled={isFetching || !actionLogEnabled}
className="size-8 p-0"
aria-label="Refresh action log"
>
<RefreshCcw className={isFetching ? "size-3.5 animate-spin" : "size-3.5"} />
</Button>
<SheetHeader className="shrink-0 px-4 py-4">
<div className="flex items-center gap-2 pr-24">
<SheetTitle className="text-base font-semibold">Agent actions</SheetTitle>
{data?.total !== undefined && data.total > 0 && (
<Badge variant="secondary" className="text-[10px]">
{data.total}
</Badge>
)}
</div>
<SheetDescription className="text-xs text-muted-foreground">
<SheetDescription className="sr-only">
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 />
<Button
size="sm"
variant="ghost"
onClick={() => refetch()}
disabled={isFetching || !actionLogEnabled}
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 className="flex min-h-0 flex-1 flex-col overflow-y-auto scrollbar-thin">
{!actionLogEnabled ? (

2
surfsense_web/components/assistant-ui/assistant-message.tsx
View file

@ -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);

2
surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx
View file

@ -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"

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

@ -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" />

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

@ -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 ? (
<>

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

@ -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 ? (
<>

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

@ -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}

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

@ -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."
: "This will remove all indexed data."}
? "Your agent will lose access to this service"
: "This will remove all indexed data"}
</span>
<div className="flex items-center gap-2 sm:gap-3">
<Button

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

@ -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

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

@ -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

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

@ -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}
>
@ -275,21 +275,20 @@ export const ConnectorAccountsListView: FC<ConnectorAccountsListViewProps> = ({
</Button>
</div>
) : (
<Button
variant="secondary"
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"
onClick={() => setConfirmDisconnectId(connector.id)}
>
<Trash2 className="size-3.5" />
Disconnect
</Button>
<Button
variant="destructive"
size="sm"
className="h-8 text-[11px] px-3 font-medium shrink-0"
onClick={() => setConfirmDisconnectId(connector.id)}
>
Disconnect
</Button>
)
) : (
<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

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

@ -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}

12
surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
View file

@ -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" />}

2
surfsense_web/components/new-chat/chat-share-button.tsx
View file

@ -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

4
surfsense_web/components/new-chat/document-mention-picker.tsx
View file

@ -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

18
surfsense_web/components/new-chat/model-selector.tsx
View file

@ -840,8 +840,8 @@ export function ModelSelector({
return (
<div
className={cn(
"shrink-0 border-border/50 flex relative",
isMobile ? "flex-row items-center border-b border-border/40" : "flex-col w-10 border-r"
"shrink-0 border-popover-border flex relative",
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 && (
<>

2
surfsense_web/components/new-chat/prompt-picker.tsx
View file

@ -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);

2
surfsense_web/components/ui/command.tsx
View file

@ -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}
/>
);

2
surfsense_web/components/ui/context-menu.tsx
View file

@ -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}
/>
);

2
surfsense_web/components/ui/dropdown-menu.tsx
View file

@ -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}
/>
);

2
surfsense_web/components/ui/select.tsx
View file

@ -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}
/>
);

3
surfsense_web/components/ui/toolbar.tsx
View file

@ -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",
"dark:bg-neutral-700"
"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"
)}
/>