From 6aa4dcef60c8f98b35e709f68a5d8bf98932886e Mon Sep 17 00:00:00 2001 From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com> Date: Wed, 13 May 2026 16:46:35 +0530 Subject: [PATCH] refactor: update UI components to use consistent popup and text colors --- .../[search_space_id]/team/team-content.tsx | 2 +- surfsense_web/app/layout.tsx | 2 +- .../announcements/AnnouncementsDialog.tsx | 2 +- .../assistant-ui/assistant-message.tsx | 2 +- .../assistant-ui/connector-popup.tsx | 2 +- .../assistant-ui/document-upload-popup.tsx | 4 +- .../components/documents/version-history.tsx | 2 +- .../free-chat/free-model-selector.tsx | 2 +- .../components/inference-params-editor.tsx | 2 +- .../components/new-chat/chat-share-button.tsx | 2 +- .../new-chat/document-mention-picker.tsx | 2 +- .../components/new-chat/model-selector.tsx | 2 +- .../components/new-chat/prompt-picker.tsx | 2 +- surfsense_web/components/onboarding-tour.tsx | 76 +++---------------- .../providers/GlobalLoadingProvider.tsx | 2 +- .../components/settings/settings-dialog.tsx | 2 +- .../components/settings/team-dialog.tsx | 2 +- .../components/shared/llm-config-form.tsx | 7 +- .../shared/vision-config-dialog.tsx | 5 +- .../components/sources/FolderWatchDialog.tsx | 2 +- surfsense_web/components/ui/alert-dialog.tsx | 2 +- surfsense_web/components/ui/context-menu.tsx | 4 +- surfsense_web/components/ui/dialog.tsx | 2 +- surfsense_web/components/ui/dropdown-menu.tsx | 4 +- surfsense_web/components/ui/equation-node.tsx | 2 +- .../components/ui/floating-toolbar.tsx | 2 +- surfsense_web/components/ui/link-toolbar.tsx | 2 +- surfsense_web/components/ui/popover.tsx | 2 +- surfsense_web/components/ui/select.tsx | 2 +- surfsense_web/components/ui/sheet.tsx | 10 +-- surfsense_web/components/ui/table-node.tsx | 2 +- 31 files changed, 50 insertions(+), 108 deletions(-) diff --git a/surfsense_web/app/dashboard/[search_space_id]/team/team-content.tsx b/surfsense_web/app/dashboard/[search_space_id]/team/team-content.tsx index d9ca9efb3..f6668957b 100644 --- a/surfsense_web/app/dashboard/[search_space_id]/team/team-content.tsx +++ b/surfsense_web/app/dashboard/[search_space_id]/team/team-content.tsx @@ -493,7 +493,7 @@ function MemberRow({ e.preventDefault()} - className="min-w-[120px] dark:bg-neutral-900 dark:border dark:border-white/5" + className="min-w-[120px]" > {canManageRoles && roles diff --git a/surfsense_web/app/layout.tsx b/surfsense_web/app/layout.tsx index 144968a2b..3a61069c2 100644 --- a/surfsense_web/app/layout.tsx +++ b/surfsense_web/app/layout.tsx @@ -137,7 +137,7 @@ export default function RootLayout({ - + diff --git a/surfsense_web/components/announcements/AnnouncementsDialog.tsx b/surfsense_web/components/announcements/AnnouncementsDialog.tsx index 4d3aaeb73..d624444c4 100644 --- a/surfsense_web/components/announcements/AnnouncementsDialog.tsx +++ b/surfsense_web/components/announcements/AnnouncementsDialog.tsx @@ -22,7 +22,7 @@ export function AnnouncementsDialog() { return ( - + What's New
diff --git a/surfsense_web/components/assistant-ui/assistant-message.tsx b/surfsense_web/components/assistant-ui/assistant-message.tsx index 00f3acebf..0e0f47bb1 100644 --- a/surfsense_web/components/assistant-ui/assistant-message.tsx +++ b/surfsense_web/components/assistant-ui/assistant-message.tsx @@ -311,7 +311,7 @@ const MessageInfoDropdown: FC = () => { {createdAt && ( diff --git a/surfsense_web/components/assistant-ui/connector-popup.tsx b/surfsense_web/components/assistant-ui/connector-popup.tsx index 32943142a..52004159a 100644 --- a/surfsense_web/components/assistant-ui/connector-popup.tsx +++ b/surfsense_web/components/assistant-ui/connector-popup.tsx @@ -219,7 +219,7 @@ export const ConnectorIndicator = forwardRef { if (pickerOpen) e.preventDefault(); }} - className="max-w-3xl w-[95vw] sm:w-full h-[75vh] sm:h-[85vh] flex flex-col p-0 gap-0 overflow-hidden border border-border ring-0 dark:ring-0 bg-muted dark:bg-muted text-foreground [&>button]:right-4 sm:[&>button]:right-12 [&>button]:top-6 sm:[&>button]:top-10 [&>button]:opacity-80 [&>button]:hover:opacity-100 [&>button]:hover:bg-foreground/10 [&>button>svg]:size-5 select-none" + className="max-w-3xl w-[95vw] sm:w-full h-[75vh] sm:h-[85vh] flex flex-col p-0 gap-0 overflow-hidden ring-0 dark:ring-0 [&>button]:right-4 sm:[&>button]:right-12 [&>button]:top-6 sm:[&>button]:top-10 [&>button]:opacity-80 [&>button]:hover:opacity-100 [&>button]:hover:bg-foreground/10 [&>button>svg]:size-5 select-none" > Manage Connectors {/* YouTube Crawler View - shown when adding YouTube videos */} diff --git a/surfsense_web/components/assistant-ui/document-upload-popup.tsx b/surfsense_web/components/assistant-ui/document-upload-popup.tsx index 561dc55b4..56cd533ee 100644 --- a/surfsense_web/components/assistant-ui/document-upload-popup.tsx +++ b/surfsense_web/components/assistant-ui/document-upload-popup.tsx @@ -133,10 +133,10 @@ const DocumentUploadPopupContent: FC<{ onPointerDownOutside={(e) => e.preventDefault()} onInteractOutside={(e) => e.preventDefault()} onEscapeKeyDown={(e) => e.preventDefault()} - className="select-none max-w-2xl w-[95vw] sm:w-[640px] h-[min(440px,75dvh)] sm:h-[min(520px,80vh)] flex flex-col p-0 gap-0 overflow-hidden border border-border ring-0 bg-muted dark:bg-muted text-foreground [&>button]:right-3 sm:[&>button]:right-6 [&>button]:top-5 sm:[&>button]:top-8 [&>button]:opacity-80 [&>button]:hover:opacity-100 [&>button]:hover:bg-foreground/10 [&>button]:z-[100] [&>button>svg]:size-4 sm:[&>button>svg]:size-5" + className="select-none max-w-2xl w-[95vw] sm:w-[640px] h-[min(440px,75dvh)] sm:h-[min(520px,80vh)] flex flex-col p-0 gap-0 overflow-hidden ring-0 [&>button]:right-3 sm:[&>button]:right-6 [&>button]:top-5 sm:[&>button]:top-8 [&>button]:opacity-80 [&>button]:hover:opacity-100 [&>button]:hover:bg-foreground/10 [&>button]:z-[100] [&>button>svg]:size-4 sm:[&>button>svg]:size-5" >
- + Upload Documents diff --git a/surfsense_web/components/documents/version-history.tsx b/surfsense_web/components/documents/version-history.tsx index 27343dc6a..ba6f368cd 100644 --- a/surfsense_web/components/documents/version-history.tsx +++ b/surfsense_web/components/documents/version-history.tsx @@ -29,7 +29,7 @@ export function isVersionableType(documentType: string) { } const DIALOG_CLASSES = - "select-none max-w-[900px] w-[95vw] md:w-[90vw] h-[90vh] md:h-[80vh] max-h-[640px] flex flex-col md:flex-row p-0 gap-0 overflow-hidden [--card:var(--background)] dark:[--card:oklch(0.205_0_0)] dark:[--background:oklch(0.205_0_0)]"; + "select-none max-w-[900px] w-[95vw] md:w-[90vw] h-[90vh] md:h-[80vh] max-h-[640px] flex flex-col md:flex-row p-0 gap-0 overflow-hidden [--card:var(--popover)]"; export function VersionHistoryButton({ documentId, documentType }: VersionHistoryProps) { if (!isVersionableType(documentType)) return null; diff --git a/surfsense_web/components/free-chat/free-model-selector.tsx b/surfsense_web/components/free-chat/free-model-selector.tsx index 14005fe3d..b32bd0a9a 100644 --- a/surfsense_web/components/free-chat/free-model-selector.tsx +++ b/surfsense_web/components/free-chat/free-model-selector.tsx @@ -122,7 +122,7 @@ export function FreeModelSelector({ className }: { className?: string }) { e.preventDefault()} diff --git a/surfsense_web/components/inference-params-editor.tsx b/surfsense_web/components/inference-params-editor.tsx index 3764b1dac..c656c2020 100644 --- a/surfsense_web/components/inference-params-editor.tsx +++ b/surfsense_web/components/inference-params-editor.tsx @@ -76,7 +76,7 @@ export default function InferenceParamsEditor({ params, setParams }: InferencePa - + {PARAM_KEYS.map((key) => ( {key} diff --git a/surfsense_web/components/new-chat/chat-share-button.tsx b/surfsense_web/components/new-chat/chat-share-button.tsx index bacde9c75..56c7c4bdb 100644 --- a/surfsense_web/components/new-chat/chat-share-button.tsx +++ b/surfsense_web/components/new-chat/chat-share-button.tsx @@ -173,7 +173,7 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS e.preventDefault()} diff --git a/surfsense_web/components/new-chat/document-mention-picker.tsx b/surfsense_web/components/new-chat/document-mention-picker.tsx index 0881b11b6..003b604dd 100644 --- a/surfsense_web/components/new-chat/document-mention-picker.tsx +++ b/surfsense_web/components/new-chat/document-mention-picker.tsx @@ -428,7 +428,7 @@ export const DocumentMentionPicker = forwardRef< return (
{triggerButton} e.preventDefault()} diff --git a/surfsense_web/components/new-chat/prompt-picker.tsx b/surfsense_web/components/new-chat/prompt-picker.tsx index 9c3cd1d9f..9b3a448bb 100644 --- a/surfsense_web/components/new-chat/prompt-picker.tsx +++ b/surfsense_web/components/new-chat/prompt-picker.tsx @@ -112,7 +112,7 @@ export const PromptPicker = forwardRef(funct ); return ( -
+
{isLoading ? (
diff --git a/surfsense_web/components/onboarding-tour.tsx b/surfsense_web/components/onboarding-tour.tsx index 178b6c97e..86caaf543 100644 --- a/surfsense_web/components/onboarding-tour.tsx +++ b/surfsense_web/components/onboarding-tour.tsx @@ -178,10 +178,6 @@ function TourTooltip({ const isLastStep = stepIndex === totalSteps - 1; const isFirstStep = stepIndex === 0; - const bgColor = isDarkMode ? "#27272a" : "#ffffff"; - const textColor = isDarkMode ? "#ffffff" : "#18181b"; - const mutedTextColor = isDarkMode ? "#a1a1aa" : "#71717a"; - // Calculate pointer line position const getPointerStyles = (): React.CSSProperties => { const lineLength = 16; @@ -224,68 +220,27 @@ function TourTooltip({ }; const renderPointer = () => { - const lineColor = isDarkMode ? "#27272a" : "#ffffff"; - if (position.pointerPosition === "left") { return (
-
-
+
+
); } if (position.pointerPosition === "right") { return (
-
-
+
+
); } if (position.pointerPosition === "top") { return (
-
-
+
+
); } @@ -338,10 +293,8 @@ function TourTooltip({ {renderPointer()}
-

+

{step.title}

-

- {step.content} -

+

{step.content}

{/* Footer */} @@ -377,8 +328,7 @@ function TourTooltip({ e.stopPropagation(); onPrev(); }} - className="text-sm font-medium transition-opacity hover:opacity-80" - style={{ color: mutedTextColor }} + className="text-sm font-medium text-muted-foreground transition-opacity hover:opacity-80" > Back @@ -390,8 +340,7 @@ function TourTooltip({ e.stopPropagation(); onSkip(); }} - className="text-sm font-medium transition-opacity hover:opacity-80" - style={{ color: mutedTextColor }} + className="text-sm font-medium text-muted-foreground transition-opacity hover:opacity-80" > Skip @@ -402,8 +351,7 @@ function TourTooltip({ e.stopPropagation(); onNext(); }} - className="text-sm font-medium transition-opacity hover:opacity-80" - style={{ color: textColor }} + className="text-sm font-medium text-foreground transition-opacity hover:opacity-80" > {isLastStep ? "Done" : "Next"} diff --git a/surfsense_web/components/providers/GlobalLoadingProvider.tsx b/surfsense_web/components/providers/GlobalLoadingProvider.tsx index 08c888954..c0fa8e4d3 100644 --- a/surfsense_web/components/providers/GlobalLoadingProvider.tsx +++ b/surfsense_web/components/providers/GlobalLoadingProvider.tsx @@ -34,7 +34,7 @@ export function GlobalLoadingProvider({ children }: { children: React.ReactNode )} aria-hidden={!isLoading} > -
+
diff --git a/surfsense_web/components/settings/settings-dialog.tsx b/surfsense_web/components/settings/settings-dialog.tsx index 057d7643a..ff7c4e675 100644 --- a/surfsense_web/components/settings/settings-dialog.tsx +++ b/surfsense_web/components/settings/settings-dialog.tsx @@ -48,7 +48,7 @@ export function SettingsDialog({ return ( - + {title} {/* Desktop: Left sidebar */} diff --git a/surfsense_web/components/settings/team-dialog.tsx b/surfsense_web/components/settings/team-dialog.tsx index a3a962378..22c2a0eda 100644 --- a/surfsense_web/components/settings/team-dialog.tsx +++ b/surfsense_web/components/settings/team-dialog.tsx @@ -17,7 +17,7 @@ export function TeamDialog({ searchSpaceId }: TeamDialogProps) { return ( e.preventDefault()} > {t("manage_members")} diff --git a/surfsense_web/components/shared/llm-config-form.tsx b/surfsense_web/components/shared/llm-config-form.tsx index 732bf971e..580b7b027 100644 --- a/surfsense_web/components/shared/llm-config-form.tsx +++ b/surfsense_web/components/shared/llm-config-form.tsx @@ -202,7 +202,7 @@ export function LLMConfigForm({ - + {LLM_PROVIDERS.map((provider) => ( - + - + - + Watch Local Folder diff --git a/surfsense_web/components/ui/alert-dialog.tsx b/surfsense_web/components/ui/alert-dialog.tsx index 21632ca18..4db90020f 100644 --- a/surfsense_web/components/ui/alert-dialog.tsx +++ b/surfsense_web/components/ui/alert-dialog.tsx @@ -45,7 +45,7 @@ function AlertDialogContent({