From 76cfb5ad310fa14199aa7fa4d0778a9eb03ca9b5 Mon Sep 17 00:00:00 2001 From: Emir Karabeg Date: Mon, 15 Dec 2025 21:34:11 -0800 Subject: [PATCH 01/12] feat(light): restored light theme --- .../app/_shell/providers/theme-provider.tsx | 6 +- .../components/general/general.tsx | 122 +++++++++--------- .../settings-modal/settings-modal.tsx | 3 +- apps/sim/hooks/queries/general-settings.ts | 4 +- apps/sim/lib/core/utils/theme.ts | 20 +-- 5 files changed, 76 insertions(+), 79 deletions(-) diff --git a/apps/sim/app/_shell/providers/theme-provider.tsx b/apps/sim/app/_shell/providers/theme-provider.tsx index a6bc5444e0..cbb31e4423 100644 --- a/apps/sim/app/_shell/providers/theme-provider.tsx +++ b/apps/sim/app/_shell/providers/theme-provider.tsx @@ -7,7 +7,7 @@ import { ThemeProvider as NextThemesProvider } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { const pathname = usePathname() - // Force light mode on public/marketing pages, dark mode everywhere else + // Force light mode on public/marketing pages, allow user preference elsewhere const isLightModePage = pathname === '/' || pathname.startsWith('/login') || @@ -27,10 +27,10 @@ export function ThemeProvider({ children, ...props }: ThemeProviderProps) { {children} diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/general/general.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/general/general.tsx index 8cdf8c5412..e98fc8eb3c 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/general/general.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/general/general.tsx @@ -6,6 +6,7 @@ import Image from 'next/image' import { useRouter } from 'next/navigation' import { Button, + Combobox, Label, Modal, ModalBody, @@ -43,6 +44,62 @@ function getInitials(name: string | undefined | null): string { return parts[0][0].toUpperCase() } +/** + * Skeleton component for general settings loading state. + * Matches the exact layout structure of the General component. + */ +function GeneralSkeleton() { + return ( +
+ {/* User Info Section */} +
+ +
+
+ + +
+ +
+
+ + {/* Theme selector row */} +
+ + +
+ + {/* Auto-connect row */} +
+ + +
+ + {/* Error notifications row */} +
+ + +
+ + {/* Telemetry row */} +
+ + +
+ + {/* Telemetry description */} + + + + {/* Action buttons */} +
+ + +
+
+ ) +} + interface GeneralProps { onOpenChange?: (open: boolean) => void } @@ -400,7 +457,7 @@ export function General({ onOpenChange }: GeneralProps) { {uploadError &&

{uploadError}

} - {/*
+
-
*/} +
@@ -536,63 +593,4 @@ export function General({ onOpenChange }: GeneralProps) {
) -} - -/** - * Skeleton component for general settings loading state. - * Matches the exact layout structure of the General component. - */ -function GeneralSkeleton() { - return ( -
- {/* User Info Section */} -
- -
-
- - -
- -
-
- - {/* Auto-connect row */} -
- - -
- - {/* Snap to grid row */} -
- -
- - -
-
- - {/* Error notifications row */} -
- - -
- - {/* Telemetry row */} -
- - -
- - {/* Telemetry description */} - - - - {/* Action buttons */} -
- - -
-
- ) -} +} \ No newline at end of file diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/settings-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/settings-modal.tsx index b318006e96..c0f5fb0ed8 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/settings-modal.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/settings-modal.tsx @@ -308,8 +308,7 @@ export function SettingsModal({ open, onOpenChange }: SettingsModalProps) { autoConnect: data.autoConnect ?? true, showTrainingControls: data.showTrainingControls ?? false, superUserModeEnabled: data.superUserModeEnabled ?? true, - // Force dark mode - light mode is temporarily disabled - theme: 'dark' as const, + theme: data.theme || 'system', telemetryEnabled: data.telemetryEnabled ?? true, billingUsageNotificationsEnabled: data.billingUsageNotificationsEnabled ?? true, } diff --git a/apps/sim/hooks/queries/general-settings.ts b/apps/sim/hooks/queries/general-settings.ts index 529bf4ccbe..9e279b4dc9 100644 --- a/apps/sim/hooks/queries/general-settings.ts +++ b/apps/sim/hooks/queries/general-settings.ts @@ -43,9 +43,7 @@ async function fetchGeneralSettings(): Promise { autoConnect: data.autoConnect ?? true, showTrainingControls: data.showTrainingControls ?? false, superUserModeEnabled: data.superUserModeEnabled ?? true, - // theme: data.theme || 'system', - // Force dark mode - light mode is temporarily disabled (TODO: Remove this) - theme: 'dark' as const, + theme: data.theme || 'system', telemetryEnabled: data.telemetryEnabled ?? true, billingUsageNotificationsEnabled: data.billingUsageNotificationsEnabled ?? true, errorNotificationsEnabled: data.errorNotificationsEnabled ?? true, diff --git a/apps/sim/lib/core/utils/theme.ts b/apps/sim/lib/core/utils/theme.ts index 2102a3f7c0..3849a9e59a 100644 --- a/apps/sim/lib/core/utils/theme.ts +++ b/apps/sim/lib/core/utils/theme.ts @@ -5,21 +5,17 @@ /** * Updates the theme in next-themes by dispatching a storage event. * This works by updating localStorage and notifying next-themes of the change. - * NOTE: Light mode is temporarily disabled - this function always forces dark mode. - * @param _theme - The theme parameter (currently ignored, dark mode is forced) + * @param theme - The desired theme ('system', 'light', or 'dark') */ -export function syncThemeToNextThemes(_theme: 'system' | 'light' | 'dark') { +export function syncThemeToNextThemes(theme: 'system' | 'light' | 'dark') { if (typeof window === 'undefined') return - // Force dark mode - light mode is temporarily disabled - const forcedTheme = 'dark' - - localStorage.setItem('sim-theme', forcedTheme) + localStorage.setItem('sim-theme', theme) window.dispatchEvent( new StorageEvent('storage', { key: 'sim-theme', - newValue: forcedTheme, + newValue: theme, oldValue: localStorage.getItem('sim-theme'), storageArea: localStorage, url: window.location.href, @@ -28,7 +24,13 @@ export function syncThemeToNextThemes(_theme: 'system' | 'light' | 'dark') { const root = document.documentElement root.classList.remove('light', 'dark') - root.classList.add('dark') + + if (theme === 'system') { + const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' + root.classList.add(systemTheme) + } else { + root.classList.add(theme) + } } /** From e276a432ef1797f31235fb0f0570eaeaf4bd7629 Mon Sep 17 00:00:00 2001 From: Emir Karabeg Date: Thu, 18 Dec 2025 13:28:43 -0800 Subject: [PATCH 02/12] feat: styling consolidation, note block upgrades --- apps/sim/app/_styles/globals.css | 188 +++++++----------- apps/sim/app/playground/page.tsx | 4 +- apps/sim/app/templates/[id]/template.tsx | 2 +- .../templates/components/template-card.tsx | 4 +- apps/sim/app/templates/templates.tsx | 2 +- .../knowledge/[id]/[documentId]/document.tsx | 4 +- .../[workspaceId]/knowledge/[id]/base.tsx | 4 +- .../[id]/components/action-bar/action-bar.tsx | 20 +- .../components/base-card/base-card.tsx | 18 +- .../create-base-modal/create-base-modal.tsx | 2 +- .../[workspaceId]/knowledge/knowledge.tsx | 2 +- .../app/workspace/[workspaceId]/layout.tsx | 2 +- .../components/trace-spans/trace-spans.tsx | 16 +- .../notifications/notifications.tsx | 4 +- .../logs-toolbar/components/search/search.tsx | 14 +- .../templates/components/template-card.tsx | 4 +- .../[workspaceId]/templates/templates.tsx | 2 +- .../w/[workflowId]/components/chat/chat.tsx | 2 +- .../components/chat-message/chat-message.tsx | 2 +- .../diff-controls/diff-controls.tsx | 2 +- .../components/note-block/note-block.tsx | 126 +++++++----- .../components/markdown-renderer.tsx | 4 +- .../copilot-message/copilot-message.tsx | 8 +- .../plan-mode-section/plan-mode-section.tsx | 6 +- .../components/todo-list/todo-list.tsx | 4 +- .../components/user-input/user-input.tsx | 2 +- .../panel/components/copilot/copilot.tsx | 2 +- .../deploy-modal/components/chat/chat.tsx | 6 +- .../components/field-item/field-item.tsx | 28 +-- .../connection-blocks/connection-blocks.tsx | 78 +------- .../components/oauth-required-modal.tsx | 4 +- .../components/file-upload/file-upload.tsx | 4 +- .../grouped-checkbox-list.tsx | 4 +- .../components/long-input/long-input.tsx | 2 +- .../messages-input/messages-input.tsx | 4 +- .../custom-tool-modal/custom-tool-modal.tsx | 10 +- .../components/tool-command/tool-command.tsx | 4 +- .../components/tool-input/tool-input.tsx | 4 +- .../panel/components/editor/editor.tsx | 4 +- .../panel/components/toolbar/toolbar.tsx | 18 +- .../w/[workflowId]/components/panel/panel.tsx | 6 +- .../components/terminal/terminal.tsx | 4 +- .../training-modal/training-modal.tsx | 6 +- .../components/action-bar/action-bar.tsx | 110 +++++----- .../[workspaceId]/w/[workflowId]/layout.tsx | 2 +- .../[workspaceId]/w/[workflowId]/workflow.tsx | 32 ++- .../components/search-modal/search-modal.tsx | 4 +- .../components/api-keys/api-keys.tsx | 2 +- .../components/copilot/copilot.tsx | 2 +- .../components/custom-tools/custom-tools.tsx | 2 +- .../components/environment/environment.tsx | 2 +- .../settings-modal/components/files/files.tsx | 2 +- .../components/general/general.tsx | 10 +- .../components/integrations/integrations.tsx | 10 +- .../settings-modal/components/mcp/mcp.tsx | 2 +- .../credit-balance/credit-balance.tsx | 6 +- .../template-profile/template-profile.tsx | 2 +- .../components/folder-item/folder-item.tsx | 13 +- .../workflow-item/workflow-item.tsx | 6 +- .../workflow-list/workflow-list.tsx | 91 ++------- .../invite-modal/components/email-tag.tsx | 2 +- .../components/invite-modal/invite-modal.tsx | 2 +- .../workspace-header/workspace-header.tsx | 2 +- .../w/components/sidebar/sidebar.tsx | 6 +- .../workflow-preview/workflow-preview.tsx | 2 +- .../app/workspace/[workspaceId]/w/page.tsx | 6 +- apps/sim/blocks/blocks/note.ts | 22 +- .../emcn/components/badge/badge.tsx | 4 +- .../emcn/components/button/button.tsx | 21 +- .../emcn/components/combobox/combobox.tsx | 4 +- .../emcn/components/input/input.tsx | 2 +- .../emcn/components/modal/modal.tsx | 2 +- .../emcn/components/popover/popover.tsx | 8 +- .../emcn/components/s-modal/s-modal.tsx | 2 +- .../emcn/components/textarea/textarea.tsx | 2 +- apps/sim/components/ui/checkbox.tsx | 2 +- apps/sim/components/ui/switch.tsx | 2 +- apps/sim/components/ui/tag-input.tsx | 4 +- apps/sim/stores/panel/editor/store.ts | 2 +- 79 files changed, 452 insertions(+), 579 deletions(-) diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css index f67e27e375..428fde30b1 100644 --- a/apps/sim/app/_styles/globals.css +++ b/apps/sim/app/_styles/globals.css @@ -26,41 +26,6 @@ height: var(--terminal-height); } -/** - * Workflow component z-index fixes and background colors - */ -.workflow-container .react-flow__edges { - z-index: 0 !important; -} - -.workflow-container .react-flow__node { - z-index: 21 !important; -} - -.workflow-container .react-flow__handle { - z-index: 30 !important; -} - -.workflow-container .react-flow__edge [data-testid="workflow-edge"] { - z-index: 0 !important; -} - -.workflow-container .react-flow__edge-labels { - z-index: 60 !important; -} - -.workflow-container, -.workflow-container .react-flow__pane, -.workflow-container .react-flow__renderer { - background-color: var(--bg) !important; -} - -.dark .workflow-container, -.dark .workflow-container .react-flow__pane, -.dark .workflow-container .react-flow__renderer { - background-color: var(--bg) !important; -} - /** * Landing loop animation styles (keyframes defined in tailwind.config.ts) */ @@ -80,38 +45,38 @@ @layer base { :root, .light { - /* Neutrals (surfaces) - shadcn stone palette */ - --bg: #ffffff; /* pure white for landing/auth pages */ - --surface-1: #fafaf9; /* stone-50 */ - --surface-2: #ffffff; /* white */ - --surface-3: #f5f5f4; /* stone-100 */ - --surface-4: #f5f5f4; /* stone-100 */ - --surface-5: #eeedec; /* stone-150 */ - --surface-6: #f5f5f4; /* stone-100 */ - --surface-9: #f5f5f4; /* stone-100 */ - --surface-11: #e7e5e4; /* stone-200 */ - --surface-12: #d6d3d1; /* stone-300 */ - --surface-13: #a8a29e; /* stone-400 */ - --surface-14: #78716c; /* stone-500 */ - --surface-15: #57534e; /* stone-600 */ - --surface-elevated: #ffffff; /* white */ - --bg-strong: #e7e5e4; /* stone-200 */ - - /* Text - shadcn stone palette for proper contrast */ - --text-primary: #1c1917; /* stone-900 */ - --text-secondary: #292524; /* stone-800 */ - --text-tertiary: #57534e; /* stone-600 */ - --text-muted: #78716c; /* stone-500 */ - --text-subtle: #a8a29e; /* stone-400 */ - --text-inverse: #fafaf9; /* stone-50 */ + /* Neutrals (surfaces) - Hex-inspired white theme */ + --surface-0: #ffffff; /* white canvas bg, modal header/droparea */ + --surface-1: #ffffff; /* white sidebar (primary) */ + --surface-2: #ffffff; /* white workflow blocks, modals (card) */ + --surface-3: #ffffff; /* white */ + --surface-4: #ffffff; /* white */ + --surface-5: #ffffff; /* subtle off-white for search, buttons, badges (card-2) */ + --surface-6: #ffffff; /* white */ + --surface-9: #f2f2f2; /* visible gray for active states, textarea bg (card-3) */ + --surface-11: #e8e8e8; /* deeper gray */ + --surface-12: #dedede; /* even deeper */ + --surface-13: #a3a3a3; /* muted gray */ + --surface-14: #737373; /* darker gray */ + --surface-15: #525252; /* darkest gray */ + --surface-elevated: #ffffff; /* white elevated */ + --bg-strong: #e8e8e8; /* strong bg element */ + + /* Text - neutral grays for Hex-inspired theme */ + --text-primary: #171717; /* near black */ + --text-secondary: #1f1f1f; /* dark gray */ + --text-tertiary: #404040; /* medium gray */ + --text-muted: #5c5c5c; /* muted gray */ + --text-subtle: #8a8a8a; /* subtle gray */ + --text-inverse: #fafafa; /* near white */ --text-error: #dc2626; - /* Borders / dividers - shadcn stone palette */ - --border: #d6d3d1; /* stone-300 */ - --border-strong: #d6d3d1; /* stone-300 */ - --divider: #e7e5e4; /* stone-200 */ - --border-muted: #e7e5e4; /* stone-200 */ - --border-success: #d6d3d1; /* stone-300 */ + /* Borders / dividers - Hex-inspired neutral grays */ + --border: #e5e5e5; /* neutral gray border */ + --border-strong: #d4d4d4; /* stronger border */ + --divider: #ebebeb; /* subtle divider */ + --border-muted: #ebebeb; /* muted border */ + --border-success: #d4d4d4; /* success border */ /* Brand & state */ --brand-400: #8e4cfb; @@ -129,47 +94,47 @@ --font-weight-medium: 450; --font-weight-semibold: 500; - /* RGB for opacity usage - stone palette */ - --surface-4-rgb: 245 245 244; /* stone-100 */ - --surface-5-rgb: 238 237 236; /* stone-150 */ - --surface-7-rgb: 245 245 244; /* stone-100 */ - --surface-9-rgb: 245 245 244; /* stone-100 */ - --divider-rgb: 231 229 228; /* stone-200 */ + /* RGB for opacity usage - neutral grays */ + --surface-4-rgb: 255 255 255; /* white */ + --surface-5-rgb: 248 248 248; /* subtle off-white */ + --surface-7-rgb: 255 255 255; /* white */ + --surface-9-rgb: 242 242 242; /* active state gray */ + --divider-rgb: 235 235 235; /* divider gray */ --white-rgb: 255 255 255; --black-rgb: 0 0 0; - /* Extended palette - mapped to shadcn stone palette */ - --c-0D0D0D: #0c0a09; /* stone-950 */ - --c-1A1A1A: #1c1917; /* stone-900 */ - --c-1F1F1F: #1c1917; /* stone-900 */ - --c-2A2A2A: #292524; /* stone-800 */ - --c-383838: #44403c; /* stone-700 */ - --c-414141: #57534e; /* stone-600 */ + /* Extended palette - neutral grays for Hex-inspired theme */ + --c-0D0D0D: #0d0d0d; /* near black */ + --c-1A1A1A: #1a1a1a; /* very dark gray */ + --c-1F1F1F: #1f1f1f; /* very dark gray */ + --c-2A2A2A: #2a2a2a; /* dark gray */ + --c-383838: #383838; /* dark gray */ + --c-414141: #414141; /* medium-dark gray */ --c-442929: #442929; --c-491515: #491515; - --c-575757: #78716c; /* stone-500 */ - --c-686868: #78716c; /* stone-500 */ - --c-707070: #78716c; /* stone-500 */ - --c-727272: #78716c; /* stone-500 */ - --c-737373: #78716c; /* stone-500 */ - --c-808080: #a8a29e; /* stone-400 */ - --c-858585: #a8a29e; /* stone-400 */ - --c-868686: #a8a29e; /* stone-400 */ - --c-8D8D8D: #a8a29e; /* stone-400 */ - --c-939393: #a8a29e; /* stone-400 */ - --c-A8A8A8: #a8a29e; /* stone-400 */ - --c-B8B8B8: #d6d3d1; /* stone-300 */ - --c-C0C0C0: #d6d3d1; /* stone-300 */ - --c-CDCDCD: #d6d3d1; /* stone-300 */ - --c-D0D0D0: #d6d3d1; /* stone-300 */ - --c-D2D2D2: #d6d3d1; /* stone-300 */ - --c-E0E0E0: #e7e5e4; /* stone-200 */ - --c-E5E5E5: #e7e5e4; /* stone-200 */ - --c-E8E8E8: #e7e5e4; /* stone-200 */ - --c-EEEEEE: #f5f5f4; /* stone-100 */ - --c-F0F0F0: #f5f5f4; /* stone-100 */ - --c-F4F4F4: #fafaf9; /* stone-50 */ - --c-F5F5F5: #fafaf9; /* stone-50 */ + --c-575757: #575757; /* medium gray */ + --c-686868: #686868; /* medium gray */ + --c-707070: #707070; /* medium gray */ + --c-727272: #727272; /* medium gray */ + --c-737373: #737373; /* medium gray */ + --c-808080: #808080; /* gray */ + --c-858585: #858585; /* gray */ + --c-868686: #868686; /* gray */ + --c-8D8D8D: #8d8d8d; /* gray */ + --c-939393: #939393; /* gray */ + --c-A8A8A8: #a8a8a8; /* light gray */ + --c-B8B8B8: #b8b8b8; /* light gray */ + --c-C0C0C0: #c0c0c0; /* light gray */ + --c-CDCDCD: #cdcdcd; /* light gray */ + --c-D0D0D0: #d0d0d0; /* light gray */ + --c-D2D2D2: #d2d2d2; /* light gray */ + --c-E0E0E0: #e0e0e0; /* very light gray */ + --c-E5E5E5: #e5e5e5; /* very light gray */ + --c-E8E8E8: #e8e8e8; /* very light gray */ + --c-EEEEEE: #eeeeee; /* near white */ + --c-F0F0F0: #f0f0f0; /* near white */ + --c-F4F4F4: #f4f4f4; /* near white */ + --c-F5F5F5: #f5f5f5; /* near white */ /* Blues and cyans */ --c-00B0B0: #00b0b0; @@ -211,15 +176,14 @@ --terminal-status-warning-color: #a16207; } .dark { - /* Neutrals (surfaces) */ - --bg: #1b1b1b; + /* Surface */ + --surface-0: #1b1b1b; --surface-1: #1e1e1e; --surface-2: #232323; --surface-3: #242424; - --surface-4: #252525; - --surface-5: #272727; - --surface-6: #282828; - --surface-9: #363636; + --surface-4: #272727; + --border: #2c2c2c; + --surface-5: #363636; --surface-11: #3d3d3d; --surface-12: #434343; --surface-13: #454545; @@ -238,7 +202,7 @@ --text-error: #ef4444; /* Borders / dividers */ - --border: #2c2c2c; + --border-strong: #303030; --divider: #393939; --border-muted: #424242; @@ -359,7 +323,7 @@ } body { - background-color: var(--bg); + background-color: var(--surface-0); color: var(--text-primary); overscroll-behavior-x: none; overscroll-behavior-y: none; @@ -405,7 +369,7 @@ /* Dark Mode Global Scrollbar */ .dark ::-webkit-scrollbar-track { - background: var(--surface-5); + background: var(--surface-4); } .dark ::-webkit-scrollbar-thumb { @@ -422,7 +386,7 @@ } .dark * { - scrollbar-color: var(--surface-12) var(--surface-5); + scrollbar-color: var(--surface-12) var(--surface-4); } .copilot-scrollable { @@ -450,7 +414,7 @@ } .panel-tab-inactive:hover { - background-color: var(--surface-9); + background-color: var(--surface-5); color: var(--text-primary); } diff --git a/apps/sim/app/playground/page.tsx b/apps/sim/app/playground/page.tsx index 7a3804211a..7fdb7c3cf7 100644 --- a/apps/sim/app/playground/page.tsx +++ b/apps/sim/app/playground/page.tsx @@ -120,7 +120,7 @@ export default function PlaygroundPage() { return ( -
+
- - Enable {disabledCount > 1 ? `${disabledCount} items` : 'item'} - + Enable )} @@ -72,14 +70,12 @@ export function ActionBar({ variant='ghost' onClick={onDisable} disabled={isLoading} - className='hover:!text-[var(--text-inverse)] h-[28px] w-[28px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)]' + className='hover:!text-[var(--text-inverse)] h-[28px] w-[28px] rounded-[8px] bg-[var(--surface-5)] p-0 text-[var(--text-secondary)] hover:bg-[var(--brand-secondary)]' > - - Disable {enabledCount > 1 ? `${enabledCount} items` : 'item'} - + Disable )} @@ -90,12 +86,12 @@ export function ActionBar({ variant='ghost' onClick={onDelete} disabled={isLoading} - className='hover:!text-[var(--text-inverse)] h-[28px] w-[28px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)]' + className='hover:!text-[var(--text-inverse)] h-[28px] w-[28px] rounded-[8px] bg-[var(--surface-5)] p-0 text-[var(--text-secondary)] hover:bg-[var(--brand-secondary)]' > - Delete items + Delete )}
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/base-card/base-card.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/base-card/base-card.tsx index 50ba8d61d7..2dd682f6d7 100644 --- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/base-card/base-card.tsx +++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/base-card/base-card.tsx @@ -67,26 +67,26 @@ function formatAbsoluteDate(dateString: string): string { */ export function BaseCardSkeleton() { return ( -
+
-
-
+
+
-
-
+
+
-
+
-
-
+
+
@@ -122,7 +122,7 @@ export function BaseCard({ id, title, docCount, description, updatedAt }: BaseCa return ( -
+

{title} diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx index 928fd52954..2c43887af2 100644 --- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx +++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx @@ -388,7 +388,7 @@ export function CreateBaseModal({ />

-
+
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx index 757b0731fb..94d763ee45 100644 --- a/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx +++ b/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx @@ -145,7 +145,7 @@ export function Knowledge() {
-
+
-
+
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-spans/trace-spans.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-spans/trace-spans.tsx index 39020ea1cd..f422241cbe 100644 --- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-spans/trace-spans.tsx +++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-spans/trace-spans.tsx @@ -277,10 +277,10 @@ function ExpandableRowHeader({ aria-expanded={hasChildren ? isExpanded : undefined} aria-label={hasChildren ? (isExpanded ? 'Collapse' : 'Expand') : undefined} > -
+
{hasChildren && ( )} @@ -418,14 +418,14 @@ function InputOutputSection({ 'font-medium text-[12px] transition-colors', isError ? 'text-[var(--text-error)]' - : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-secondary)]' + : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]' )} > {label} +
{span.children!.map((child, childIndex) => ( 0 && isCardExpanded && ( -
+
{inlineChildren.map((childSpan, index) => ( +
{[...toolCallSpans, ...inlineChildren].map((childSpan, index) => { const childId = childSpan.id || `${spanId}-inline-${index}` const childIsError = childSpan.status === 'error' @@ -731,7 +731,7 @@ const TraceSpanItem = memo(function TraceSpanItem({ {/* Nested children */} {showChildrenInProgressBar && hasNestedChildren && isNestedExpanded && ( -
+
{childSpan.children!.map((nestedChild, nestedIndex) => ( -
+
{invalidEmails.map((email, index) => ( {email} diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/search/search.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/search/search.tsx index e5ccb326db..2569d6c5fb 100644 --- a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/search/search.tsx +++ b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/search/search.tsx @@ -163,7 +163,7 @@ export function AutocompleteSearch({ }} > -
+
{/* Search Icon */} @@ -266,8 +266,8 @@ export function AutocompleteSearch({ data-index={0} className={cn( 'w-full rounded-[6px] px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--border-focus)]', - 'hover:bg-[var(--surface-9)]', - highlightedIndex === 0 && 'bg-[var(--surface-9)]' + 'hover:bg-[var(--surface-5)]', + highlightedIndex === 0 && 'bg-[var(--surface-5)]' )} onMouseEnter={() => setHighlightedIndex(0)} onMouseDown={(e) => { @@ -296,8 +296,8 @@ export function AutocompleteSearch({ data-index={index} className={cn( 'w-full rounded-[6px] px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--border-focus)]', - 'hover:bg-[var(--surface-9)]', - isHighlighted && 'bg-[var(--surface-9)]' + 'hover:bg-[var(--surface-5)]', + isHighlighted && 'bg-[var(--surface-5)]' )} onMouseEnter={() => setHighlightedIndex(index)} onMouseDown={(e) => { @@ -339,8 +339,8 @@ export function AutocompleteSearch({ data-index={index} className={cn( 'w-full rounded-[6px] px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--border-focus)]', - 'hover:bg-[var(--surface-9)]', - index === highlightedIndex && 'bg-[var(--surface-9)]' + 'hover:bg-[var(--surface-5)]', + index === highlightedIndex && 'bg-[var(--surface-5)]' )} onMouseEnter={() => setHighlightedIndex(index)} onMouseDown={(e) => { diff --git a/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx b/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx index 5199252d00..851050d0e7 100644 --- a/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx +++ b/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx @@ -29,7 +29,7 @@ export function TemplateCardSkeleton({ className }: { className?: string }) { return (
@@ -202,7 +202,7 @@ function TemplateCardInner({
diff --git a/apps/sim/app/workspace/[workspaceId]/templates/templates.tsx b/apps/sim/app/workspace/[workspaceId]/templates/templates.tsx index 54f75ff22d..e21ddf305a 100644 --- a/apps/sim/app/workspace/[workspaceId]/templates/templates.tsx +++ b/apps/sim/app/workspace/[workspaceId]/templates/templates.tsx @@ -186,7 +186,7 @@ export default function Templates({
-
+
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/chat-message/chat-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/chat-message/chat-message.tsx index ae9c5759ee..2fc4f15215 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/chat-message/chat-message.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/chat-message/chat-message.tsx @@ -156,7 +156,7 @@ export function ChatMessage({ message }: ChatMessageProps) { )} {formattedContent && !formattedContent.startsWith('Uploaded') && ( -
+
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls/diff-controls.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls/diff-controls.tsx index 570b2edc04..b64b27af2d 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls/diff-controls.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls/diff-controls.tsx @@ -350,7 +350,7 @@ export const DiffControls = memo(function DiffControls() {