github/sim
1
0
Fork 0
mirror of https://github.com/simstudioai/sim.git synced 2026-01-06 21:54:01 -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 {
:root,
.light {
--bg: #f9faf8; /* main canvas - near white */
--surface-1: #f9faf8; /* sidebar, panels - light warm gray */
--surface-2: #fdfdfb; /* blocks, cards, modals - soft warm white */
--surface-3: #f4f5f1; /* popovers, headers - more contrast */
--surface-4: #f2f3ef; /* buttons base */
--border: #d7dcda; /* primary border */
--surface-5: #f0f1ed; /* inputs, form elements - subtle */
--border-1: #d7dcda; /* stronger border - sage gray */
--surface-6: #eceee9; /* popovers, elevated surfaces */
--surface-7: #e8e9e4;
--bg: #fdfdfd; /* main canvas - neutral near-white */
--surface-1: #fcfcfc; /* sidebar, panels */
--surface-2: #ffffff; /* blocks, cards, modals - pure white */
--surface-3: #f7f7f7; /* popovers, headers */
--surface-4: #f5f5f5; /* buttons base */
--border: #e0e0e0; /* primary border */
--surface-5: #f3f3f3; /* inputs, form elements */
--border-1: #e0e0e0; /* stronger border */
--surface-6: #f0f0f0; /* popovers, elevated surfaces */
--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-secondary: #404040;
--text-tertiary: #5c5c5c;
--text-muted: #737373;
--text-subtle: #8c8c8c;
--text-inverse: #f0fff6;
--text-inverse: #ffffff;
--text-error: #ef4444;
/* Borders / dividers */
--divider: #e8e9e4;
--border-muted: #dfe0db;
--border-success: #d7dcda;
--divider: #ededed;
--border-muted: #e4e4e4;
--border-success: #e0e0e0;
/* Brand & state */
--brand-400: #8e4cfb;
@@ -152,13 +152,13 @@
--c-883827: #7c2d12;
/* Terminal status badges */
--terminal-status-error-bg: #feeeee;
--terminal-status-error-bg: #fef2f2;
--terminal-status-error-border: #f87171;
--terminal-status-info-bg: #f5f5f4;
--terminal-status-info-border: #a8a29e;
--terminal-status-info-color: #57534e;
--terminal-status-warning-bg: #fef9e7;
--terminal-status-warning-border: #f5c842;
--terminal-status-info-bg: #f7f7f7;
--terminal-status-info-border: #a3a3a3;
--terminal-status-info-color: #525252;
--terminal-status-warning-bg: #fefce8;
--terminal-status-warning-border: #facc15;
--terminal-status-warning-color: #a16207;
}
.dark {

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

@@ -68,7 +68,7 @@ function TemplateDetailsLoading({ isWorkspaceContext, workspaceId }: TemplateDet
<div
className={cn(
'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 */}
@@ -638,7 +638,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
<div
className={cn(
'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 */}

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

@@ -212,7 +212,7 @@ function DocumentLoading({
return (
<div className='flex h-full flex-1 flex-col'>
<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} />
<div className='mt-[14px] flex items-center justify-between'>
@@ -234,7 +234,7 @@ function DocumentLoading({
</div>
<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)]' />
<Input
placeholder='Search chunks...'
@@ -788,7 +788,7 @@ export function Document({
return (
<div className='flex h-full flex-1 flex-col'>
<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} />
<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 (
<div className='flex h-full flex-1 flex-col'>
<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} />
<div className='mt-[14px] flex items-center justify-between'>
@@ -193,7 +193,7 @@ function KnowledgeBaseLoading({ knowledgeBaseName }: KnowledgeBaseLoadingProps)
</div>
<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)]' />
<Input
placeholder='Search documents...'
@@ -987,7 +987,7 @@ export function KnowledgeBase({
return (
<div className='flex h-full flex-1 flex-col'>
<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} />
<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() {
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='h-[17px] w-[120px] animate-pulse rounded-[4px] bg-[var(--surface-5)]' />
<div className='h-[22px] w-[90px] animate-pulse rounded-[4px] bg-[var(--surface-4)]' />
<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)] dark:bg-[var(--surface-5)]' />
</div>
<div className='flex flex-1 flex-col gap-[8px]'>
<div className='flex items-center justify-between'>
<div className='flex items-center gap-[6px]'>
<div className='h-[12px] w-[12px] animate-pulse rounded-[2px] bg-[var(--surface-5)]' />
<div className='h-[15px] w-[45px] animate-pulse rounded-[4px] 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-4)] dark:bg-[var(--surface-5)]' />
</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 className='h-0 w-full border-[var(--divider)] border-t' />
<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-[75%] 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)] dark:bg-[var(--surface-5)]' />
</div>
</div>
</div>
@@ -122,7 +122,7 @@ export function BaseCard({ id, title, docCount, description, updatedAt }: BaseCa
return (
<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]'>
<h3 className='min-w-0 flex-1 truncate font-medium text-[14px] text-[var(--text-primary)]'>
{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 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 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]'>

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.
*/
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()
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 */}
<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]'>
<span className='w-[160px] flex-shrink-0 font-medium text-[12px] text-[var(--text-tertiary)]'>
Workflow
@@ -66,8 +66,8 @@ export function WorkflowsList({
<div
key={workflow.workflowId}
className={cn(
'flex h-[44px] cursor-pointer items-center gap-[16px] px-[24px] hover:bg-[var(--surface-6)] dark:hover:bg-[var(--surface-4)]',
isSelected && 'bg-[var(--surface-6)] dark: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-3)] dark:bg-[var(--surface-4)]'
)}
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 }) {
return (
<div className='flex flex-col overflow-hidden rounded-[6px] 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 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] dark:bg-[var(--surface-3)]'>
<span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-sm'>
{title}
</span>
<Skeleton className='h-[20px] w-[40px]' />
</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 items-end gap-[2px]'>
{SKELETON_BAR_HEIGHTS.map((height, i) => (
@@ -81,8 +81,8 @@ function WorkflowRowSkeleton() {
function WorkflowsListSkeleton({ rowCount = 5 }: { rowCount?: number }) {
return (
<div className='flex h-full flex-col overflow-hidden rounded-[6px] bg-[var(--surface-1)]'>
<div className='flex-shrink-0 rounded-t-[6px] bg-[var(--surface-3)] px-[24px] py-[10px]'>
<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] dark:bg-[var(--surface-3)]'>
<div className='flex items-center gap-[16px]'>
<span className='w-[160px] flex-shrink-0 font-medium text-[12px] text-[var(--text-tertiary)]'>
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='mb-[16px] flex-shrink-0'>
<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 min-w-0 items-center justify-between gap-[8px] bg-[var(--surface-3)] px-[16px] py-[9px]'>
<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] dark:bg-[var(--surface-3)]'>
<span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-sm'>
Runs
</span>
@@ -581,7 +581,7 @@ export default function Dashboard({ logs, isLoading, error }: DashboardProps) {
</span>
)}
</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 ? (
<LineChart
data={globalDetails.executionCounts}
@@ -597,8 +597,8 @@ export default function Dashboard({ logs, isLoading, error }: DashboardProps) {
</div>
</div>
<div className='flex flex-col overflow-hidden rounded-[6px] 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 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] dark:bg-[var(--surface-3)]'>
<span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-sm'>
Errors
</span>
@@ -608,7 +608,7 @@ export default function Dashboard({ logs, isLoading, error }: DashboardProps) {
</span>
)}
</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 ? (
<LineChart
data={globalDetails.failureCounts}
@@ -624,8 +624,8 @@ export default function Dashboard({ logs, isLoading, error }: DashboardProps) {
</div>
</div>
<div className='flex flex-col overflow-hidden rounded-[6px] 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 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] dark:bg-[var(--surface-3)]'>
<span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-sm'>
Latency
</span>
@@ -635,7 +635,7 @@ export default function Dashboard({ logs, isLoading, error }: DashboardProps) {
</span>
)}
</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 ? (
<LineChart
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
ref={isSelected ? selectedRowRef : null}
className={cn(
'relative flex h-[44px] cursor-pointer items-center px-[24px] hover:bg-[var(--surface-4)]',
isSelected && '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-3)] dark:bg-[var(--surface-4)]'
)}
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>
<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 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(
'h-6 shrink-0 cursor-pointer whitespace-nowrap rounded-md px-2 text-[11px]',
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)}
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 }) {
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 (
<div className='flex h-full flex-1 flex-col 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]'>
<LogsToolbar
viewMode={viewMode}
@@ -385,9 +385,9 @@ export default function Logs() {
)}
>
{/* 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 */}
<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'>
<span className='w-[8%] min-w-[70px] font-medium text-[12px] text-[var(--text-tertiary)]'>
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 (
<div
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
)}
>
<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='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]'>
{Array.from({ length: 3 }).map((_, index) => (
<div
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>
@@ -49,14 +49,14 @@ export function TemplateCardSkeleton({ className }: { className?: string }) {
<div className='mt-[14px] flex items-center justify-between'>
<div className='flex items-center gap-[6px]'>
<div className='h-[20px] w-[20px] animate-pulse rounded-full bg-[var(--surface-5)]' />
<div className='h-3 w-20 animate-pulse rounded 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-4)] dark:bg-[var(--surface-5)]' />
</div>
<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-6 animate-pulse rounded bg-[var(--surface-5)]' />
<div className='h-3 w-3 animate-pulse rounded bg-[var(--surface-5)]' />
<div className='h-3 w-6 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-4)] dark: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-4)] dark:bg-[var(--surface-5)]' />
</div>
</div>
</div>
@@ -202,7 +202,7 @@ function TemplateCardInner({
<div
onClick={handleCardClick}
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
)}
>
@@ -223,7 +223,7 @@ function TemplateCardInner({
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>

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

@@ -2,5 +2,9 @@
* Templates layout - applies sidebar padding for all template routes.
*/
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 (
<div className='flex h-full flex-1 flex-col'>
<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 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]'>

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 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 = {
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-[-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])
@@ -205,13 +205,12 @@ export const SubflowNodeComponent = memo(({ data, id }: NodeProps<SubflowNodeDat
data-dragarea='true'
style={{
position: 'relative',
minHeight: '100%',
pointerEvents: isPreview ? 'none' : 'auto',
}}
>
{/* Subflow Start */}
<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' }}
data-parent-id={id}
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 endHandleId = isLoop ? 'loop-end-source' : 'parallel-end-source'
// Handle styles matching the actual subflow component
const handleClass =
'!border-none !bg-[var(--surface-7)] !h-5 !w-[7px] !rounded-l-[2px] !rounded-r-[2px]'
// Handle styles matching the workflow-block component
const leftHandleClass =
'!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 (
<div
@@ -47,9 +49,9 @@ function WorkflowPreviewSubflowInner({ data }: NodeProps<WorkflowPreviewSubflowD
type='target'
position={Position.Left}
id='target'
className={handleClass}
className={leftHandleClass}
style={{
left: '-7px',
left: '-8px',
top: `${HANDLE_POSITIONS.DEFAULT_Y_OFFSET}px`,
transform: 'translateY(-50%)',
}}
@@ -69,14 +71,14 @@ function WorkflowPreviewSubflowInner({ data }: NodeProps<WorkflowPreviewSubflowD
</div>
{/* 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>
<Handle
type='source'
position={Position.Right}
id={startHandleId}
className={handleClass}
style={{ right: '-7px', top: '50%', transform: 'translateY(-50%)' }}
className={rightHandleClass}
style={{ right: '-8px', top: '50%', transform: 'translateY(-50%)' }}
/>
</div>
@@ -85,9 +87,9 @@ function WorkflowPreviewSubflowInner({ data }: NodeProps<WorkflowPreviewSubflowD
type='source'
position={Position.Right}
id={endHandleId}
className={handleClass}
className={rightHandleClass}
style={{
right: '-7px',
right: '-8px',
top: `${HANDLE_POSITIONS.DEFAULT_Y_OFFSET}px`,
transform: 'translateY(-50%)',
}}