github/sim
1
0
Fork 0
mirror of https://github.com/simstudioai/sim.git synced 2026-01-08 22:48:14 -05:00
Code Issues Packages Projects Releases Wiki Activity

improvement(globals): light colors (#2620)

Browse Source 
* improvement(globals): light colors

* improvement(ui): logs, templates, kb, light globals

* improvement(subflows): start node and ui/ux
This commit is contained in:
Emir Karabeg
2025-12-28 13:28:36 -08:00
committed by GitHub
parent 132aae1615
commit 1c626dfcae
18 changed files with 109 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
apps/sim/app/_styles/globals.css
View File

@@ -47,32 +47,32 @@
@layer base { @layer base {
:root, :root,
.light { .light {
--bg: #f9faf8; /* main canvas - near white */ --bg: #fdfdfd; /* main canvas - neutral near-white */
--surface-1: #f9faf8; /* sidebar, panels - light warm gray */ --surface-1: #fcfcfc; /* sidebar, panels */
--surface-2: #fdfdfb; /* blocks, cards, modals - soft warm white */ --surface-2: #ffffff; /* blocks, cards, modals - pure white */
--surface-3: #f4f5f1; /* popovers, headers - more contrast */ --surface-3: #f7f7f7; /* popovers, headers */
--surface-4: #f2f3ef; /* buttons base */ --surface-4: #f5f5f5; /* buttons base */
--border: #d7dcda; /* primary border */ --border: #e0e0e0; /* primary border */
--surface-5: #f0f1ed; /* inputs, form elements - subtle */ --surface-5: #f3f3f3; /* inputs, form elements */
--border-1: #d7dcda; /* stronger border - sage gray */ --border-1: #e0e0e0; /* stronger border */
--surface-6: #eceee9; /* popovers, elevated surfaces */ --surface-6: #f0f0f0; /* popovers, elevated surfaces */
--surface-7: #e8e9e4; --surface-7: #ececec;
--workflow-edge: #d7dcda; /* workflow handles/edges - matches border-1 */ --workflow-edge: #e0e0e0; /* workflow handles/edges - matches border-1 */
/* Text - warm neutrals */ /* Text - neutral */
--text-primary: #2d2d2d; --text-primary: #2d2d2d;
--text-secondary: #404040; --text-secondary: #404040;
--text-tertiary: #5c5c5c; --text-tertiary: #5c5c5c;
--text-muted: #737373; --text-muted: #737373;
--text-subtle: #8c8c8c; --text-subtle: #8c8c8c;
--text-inverse: #f0fff6; --text-inverse: #ffffff;
--text-error: #ef4444; --text-error: #ef4444;
/* Borders / dividers */ /* Borders / dividers */
--divider: #e8e9e4; --divider: #ededed;
--border-muted: #dfe0db; --border-muted: #e4e4e4;
--border-success: #d7dcda; --border-success: #e0e0e0;
/* Brand & state */ /* Brand & state */
--brand-400: #8e4cfb; --brand-400: #8e4cfb;
@@ -152,13 +152,13 @@
--c-883827: #7c2d12; --c-883827: #7c2d12;
/* Terminal status badges */ /* Terminal status badges */
--terminal-status-error-bg: #feeeee; --terminal-status-error-bg: #fef2f2;
--terminal-status-error-border: #f87171; --terminal-status-error-border: #f87171;
--terminal-status-info-bg: #f5f5f4; --terminal-status-info-bg: #f7f7f7;
--terminal-status-info-border: #a8a29e; --terminal-status-info-border: #a3a3a3;
--terminal-status-info-color: #57534e; --terminal-status-info-color: #525252;
--terminal-status-warning-bg: #fef9e7; --terminal-status-warning-bg: #fefce8;
--terminal-status-warning-border: #f5c842; --terminal-status-warning-border: #facc15;
--terminal-status-warning-color: #a16207; --terminal-status-warning-color: #a16207;
} }
.dark { .dark {

4
apps/sim/app/templates/[id]/template.tsx
View File

@@ -68,7 +68,7 @@ function TemplateDetailsLoading({ isWorkspaceContext, workspaceId }: TemplateDet
<div <div
className={cn( className={cn(
'flex flex-1 flex-col px-[24px] pt-[24px] pb-[24px]', 'flex flex-1 flex-col px-[24px] pt-[24px] pb-[24px]',
isWorkspaceContext ? 'overflow-auto' : 'overflow-visible' isWorkspaceContext ? 'overflow-auto bg-white dark:bg-[var(--bg)]' : 'overflow-visible'
)} )}
> >
{/* Breadcrumb navigation */} {/* Breadcrumb navigation */}
@@ -638,7 +638,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
<div <div
className={cn( className={cn(
'flex flex-1 flex-col px-[24px] pt-[24px] pb-[24px]', 'flex flex-1 flex-col px-[24px] pt-[24px] pb-[24px]',
isWorkspaceContext ? 'overflow-auto' : 'overflow-visible' isWorkspaceContext ? 'overflow-auto bg-white dark:bg-[var(--bg)]' : 'overflow-visible'
)} )}
> >
{/* Breadcrumb navigation */} {/* Breadcrumb navigation */}

6
apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
View File

@@ -212,7 +212,7 @@ function DocumentLoading({
return ( return (
<div className='flex h-full flex-1 flex-col'> <div className='flex h-full flex-1 flex-col'>
<div className='flex flex-1 overflow-hidden'> <div className='flex flex-1 overflow-hidden'>
<div className='flex flex-1 flex-col overflow-auto px-[24px] pt-[24px] pb-[24px]'> <div className='flex flex-1 flex-col overflow-auto bg-white px-[24px] pt-[24px] pb-[24px] dark:bg-[var(--bg)]'>
<Breadcrumb items={breadcrumbItems} /> <Breadcrumb items={breadcrumbItems} />
<div className='mt-[14px] flex items-center justify-between'> <div className='mt-[14px] flex items-center justify-between'>
@@ -234,7 +234,7 @@ function DocumentLoading({
</div> </div>
<div className='mt-[14px] flex items-center justify-between'> <div className='mt-[14px] flex items-center justify-between'>
<div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-4)] px-[8px]'> <div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-3)] px-[8px] dark:bg-[var(--surface-4)]'>
<Search className='h-[14px] w-[14px] text-[var(--text-subtle)]' /> <Search className='h-[14px] w-[14px] text-[var(--text-subtle)]' />
<Input <Input
placeholder='Search chunks...' placeholder='Search chunks...'
@@ -788,7 +788,7 @@ export function Document({
return ( return (
<div className='flex h-full flex-1 flex-col'> <div className='flex h-full flex-1 flex-col'>
<div className='flex flex-1 overflow-hidden'> <div className='flex flex-1 overflow-hidden'>
<div className='flex flex-1 flex-col overflow-auto px-[24px] pt-[24px] pb-[24px]'> <div className='flex flex-1 flex-col overflow-auto bg-white px-[24px] pt-[24px] pb-[24px] dark:bg-[var(--bg)]'>
<Breadcrumb items={breadcrumbItems} /> <Breadcrumb items={breadcrumbItems} />
<div className='mt-[14px] flex items-center justify-between'> <div className='mt-[14px] flex items-center justify-between'>

6
apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
View File

@@ -171,7 +171,7 @@ function KnowledgeBaseLoading({ knowledgeBaseName }: KnowledgeBaseLoadingProps)
return ( return (
<div className='flex h-full flex-1 flex-col'> <div className='flex h-full flex-1 flex-col'>
<div className='flex flex-1 overflow-hidden'> <div className='flex flex-1 overflow-hidden'>
<div className='flex flex-1 flex-col overflow-auto px-[24px] pt-[24px] pb-[24px]'> <div className='flex flex-1 flex-col overflow-auto bg-white px-[24px] pt-[24px] pb-[24px] dark:bg-[var(--bg)]'>
<Breadcrumb items={breadcrumbItems} /> <Breadcrumb items={breadcrumbItems} />
<div className='mt-[14px] flex items-center justify-between'> <div className='mt-[14px] flex items-center justify-between'>
@@ -193,7 +193,7 @@ function KnowledgeBaseLoading({ knowledgeBaseName }: KnowledgeBaseLoadingProps)
</div> </div>
<div className='mt-[14px] flex items-center justify-between'> <div className='mt-[14px] flex items-center justify-between'>
<div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-4)] px-[8px]'> <div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-3)] px-[8px] dark:bg-[var(--surface-4)]'>
<Search className='h-[14px] w-[14px] text-[var(--text-subtle)]' /> <Search className='h-[14px] w-[14px] text-[var(--text-subtle)]' />
<Input <Input
placeholder='Search documents...' placeholder='Search documents...'
@@ -987,7 +987,7 @@ export function KnowledgeBase({
return ( return (
<div className='flex h-full flex-1 flex-col'> <div className='flex h-full flex-1 flex-col'>
<div className='flex flex-1 overflow-hidden'> <div className='flex flex-1 overflow-hidden'>
<div className='flex flex-1 flex-col overflow-auto px-[24px] pt-[24px] pb-[24px]'> <div className='flex flex-1 flex-col overflow-auto bg-white px-[24px] pt-[24px] pb-[24px] dark:bg-[var(--bg)]'>
<Breadcrumb items={breadcrumbItems} /> <Breadcrumb items={breadcrumbItems} />
<div className='mt-[14px] flex items-center justify-between'> <div className='mt-[14px] flex items-center justify-between'>

18
apps/sim/app/workspace/[workspaceId]/knowledge/components/base-card/base-card.tsx
View File

@@ -67,26 +67,26 @@ function formatAbsoluteDate(dateString: string): string {
*/ */
export function BaseCardSkeleton() { export function BaseCardSkeleton() {
return ( return (
<div className='group flex h-full cursor-pointer flex-col gap-[12px] rounded-[4px] bg-[var(--surface-4)] px-[8px] py-[6px] transition-colors hover:bg-[var(--surface-5)]'> <div className='group flex h-full cursor-pointer flex-col gap-[12px] rounded-[4px] bg-[var(--surface-3)] px-[8px] py-[6px] transition-colors hover:bg-[var(--surface-4)] dark:bg-[var(--surface-4)] dark:hover:bg-[var(--surface-5)]'>
<div className='flex items-center justify-between gap-[8px]'> <div className='flex items-center justify-between gap-[8px]'>
<div className='h-[17px] w-[120px] animate-pulse rounded-[4px] bg-[var(--surface-5)]' /> <div className='h-[17px] w-[120px] animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
<div className='h-[22px] w-[90px] animate-pulse rounded-[4px] bg-[var(--surface-4)]' /> <div className='h-[22px] w-[90px] animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
</div> </div>
<div className='flex flex-1 flex-col gap-[8px]'> <div className='flex flex-1 flex-col gap-[8px]'>
<div className='flex items-center justify-between'> <div className='flex items-center justify-between'>
<div className='flex items-center gap-[6px]'> <div className='flex items-center gap-[6px]'>
<div className='h-[12px] w-[12px] animate-pulse rounded-[2px] bg-[var(--surface-5)]' /> <div className='h-[12px] w-[12px] animate-pulse rounded-[2px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
<div className='h-[15px] w-[45px] animate-pulse rounded-[4px] bg-[var(--surface-5)]' /> <div className='h-[15px] w-[45px] animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
</div> </div>
<div className='h-[15px] w-[120px] animate-pulse rounded-[4px] bg-[var(--surface-4)]' /> <div className='h-[15px] w-[120px] animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
</div> </div>
<div className='h-0 w-full border-[var(--divider)] border-t' /> <div className='h-0 w-full border-[var(--divider)] border-t' />
<div className='flex h-[36px] flex-col gap-[6px]'> <div className='flex h-[36px] flex-col gap-[6px]'>
<div className='h-[15px] w-full animate-pulse rounded-[4px] bg-[var(--surface-4)]' /> <div className='h-[15px] w-full animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
<div className='h-[15px] w-[75%] animate-pulse rounded-[4px] bg-[var(--surface-4)]' /> <div className='h-[15px] w-[75%] animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
</div> </div>
</div> </div>
</div> </div>
@@ -122,7 +122,7 @@ export function BaseCard({ id, title, docCount, description, updatedAt }: BaseCa
return ( return (
<Link href={href} prefetch={true} className='h-full'> <Link href={href} prefetch={true} className='h-full'>
<div className='group flex h-full cursor-pointer flex-col gap-[12px] rounded-[4px] bg-[var(--surface-4)] px-[8px] py-[6px] transition-colors hover:bg-[var(--surface-5)]'> <div className='group flex h-full cursor-pointer flex-col gap-[12px] rounded-[4px] bg-[var(--surface-3)] px-[8px] py-[6px] transition-colors hover:bg-[var(--surface-4)] dark:bg-[var(--surface-4)] dark:hover:bg-[var(--surface-5)]'>
<div className='flex items-center justify-between gap-[8px]'> <div className='flex items-center justify-between gap-[8px]'>
<h3 className='min-w-0 flex-1 truncate font-medium text-[14px] text-[var(--text-primary)]'> <h3 className='min-w-0 flex-1 truncate font-medium text-[14px] text-[var(--text-primary)]'>
{title} {title}

2
apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx
View File

@@ -131,7 +131,7 @@ export function Knowledge() {
<> <>
<div className='flex h-full flex-1 flex-col'> <div className='flex h-full flex-1 flex-col'>
<div className='flex flex-1 overflow-hidden'> <div className='flex flex-1 overflow-hidden'>
<div className='flex flex-1 flex-col overflow-auto px-[24px] pt-[28px] pb-[24px]'> <div className='flex flex-1 flex-col overflow-auto bg-white px-[24px] pt-[28px] pb-[24px] dark:bg-[var(--bg)]'>
<div> <div>
<div className='flex items-start gap-[12px]'> <div className='flex items-start gap-[12px]'>
<div className='flex h-[26px] w-[26px] items-center justify-center rounded-[6px] border border-[#5BB377] bg-[#E8F7EE] dark:border-[#1E5A3E] dark:bg-[#0F3D2C]'> <div className='flex h-[26px] w-[26px] items-center justify-center rounded-[6px] border border-[#5BB377] bg-[#E8F7EE] dark:border-[#1E5A3E] dark:bg-[#0F3D2C]'>

6
apps/sim/app/workspace/[workspaceId]/knowledge/layout.tsx
View File

@@ -2,5 +2,9 @@
* Knowledge Base layout - applies sidebar padding for all knowledge routes. * Knowledge Base layout - applies sidebar padding for all knowledge routes.
*/ */
export default function KnowledgeLayout({ children }: { children: React.ReactNode }) { export default function KnowledgeLayout({ children }: { children: React.ReactNode }) {
return <div className='flex h-full flex-1 flex-col overflow-hidden pl-60'>{children}</div> return (
<div className='flex h-full flex-1 flex-col overflow-hidden pl-[var(--sidebar-width)]'>
{children}
</div>
)
} }

8
apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx
View File

@@ -35,9 +35,9 @@ export function WorkflowsList({
const { workflows } = useWorkflowRegistry() const { workflows } = useWorkflowRegistry()
return ( return (
<div className='flex h-full flex-col overflow-hidden rounded-[6px] bg-[var(--surface-1)]'> <div className='flex h-full flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)] dark:bg-[var(--surface-1)]'>
{/* Table header */} {/* Table header */}
<div className='flex-shrink-0 rounded-t-[6px] bg-[var(--surface-3)] px-[24px] py-[10px]'> <div className='flex-shrink-0 rounded-t-[6px] bg-[var(--surface-3)] px-[24px] py-[10px] dark:bg-[var(--surface-3)]'>
<div className='flex items-center gap-[16px]'> <div className='flex items-center gap-[16px]'>
<span className='w-[160px] flex-shrink-0 font-medium text-[12px] text-[var(--text-tertiary)]'> <span className='w-[160px] flex-shrink-0 font-medium text-[12px] text-[var(--text-tertiary)]'>
Workflow Workflow
@@ -66,8 +66,8 @@ export function WorkflowsList({
<div <div
key={workflow.workflowId} key={workflow.workflowId}
className={cn( className={cn(
'flex h-[44px] cursor-pointer items-center gap-[16px] px-[24px] hover:bg-[var(--surface-6)] dark:hover:bg-[var(--surface-4)]', 'flex h-[44px] cursor-pointer items-center gap-[16px] px-[24px] hover:bg-[var(--surface-3)] dark:hover:bg-[var(--surface-4)]',
isSelected && 'bg-[var(--surface-6)] dark:bg-[var(--surface-4)]' isSelected && 'bg-[var(--surface-3)] dark:bg-[var(--surface-4)]'
)} )}
onClick={() => onToggleWorkflow(workflow.workflowId)} onClick={() => onToggleWorkflow(workflow.workflowId)}
> >

28
apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx
View File

@@ -36,14 +36,14 @@ const SKELETON_BAR_HEIGHTS = [
function GraphCardSkeleton({ title }: { title: string }) { function GraphCardSkeleton({ title }: { title: string }) {
return ( return (
<div className='flex flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)]'> <div className='flex flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)] dark:bg-[var(--surface-2)]'>
<div className='flex min-w-0 items-center justify-between gap-[8px] bg-[var(--surface-3)] px-[16px] py-[9px]'> <div className='flex min-w-0 items-center justify-between gap-[8px] bg-[var(--surface-3)] px-[16px] py-[9px] dark:bg-[var(--surface-3)]'>
<span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-sm'> <span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-sm'>
{title} {title}
</span> </span>
<Skeleton className='h-[20px] w-[40px]' /> <Skeleton className='h-[20px] w-[40px]' />
</div> </div>
<div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-1)] px-[14px] py-[10px]'> <div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-2)] px-[14px] py-[10px] dark:bg-[var(--surface-1)]'>
<div className='flex h-[166px] flex-col justify-end gap-[4px]'> <div className='flex h-[166px] flex-col justify-end gap-[4px]'>
<div className='flex items-end gap-[2px]'> <div className='flex items-end gap-[2px]'>
{SKELETON_BAR_HEIGHTS.map((height, i) => ( {SKELETON_BAR_HEIGHTS.map((height, i) => (
@@ -81,8 +81,8 @@ function WorkflowRowSkeleton() {
function WorkflowsListSkeleton({ rowCount = 5 }: { rowCount?: number }) { function WorkflowsListSkeleton({ rowCount = 5 }: { rowCount?: number }) {
return ( return (
<div className='flex h-full flex-col overflow-hidden rounded-[6px] bg-[var(--surface-1)]'> <div className='flex h-full flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)] dark:bg-[var(--surface-1)]'>
<div className='flex-shrink-0 rounded-t-[6px] bg-[var(--surface-3)] px-[24px] py-[10px]'> <div className='flex-shrink-0 rounded-t-[6px] bg-[var(--surface-3)] px-[24px] py-[10px] dark:bg-[var(--surface-3)]'>
<div className='flex items-center gap-[16px]'> <div className='flex items-center gap-[16px]'>
<span className='w-[160px] flex-shrink-0 font-medium text-[12px] text-[var(--text-tertiary)]'> <span className='w-[160px] flex-shrink-0 font-medium text-[12px] text-[var(--text-tertiary)]'>
Workflow Workflow
@@ -570,8 +570,8 @@ export default function Dashboard({ logs, isLoading, error }: DashboardProps) {
<div className='mt-[24px] flex min-h-0 flex-1 flex-col pb-[24px]'> <div className='mt-[24px] flex min-h-0 flex-1 flex-col pb-[24px]'>
<div className='mb-[16px] flex-shrink-0'> <div className='mb-[16px] flex-shrink-0'>
<div className='grid grid-cols-1 gap-[16px] md:grid-cols-3'> <div className='grid grid-cols-1 gap-[16px] md:grid-cols-3'>
<div className='flex flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)]'> <div className='flex flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)] dark:bg-[var(--surface-2)]'>
<div className='flex min-w-0 items-center justify-between gap-[8px] bg-[var(--surface-3)] px-[16px] py-[9px]'> <div className='flex min-w-0 items-center justify-between gap-[8px] bg-[var(--surface-3)] px-[16px] py-[9px] dark:bg-[var(--surface-3)]'>
<span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-sm'> <span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-sm'>
Runs Runs
</span> </span>
@@ -581,7 +581,7 @@ export default function Dashboard({ logs, isLoading, error }: DashboardProps) {
</span> </span>
)} )}
</div> </div>
<div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-1)] px-[14px] py-[10px]'> <div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-2)] px-[14px] py-[10px] dark:bg-[var(--surface-1)]'>
{globalDetails ? ( {globalDetails ? (
<LineChart <LineChart
data={globalDetails.executionCounts} data={globalDetails.executionCounts}
@@ -597,8 +597,8 @@ export default function Dashboard({ logs, isLoading, error }: DashboardProps) {
</div> </div>
</div> </div>
<div className='flex flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)]'> <div className='flex flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)] dark:bg-[var(--surface-2)]'>
<div className='flex min-w-0 items-center justify-between gap-[8px] bg-[var(--surface-3)] px-[16px] py-[9px]'> <div className='flex min-w-0 items-center justify-between gap-[8px] bg-[var(--surface-3)] px-[16px] py-[9px] dark:bg-[var(--surface-3)]'>
<span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-sm'> <span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-sm'>
Errors Errors
</span> </span>
@@ -608,7 +608,7 @@ export default function Dashboard({ logs, isLoading, error }: DashboardProps) {
</span> </span>
)} )}
</div> </div>
<div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-1)] px-[14px] py-[10px]'> <div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-2)] px-[14px] py-[10px] dark:bg-[var(--surface-1)]'>
{globalDetails ? ( {globalDetails ? (
<LineChart <LineChart
data={globalDetails.failureCounts} data={globalDetails.failureCounts}
@@ -624,8 +624,8 @@ export default function Dashboard({ logs, isLoading, error }: DashboardProps) {
</div> </div>
</div> </div>
<div className='flex flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)]'> <div className='flex flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)] dark:bg-[var(--surface-2)]'>
<div className='flex min-w-0 items-center justify-between gap-[8px] bg-[var(--surface-3)] px-[16px] py-[9px]'> <div className='flex min-w-0 items-center justify-between gap-[8px] bg-[var(--surface-3)] px-[16px] py-[9px] dark:bg-[var(--surface-3)]'>
<span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-sm'> <span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-sm'>
Latency Latency
</span> </span>
@@ -635,7 +635,7 @@ export default function Dashboard({ logs, isLoading, error }: DashboardProps) {
</span> </span>
)} )}
</div> </div>
<div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-1)] px-[14px] py-[10px]'> <div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-2)] px-[14px] py-[10px] dark:bg-[var(--surface-1)]'>
{globalDetails ? ( {globalDetails ? (
<LineChart <LineChart
data={globalDetails.latencies} data={globalDetails.latencies}

4
apps/sim/app/workspace/[workspaceId]/logs/components/logs-list/logs-list.tsx
View File

@@ -38,8 +38,8 @@ const LogRow = memo(
<div <div
ref={isSelected ? selectedRowRef : null} ref={isSelected ? selectedRowRef : null}
className={cn( className={cn(
'relative flex h-[44px] cursor-pointer items-center px-[24px] hover:bg-[var(--surface-4)]', 'relative flex h-[44px] cursor-pointer items-center px-[24px] hover:bg-[var(--surface-3)] dark:hover:bg-[var(--surface-4)]',
isSelected && 'bg-[var(--surface-4)]' isSelected && 'bg-[var(--surface-3)] dark:bg-[var(--surface-4)]'
)} )}
onClick={handleClick} onClick={handleClick}
> >

4
apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/search/search.tsx
View File

@@ -163,7 +163,7 @@ export function AutocompleteSearch({
}} }}
> >
<PopoverAnchor asChild> <PopoverAnchor asChild>
<div className='relative flex h-[32px] w-[400px] items-center rounded-[8px] bg-[var(--surface-4)]'> <div className='relative flex h-[32px] w-[400px] items-center rounded-[8px] bg-[var(--surface-3)] dark:bg-[var(--surface-4)]'>
{/* Search Icon */} {/* Search Icon */}
<Search className='mr-[6px] ml-[8px] h-[14px] w-[14px] flex-shrink-0 text-[var(--text-subtle)]' /> <Search className='mr-[6px] ml-[8px] h-[14px] w-[14px] flex-shrink-0 text-[var(--text-subtle)]' />
@@ -179,7 +179,7 @@ export function AutocompleteSearch({
className={cn( className={cn(
'h-6 shrink-0 cursor-pointer whitespace-nowrap rounded-md px-2 text-[11px]', 'h-6 shrink-0 cursor-pointer whitespace-nowrap rounded-md px-2 text-[11px]',
highlightedBadgeIndex === index && highlightedBadgeIndex === index &&
'ring-1 ring-[var(--border-focus)] ring-offset-1 ring-offset-[var(--surface-5)]' 'ring-1 ring-[var(--border-focus)] ring-offset-1 ring-offset-[var(--surface-3)] dark:ring-offset-[var(--surface-5)]'
)} )}
onClick={() => removeBadge(index)} onClick={() => removeBadge(index)}
onKeyDown={(e) => { onKeyDown={(e) => {

6
apps/sim/app/workspace/[workspaceId]/logs/layout.tsx
View File

@@ -1,3 +1,7 @@
export default function LogsLayout({ children }: { children: React.ReactNode }) { export default function LogsLayout({ children }: { children: React.ReactNode }) {
return <div className='flex h-full flex-1 flex-col overflow-hidden pl-60'>{children}</div> return (
<div className='flex h-full flex-1 flex-col overflow-hidden pl-[var(--sidebar-width)]'>
{children}
</div>
)
} }

6
apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
View File

@@ -344,7 +344,7 @@ export default function Logs() {
return ( return (
<div className='flex h-full flex-1 flex-col overflow-hidden'> <div className='flex h-full flex-1 flex-col overflow-hidden'>
<div className='flex flex-1 overflow-hidden'> <div className='flex flex-1 overflow-hidden'>
<div className='flex flex-1 flex-col overflow-auto pt-[28px] pl-[24px]'> <div className='flex flex-1 flex-col overflow-auto bg-white pt-[28px] pl-[24px] dark:bg-[var(--bg)]'>
<div className='pr-[24px]'> <div className='pr-[24px]'>
<LogsToolbar <LogsToolbar
viewMode={viewMode} viewMode={viewMode}
@@ -385,9 +385,9 @@ export default function Logs() {
)} )}
> >
{/* Table container */} {/* Table container */}
<div className='relative flex min-h-0 flex-1 flex-col overflow-hidden rounded-[6px] bg-[var(--surface-1)]'> <div className='relative flex min-h-0 flex-1 flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)] dark:bg-[var(--surface-1)]'>
{/* Table header */} {/* Table header */}
<div className='flex-shrink-0 rounded-t-[6px] bg-[var(--surface-3)] px-[24px] py-[10px]'> <div className='flex-shrink-0 rounded-t-[6px] bg-[var(--surface-3)] px-[24px] py-[10px] dark:bg-[var(--surface-3)]'>
<div className='flex items-center'> <div className='flex items-center'>
<span className='w-[8%] min-w-[70px] font-medium text-[12px] text-[var(--text-tertiary)]'> <span className='w-[8%] min-w-[70px] font-medium text-[12px] text-[var(--text-tertiary)]'>
Date Date

24
apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx
View File

@@ -29,19 +29,19 @@ export function TemplateCardSkeleton({ className }: { className?: string }) {
return ( return (
<div <div
className={cn( className={cn(
'h-[268px] w-full rounded-[8px] bg-[var(--surface-4)] p-[8px] transition-colors hover:bg-[var(--surface-5)]', 'h-[268px] w-full rounded-[8px] bg-[var(--surface-3)] p-[8px] transition-colors hover:bg-[var(--surface-4)] dark:bg-[var(--surface-4)] dark:hover:bg-[var(--surface-5)]',
className className
)} )}
> >
<div className='h-[180px] w-full animate-pulse rounded-[6px] bg-[var(--surface-5)]' /> <div className='h-[180px] w-full animate-pulse rounded-[6px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
<div className='mt-[14px] flex items-center justify-between'> <div className='mt-[14px] flex items-center justify-between'>
<div className='h-4 w-32 animate-pulse rounded bg-[var(--surface-5)]' /> <div className='h-4 w-32 animate-pulse rounded bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
<div className='flex items-center gap-[-4px]'> <div className='flex items-center gap-[-4px]'>
{Array.from({ length: 3 }).map((_, index) => ( {Array.from({ length: 3 }).map((_, index) => (
<div <div
key={index} key={index}
className='h-[18px] w-[18px] animate-pulse rounded-[4px] bg-[var(--surface-5)]' className='h-[18px] w-[18px] animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]'
/> />
))} ))}
</div> </div>
@@ -49,14 +49,14 @@ export function TemplateCardSkeleton({ className }: { className?: string }) {
<div className='mt-[14px] flex items-center justify-between'> <div className='mt-[14px] flex items-center justify-between'>
<div className='flex items-center gap-[6px]'> <div className='flex items-center gap-[6px]'>
<div className='h-[20px] w-[20px] animate-pulse rounded-full bg-[var(--surface-5)]' /> <div className='h-[20px] w-[20px] animate-pulse rounded-full bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
<div className='h-3 w-20 animate-pulse rounded bg-[var(--surface-5)]' /> <div className='h-3 w-20 animate-pulse rounded bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
</div> </div>
<div className='flex items-center gap-[6px]'> <div className='flex items-center gap-[6px]'>
<div className='h-3 w-3 animate-pulse rounded bg-[var(--surface-5)]' /> <div className='h-3 w-3 animate-pulse rounded bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
<div className='h-3 w-6 animate-pulse rounded bg-[var(--surface-5)]' /> <div className='h-3 w-6 animate-pulse rounded bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
<div className='h-3 w-3 animate-pulse rounded bg-[var(--surface-5)]' /> <div className='h-3 w-3 animate-pulse rounded bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
<div className='h-3 w-6 animate-pulse rounded bg-[var(--surface-5)]' /> <div className='h-3 w-6 animate-pulse rounded bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
</div> </div>
</div> </div>
</div> </div>
@@ -202,7 +202,7 @@ function TemplateCardInner({
<div <div
onClick={handleCardClick} onClick={handleCardClick}
className={cn( className={cn(
'w-full cursor-pointer rounded-[8px] bg-[var(--surface-4)] p-[8px] transition-colors hover:bg-[var(--surface-5)]', 'w-full cursor-pointer rounded-[8px] bg-[var(--surface-3)] p-[8px] transition-colors hover:bg-[var(--surface-4)] dark:bg-[var(--surface-4)] dark:hover:bg-[var(--surface-5)]',
className className
)} )}
> >
@@ -223,7 +223,7 @@ function TemplateCardInner({
cursorStyle='pointer' cursorStyle='pointer'
/> />
) : ( ) : (
<div className='h-full w-full bg-[var(--surface-4)]' /> <div className='h-full w-full bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
)} )}
</div> </div>

6
apps/sim/app/workspace/[workspaceId]/templates/layout.tsx
View File

@@ -2,5 +2,9 @@
* Templates layout - applies sidebar padding for all template routes. * Templates layout - applies sidebar padding for all template routes.
*/ */
export default function TemplatesLayout({ children }: { children: React.ReactNode }) { export default function TemplatesLayout({ children }: { children: React.ReactNode }) {
return <main className='flex h-full flex-1 flex-col overflow-hidden pl-60'>{children}</main> return (
<main className='flex h-full flex-1 flex-col overflow-hidden pl-[var(--sidebar-width)]'>
{children}
</main>
)
} }

2
apps/sim/app/workspace/[workspaceId]/templates/templates.tsx
View File

@@ -172,7 +172,7 @@ export default function Templates({
return ( return (
<div className='flex h-full flex-1 flex-col'> <div className='flex h-full flex-1 flex-col'>
<div className='flex flex-1 overflow-hidden'> <div className='flex flex-1 overflow-hidden'>
<div className='flex flex-1 flex-col overflow-auto px-[24px] pt-[28px] pb-[24px]'> <div className='flex flex-1 flex-col overflow-auto bg-white px-[24px] pt-[28px] pb-[24px] dark:bg-[var(--bg)]'>
<div> <div>
<div className='flex items-start gap-[12px]'> <div className='flex items-start gap-[12px]'>
<div className='flex h-[26px] w-[26px] items-center justify-center rounded-[6px] border border-[#5BA8D9] bg-[#E8F4FB] dark:border-[#1A5070] dark:bg-[#153347]'> <div className='flex h-[26px] w-[26px] items-center justify-center rounded-[6px] border border-[#5BA8D9] bg-[#E8F4FB] dark:border-[#1A5070] dark:bg-[#153347]'>

9
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
View File

@@ -108,12 +108,12 @@ export const SubflowNodeComponent = memo(({ data, id }: NodeProps<SubflowNodeDat
*/ */
const getHandleClasses = (position: 'left' | 'right') => { const getHandleClasses = (position: 'left' | 'right') => {
const baseClasses = '!z-[10] !cursor-crosshair !border-none !transition-[colors] !duration-150' const baseClasses = '!z-[10] !cursor-crosshair !border-none !transition-[colors] !duration-150'
const colorClasses = '!bg-[var(--surface-7)]' const colorClasses = '!bg-[var(--workflow-edge)]'
const positionClasses = { const positionClasses = {
left: '!left-[-7px] !h-5 !w-[7px] !rounded-l-[2px] !rounded-r-none hover:!left-[-10px] hover:!w-[10px] hover:!rounded-l-full', left: '!left-[-8px] !h-5 !w-[7px] !rounded-l-[2px] !rounded-r-none hover:!left-[-11px] hover:!w-[10px] hover:!rounded-l-full',
right: right:
'!right-[-7px] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none hover:!right-[-10px] hover:!w-[10px] hover:!rounded-r-full', '!right-[-8px] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none hover:!right-[-11px] hover:!w-[10px] hover:!rounded-r-full',
} }
return cn(baseClasses, colorClasses, positionClasses[position]) return cn(baseClasses, colorClasses, positionClasses[position])
@@ -205,13 +205,12 @@ export const SubflowNodeComponent = memo(({ data, id }: NodeProps<SubflowNodeDat
data-dragarea='true' data-dragarea='true'
style={{ style={{
position: 'relative', position: 'relative',
minHeight: '100%',
pointerEvents: isPreview ? 'none' : 'auto', pointerEvents: isPreview ? 'none' : 'auto',
}} }}
> >
{/* Subflow Start */} {/* Subflow Start */}
<div <div
className='absolute top-[16px] left-[16px] flex items-center justify-center rounded-[8px] bg-[var(--surface-2)] px-[12px] py-[6px]' className='absolute top-[16px] left-[16px] flex items-center justify-center rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-2)] px-[12px] py-[6px]'
style={{ pointerEvents: isPreview ? 'none' : 'auto' }} style={{ pointerEvents: isPreview ? 'none' : 'auto' }}
data-parent-id={id} data-parent-id={id}
data-node-role={`${data.kind}-start`} data-node-role={`${data.kind}-start`}

22
apps/sim/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview-subflow.tsx
View File

@@ -30,9 +30,11 @@ function WorkflowPreviewSubflowInner({ data }: NodeProps<WorkflowPreviewSubflowD
const startHandleId = isLoop ? 'loop-start-source' : 'parallel-start-source' const startHandleId = isLoop ? 'loop-start-source' : 'parallel-start-source'
const endHandleId = isLoop ? 'loop-end-source' : 'parallel-end-source' const endHandleId = isLoop ? 'loop-end-source' : 'parallel-end-source'
// Handle styles matching the actual subflow component // Handle styles matching the workflow-block component
const handleClass = const leftHandleClass =
'!border-none !bg-[var(--surface-7)] !h-5 !w-[7px] !rounded-l-[2px] !rounded-r-[2px]' '!z-[10] !border-none !bg-[var(--workflow-edge)] !h-5 !w-[7px] !rounded-l-[2px] !rounded-r-none'
const rightHandleClass =
'!z-[10] !border-none !bg-[var(--workflow-edge)] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none'
return ( return (
<div <div
@@ -47,9 +49,9 @@ function WorkflowPreviewSubflowInner({ data }: NodeProps<WorkflowPreviewSubflowD
type='target' type='target'
position={Position.Left} position={Position.Left}
id='target' id='target'
className={handleClass} className={leftHandleClass}
style={{ style={{
left: '-7px', left: '-8px',
top: `${HANDLE_POSITIONS.DEFAULT_Y_OFFSET}px`, top: `${HANDLE_POSITIONS.DEFAULT_Y_OFFSET}px`,
transform: 'translateY(-50%)', transform: 'translateY(-50%)',
}} }}
@@ -69,14 +71,14 @@ function WorkflowPreviewSubflowInner({ data }: NodeProps<WorkflowPreviewSubflowD
</div> </div>
{/* Start handle inside - connects to first block in subflow */} {/* Start handle inside - connects to first block in subflow */}
<div className='absolute top-[56px] left-[16px] flex items-center justify-center rounded-[8px] bg-[var(--surface-2)] px-[12px] py-[6px]'> <div className='absolute top-[56px] left-[16px] flex items-center justify-center rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-2)] px-[12px] py-[6px]'>
<span className='font-medium text-[14px] text-white'>Start</span> <span className='font-medium text-[14px] text-white'>Start</span>
<Handle <Handle
type='source' type='source'
position={Position.Right} position={Position.Right}
id={startHandleId} id={startHandleId}
className={handleClass} className={rightHandleClass}
style={{ right: '-7px', top: '50%', transform: 'translateY(-50%)' }} style={{ right: '-8px', top: '50%', transform: 'translateY(-50%)' }}
/> />
</div> </div>
@@ -85,9 +87,9 @@ function WorkflowPreviewSubflowInner({ data }: NodeProps<WorkflowPreviewSubflowD
type='source' type='source'
position={Position.Right} position={Position.Right}
id={endHandleId} id={endHandleId}
className={handleClass} className={rightHandleClass}
style={{ style={{
right: '-7px', right: '-8px',
top: `${HANDLE_POSITIONS.DEFAULT_Y_OFFSET}px`, top: `${HANDLE_POSITIONS.DEFAULT_Y_OFFSET}px`,
transform: 'translateY(-50%)', transform: 'translateY(-50%)',
}} }}