Skip to content

Commit 2f43148

Browse files
waleedlatif1waleedlatif1
authored
improvement(ui): align terminal with the workflow design system, fix row hover states (#6534)
* improvement(ui): align terminal with the workflow design system, fix row hover states Terminal: - derive log-row block tiles the way the canvas does (role accent for core blocks and subflows, provider colour only for role-less integrations) - compose rows from chipGeometryClass, chipContentLabelClass and disclosureChevronClass instead of re-deriving the pill - align the output tree's greys with the log rows; share ROW_STYLES.nested and BADGE_STYLE instead of duplicating the literals - neutralise value-type badges so red is the only colour in the tree - unify the row/separator gutter; normalise icon sizes to size-[14px] - drop dead flattenEntryTree and the RunningBadge re-exports Hover model (chipVariants, PopoverItem, Combobox, docs sidebar, terminal): - hover paints --surface-hover, one step below the --surface-active a selected row keeps, so a hovered row no longer impersonates the selected one - an active row holds its surface through hover instead of brightening Deploy modal: - move the footer actions onto the Chip family, primary action as Chip variant='primary' to match every other modal footer * improvement(emcn): extract the row-state surface pair, simplify the terminal rows Review follow-ups from /simplify and /cleanup: - add chipHoverSurfaceClass / chipActiveSurfaceClass to chip-chrome as the one home for the two-surface row model, and route chipVariants, PopoverItem, Combobox, the docs sidebar, the landing preview and queued messages through them instead of restating the literals - terminal ROW_STYLES now renders chipVariants rather than re-deriving its output, and the four rows share content/label/status classes resolved once - structured-output composes chipGeometryClass with an h-auto override rather than restating four of its literals - getEntryAccentType collapses to one expression, dropping the SYNTHETIC_BLOCK types coupling - collapse the chip compound variants to two array-matched entries - deploy modal: hoist the shared loader adornment, size it with chipContentIconClass so it matches every other chip icon - landing preview drops its --c-active/--c-hover inline aliases for the tokens - trim the rationale to one canonical copy with cross-references, and convert the block comments on declarations to TSDoc * improvement(workflow): align canvas controls with the canvas surface and icon scale - floating controls sit on --surface-2, the surface the block cards use, rather than --surface-1 (the sidebar/panel surface) - undo/redo/fit glyphs drop 16px -> the platform's 14px default, and the mode dropdown's own 12px icons come up to match; the control had three icon sizes - inactive buttons hover to --surface-hover instead of --surface-5, which was the active mode button's resting fill, so hovering one looked selected - inner radius goes concentric with the 4px padding (rounded-sm inside rounded-lg) * improvement(workflow): give the canvas-mode chevron the same treatment as its siblings It was the only control in the cluster with no hover fill and a different rest colour (--text-muted against the others' --text-secondary), so it read fainter and behaved differently under the pointer. It is also a disclosure chevron, so it now uses disclosureChevronClass instead of a hand-rolled duration-100 copy, and a real 20px box instead of the !p-1.5 override plus -m-1 hit-area hack. * test(terminal): lock the log-row accent rule against the block toolbar getEntryAccentType encodes a cross-surface rule — a block must be accented the same way in the terminal as in the block toolbar — and nothing enforced it. The table covers every branch: core blocks mapped and unmapped, role-bearing and role-less integrations and triggers, the config-less subflows, and the synthesized error/validation/cancelled rows that must keep their status fill. Verified failing: reverting the guard to an unconditional return reds two of the four cases. * fix(workflow): make notifications track panel and terminal resize live The toast stack insets by --panel-width / --terminal-height, but a resize drag writes those to the resized subtree only (.panel-container / .terminal-container) rather than to :root, because a custom-property write on :root recalculates the whole document (~150x slower). The stack is portalled to <body>, so it shares no ancestor with either and kept reading the stale :root value — it held its pre-drag position and jumped once the drag committed, while the canvas controls, which are laid out inside the shrinking canvas, tracked the drag in realtime. useDragResize now accepts several target subtrees and writes each one, so the scoped recalc is preserved and every consumer follows the drag frame by frame. The stack is found through a new data-toast-viewport attribute. Also drops the canvas controls from bottom-4 to bottom-2: the toast clears the terminal by 8px (it anchors from the viewport, and the terminal is inset by CONTENT_WINDOW_GAP), where the controls measure from the canvas floor and so sat at twice the gap. * improvement(workflow): inset the canvas controls 8px off both edges The toast stack clears the terminal and the panel by 8px — it anchors from the viewport at --terminal-height/--panel-width + 16px, and both are themselves inset by CONTENT_WINDOW_GAP (8px). The controls measure from the canvas floor and wall instead, so their 16px read as twice the gap on both axes. * improvement(workflow): lift the canvas controls and toasts to a 12px clearance 8px sat them too close to the terminal. 12 is on the same 4px grid as the surrounding spacing, where 10 would have been the only off-grid value in the area. Both surfaces clear the terminal and the panel by the same amount, so they read as one row; the toast's literals move into named insets rather than staying bare numbers in a style object. * refactor(hooks): split the drag's resize target from its other var consumers getTarget briefly accepted a list, which made the first entry both the resized element and the drag's liveness reference. A toast auto-dismisses after 5s, so had one ever led that list, its mid-drag unmount would have read as the drag target detaching and skipped the final recompute on release. The co-consumers now come through getExtraTargets, which is written but never consulted for liveness, and can come and go freely. * fix(emcn): stop the combobox cursor diverging from what Enter commits The option rows painted --surface-active from CSS :hover as well as from isHighlighted. CSS :hover tracks the pointer continuously while highlightedIndex only advances on mouseenter, so once the list scrolled under a stationary pointer the row that looked selected was not the one Enter would commit — Enter reads filteredOptions[highlightedIndex]. isHighlighted is now the single source of truth for the cursor, so paint and commit cannot disagree. The row under a stationary pointer may lag a scroll until the mouse moves, but it lags in agreement with what Enter will do, which is the invariant worth keeping. Disabled options also stop painting on hover, matching the mouseenter guard that already refused to highlight them. The 'All' row keeps its own hover: it clears the highlight rather than taking it, so it has no isHighlighted paint to fall back on. * fix(toast): derive the workflow inset from the shell's actual padding WORKFLOW_INSET_PX baked in the 8px the workspace shell normally insets the panel and terminal by, so the stack's 20px resolved to a 12px clearance — matching the canvas controls. But the shell drops to p-0 on the desktop title-bar shell with a collapsed sidebar, and there the stack would have sat 20px out while the controls, laid out inside the shell, stayed at 12. The stack now adds --workspace-content-gap (published on :root, zeroed by the same condition that zeroes the padding) to a flat 12, so the two surfaces hold the same clearance in both configurations. Before this PR they matched in the p-0 case at 16px each, so this closes a divergence the PR would otherwise have introduced.
1 parent 1551923 commit 2f43148

31 files changed

Lines changed: 492 additions & 338 deletions

File tree

‎.claude/rules/emcn-components.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ Import components, `cn`, and tokens from the `@sim/emcn` barrel; icons come from
1111

1212
Never hand-roll the chip pill from raw class strings (they go stale). Compose from the canonical sources:
1313

14-
- **Surface, typography + content tokens:** `chip/chip-chrome.ts` — `chipFilledSurfaceTokens`, `chipFieldSurfaceClass`, `chipFieldTextClass` (text fields and the dropdown search box build on these), plus the chip-content chrome `chipContentGap`, `chipGeometryClass`, `chipContentIconClass`, `chipContentLabelClass`, and `cellIconNodeClass` (non-chip surfaces that must visually match chip content, e.g. resource table cells). All are re-exported from the `@sim/emcn` barrel — no subpath import needed.
14+
- **Surface, typography + content tokens:** `chip/chip-chrome.ts` — `chipFilledSurfaceTokens`, `chipFieldSurfaceClass`, `chipFieldTextClass` (text fields and the dropdown search box build on these), plus the chip-content chrome `chipContentGap`, `chipGeometryClass`, `chipContentIconClass`, `chipContentLabelClass`, `cellIconNodeClass` (non-chip surfaces that must visually match chip content, e.g. resource table cells), and the row-state pair `chipHoverSurfaceClass` / `chipActiveSurfaceClass` (hover vs. selected — mutually exclusive, so a selected row holds its surface through hover; every hand-rolled row imports these rather than restating the literals). All are re-exported from the `@sim/emcn` barrel — no subpath import needed.
1515
- **Pill geometry:** `chip/chip.tsx` — `chipVariants` (30px tall, `rounded-lg`, `px-2`, icon↔text `gap-1.5`). Every pill-shaped trigger (`ChipDropdown`, `ChipSelect`, `ChipSwitch`) reuses it for visual parity.
1616

1717
Canonical look: normal font-weight (never `font-medium`/`font-semibold`), value text `--text-body`, icons `--text-icon` at `size-[14px]`, placeholder `--text-muted`, `transition-colors`, **no focus ring** (the caret marks focus). Filled surface is `--surface-5` light / `--surface-4` dark with a `--border-1` border.

‎apps/docs/app/global.css‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -518,19 +518,13 @@ html #nd-sidebar button[data-active="true"] {
518518
color: var(--text-body) !important;
519519
}
520520

521-
/* Hover state — the app's nav Chip hovers to --surface-active. These rules must
522-
carry !important to beat fumadocs' own sidebar styles, which also means they
523-
override the Tailwind hover utilities on the items; keep the two in step. */
521+
/* Hover state — emcn's two-surface row model (see `chipHoverSurfaceClass`).
522+
These rules must carry !important to beat fumadocs' own sidebar styles, which
523+
also means they override the Tailwind hover utilities on the items; keep the
524+
two in step. */
524525
html #nd-sidebar a:not(:has(span.font-mono)):hover:not([data-active="true"]),
525526
html #nd-sidebar button:hover:not([data-active="true"]) {
526-
background-color: var(--surface-active) !important;
527-
}
528-
529-
/* An active item darkens one surface on hover, matching the app's active Chip */
530-
html #nd-sidebar a[data-active="true"]:not(:has(span.font-mono)):hover,
531-
html #nd-sidebar button[data-active="true"]:hover {
532-
background-color: var(--surface-6) !important;
533-
color: var(--text-body) !important;
527+
background-color: var(--surface-hover) !important;
534528
}
535529

536530
/* Hide search, platform, and collapse button from sidebar completely */

‎apps/docs/components/docs-layout/sidebar-components.tsx‎

Lines changed: 22 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
'use client'
22

33
import { type ReactNode, useState } from 'react'
4+
import { chipActiveSurfaceClass, chipHoverSurfaceClass } from '@sim/emcn'
45
import { ChevronRight } from '@sim/emcn/icons'
56
import type { Folder, Item, Separator } from 'fumadocs-core/page-tree'
67
import { useSidebar } from 'fumadocs-ui/components/sidebar/base'
@@ -43,7 +44,7 @@ function isActive(url: string, pathname: string, nested = true): boolean {
4344
/**
4445
* Rows mirror the app sidebar's chip pill: 30px tall, `rounded-lg`, `px-2`, 14px
4546
* at normal weight, `--text-body` at rest AND when active — only the background
46-
* moves, to `--surface-active`, then `--surface-6` when an active row is hovered.
47+
* moves, on the two-surface model — see emcn's `chipHoverSurfaceClass`.
4748
*
4849
* Height, horizontal padding, weight and color are additionally pinned in
4950
* `global.css` (`html #nd-sidebar a…`), which needs `!important` to beat
@@ -52,40 +53,33 @@ function isActive(url: string, pathname: string, nested = true): boolean {
5253
* the stylesheet is what actually lands on desktop.
5354
*/
5455
const ITEM_BASE =
55-
'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-[var(--text-body)] text-sm transition-colors hover:bg-[var(--surface-active)]'
56-
const ITEM_ACTIVE_MOBILE = 'bg-[var(--surface-active)]'
56+
'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-[var(--text-body)] text-sm transition-colors'
57+
const ITEM_ACTIVE_MOBILE = chipActiveSurfaceClass
5758

5859
const ITEM_DESKTOP =
5960
'lg:mb-[0.0625rem] lg:block lg:rounded-lg lg:px-2 lg:font-normal lg:text-sm lg:leading-tight'
6061
const ITEM_TEXT = 'lg:text-[var(--text-body)]'
61-
const ITEM_HOVER = 'lg:hover:bg-[var(--surface-active)]'
62-
const ITEM_ACTIVE =
63-
'lg:bg-[var(--surface-active)] lg:font-normal lg:text-[var(--text-body)] lg:hover:bg-[var(--surface-6)]'
62+
/**
63+
* Unprefixed, and applied only to inactive rows — an unconditional hover in
64+
* `ITEM_BASE` would fade the current page under the pointer below `lg`.
65+
*/
66+
const ITEM_HOVER = chipHoverSurfaceClass
67+
const ITEM_ACTIVE = 'lg:bg-[var(--surface-active)] lg:font-normal lg:text-[var(--text-body)]'
6468

6569
const FOLDER_TEXT = 'lg:text-[var(--text-body)] lg:font-normal'
66-
const FOLDER_HOVER = 'lg:hover:bg-[var(--surface-active)]'
67-
const FOLDER_ACTIVE =
68-
'lg:bg-[var(--surface-active)] lg:text-[var(--text-body)] lg:hover:bg-[var(--surface-6)]'
70+
const FOLDER_HOVER = chipHoverSurfaceClass
71+
const FOLDER_ACTIVE = 'lg:bg-[var(--surface-active)] lg:text-[var(--text-body)]'
72+
73+
const itemClass = (active: boolean) =>
74+
cn(ITEM_BASE, ITEM_DESKTOP, ITEM_TEXT, active ? cn(ITEM_ACTIVE_MOBILE, ITEM_ACTIVE) : ITEM_HOVER)
6975

7076
export function SidebarItem({ item }: { item: Item }) {
7177
const pathname = usePathname()
7278
const { prefetch } = useSidebar()
7379
const active = isActive(item.url, pathname, false)
7480

7581
return (
76-
<Link
77-
href={item.url}
78-
prefetch={prefetch}
79-
data-active={active}
80-
className={cn(
81-
ITEM_BASE,
82-
active && ITEM_ACTIVE_MOBILE,
83-
ITEM_DESKTOP,
84-
ITEM_TEXT,
85-
!active && ITEM_HOVER,
86-
active && ITEM_ACTIVE
87-
)}
88-
>
82+
<Link href={item.url} prefetch={prefetch} data-active={active} className={itemClass(active)}>
8983
{item.name}
9084
</Link>
9185
)
@@ -119,14 +113,7 @@ export function SidebarFolder({ item, children }: { item: Folder; children: Reac
119113
href={item.index.url}
120114
prefetch={prefetch}
121115
data-active={active}
122-
className={cn(
123-
ITEM_BASE,
124-
active && ITEM_ACTIVE_MOBILE,
125-
ITEM_DESKTOP,
126-
ITEM_TEXT,
127-
!active && ITEM_HOVER,
128-
active && ITEM_ACTIVE
129-
)}
116+
className={itemClass(active)}
130117
>
131118
{item.name}
132119
</Link>
@@ -144,12 +131,10 @@ export function SidebarFolder({ item, children }: { item: Folder; children: Reac
144131
data-active={active}
145132
className={cn(
146133
'flex flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
147-
'text-[var(--text-body)] hover:bg-[var(--surface-active)]',
148-
active && ITEM_ACTIVE_MOBILE,
134+
'text-[var(--text-body)]',
149135
'lg:block lg:flex-1 lg:rounded-lg lg:px-2 lg:text-sm lg:leading-tight',
150136
FOLDER_TEXT,
151-
!active && FOLDER_HOVER,
152-
active && FOLDER_ACTIVE
137+
active ? cn(ITEM_ACTIVE_MOBILE, FOLDER_ACTIVE) : FOLDER_HOVER
153138
)}
154139
>
155140
{item.name}
@@ -158,8 +143,8 @@ export function SidebarFolder({ item, children }: { item: Folder; children: Reac
158143
<button
159144
onClick={toggleOpen}
160145
className={cn(
161-
'rounded-md p-1 hover:bg-[var(--surface-active)]',
162-
'lg:cursor-pointer lg:rounded-md lg:p-1 lg:transition-colors lg:hover:bg-[var(--surface-active)]'
146+
'rounded-md p-1 transition-colors lg:cursor-pointer',
147+
chipHoverSurfaceClass
163148
)}
164149
aria-label={open ? 'Collapse' : 'Expand'}
165150
>
@@ -172,7 +157,7 @@ export function SidebarFolder({ item, children }: { item: Folder; children: Reac
172157
onClick={toggleOpen}
173158
className={cn(
174159
'flex flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
175-
'text-[var(--text-body)] hover:bg-[var(--surface-active)]',
160+
'text-[var(--text-body)]',
176161
'lg:flex lg:w-full lg:cursor-pointer lg:items-center lg:justify-between lg:rounded-lg lg:px-2 lg:text-left lg:text-sm lg:leading-tight',
177162
FOLDER_TEXT,
178163
FOLDER_HOVER

‎apps/sim/app/(landing)/components/landing-preview/components/landing-preview-sidebar/landing-preview-sidebar.tsx‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
'use client'
2-
import { ChevronDown, cn, Home, Library } from '@sim/emcn'
2+
import {
3+
ChevronDown,
4+
chipActiveSurfaceClass,
5+
chipHoverSurfaceClass,
6+
cn,
7+
Home,
8+
Library,
9+
} from '@sim/emcn'
310
import { Database, File, HelpCircle, Search, Settings, Table, Workflow } from '@sim/emcn/icons'
411
import type { PreviewWorkflow } from '@/app/(landing)/components/landing-preview/components/landing-preview-workflow/workflow-data'
512

@@ -51,8 +58,8 @@ function NavItem({
5158
type='button'
5259
onClick={onClick}
5360
className={cn(
54-
'mx-0.5 flex h-[28px] items-center gap-2 rounded-[8px] px-2 transition-colors hover-hover:bg-[var(--c-active)]',
55-
isActive && 'bg-[var(--c-active)]'
61+
'mx-0.5 flex h-[28px] items-center gap-2 rounded-[8px] px-2 transition-colors',
62+
isActive ? chipActiveSurfaceClass : chipHoverSurfaceClass
5663
)}
5764
>
5865
<Icon className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
@@ -77,10 +84,7 @@ export function LandingPreviewSidebar({
7784
const isHomeActive = activeView === 'home'
7885

7986
return (
80-
<div
81-
className='flex h-full w-[248px] flex-shrink-0 flex-col bg-[var(--surface-1)] pt-3'
82-
style={{ '--c-active': 'var(--surface-active)' } as React.CSSProperties}
83-
>
87+
<div className='flex h-full w-[248px] flex-shrink-0 flex-col bg-[var(--surface-1)] pt-3'>
8488
{/* Workspace Header */}
8589
<div className='flex-shrink-0 px-2.5'>
8690
<div className='pointer-events-none flex h-[32px] w-full items-center gap-2 rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-2)] pr-2 pl-[5px]'>
@@ -107,8 +111,8 @@ export function LandingPreviewSidebar({
107111
type='button'
108112
onClick={onSelectHome}
109113
className={cn(
110-
'mx-0.5 flex h-[28px] items-center gap-2 rounded-[8px] px-2 transition-colors hover-hover:bg-[var(--c-active)]',
111-
isHomeActive && 'bg-[var(--c-active)]'
114+
'mx-0.5 flex h-[28px] items-center gap-2 rounded-[8px] px-2 transition-colors',
115+
isHomeActive ? chipActiveSurfaceClass : chipHoverSurfaceClass
112116
)}
113117
>
114118
<Home className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
@@ -151,8 +155,8 @@ export function LandingPreviewSidebar({
151155
type='button'
152156
onClick={() => onSelectWorkflow(workflow.id)}
153157
className={cn(
154-
'mx-0.5 flex h-[28px] w-full items-center gap-2 rounded-[8px] px-2 transition-colors hover-hover:bg-[var(--surface-active)]',
155-
isActive && 'bg-[var(--surface-active)]'
158+
'mx-0.5 flex h-[28px] w-full items-center gap-2 rounded-[8px] px-2 transition-colors',
159+
isActive ? chipActiveSurfaceClass : chipHoverSurfaceClass
156160
)}
157161
>
158162
<Workflow className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />

‎apps/sim/app/_styles/globals.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,18 @@
2222
--panel-width: 320px; /* PANEL_WIDTH.DEFAULT */
2323
--editor-connections-height: 172px; /* EDITOR_CONNECTIONS_HEIGHT.DEFAULT */
2424
--terminal-height: 206px; /* TERMINAL_HEIGHT.DEFAULT */
25+
/**
26+
* The padding `.workspace-content-shell` insets the panel and terminal from
27+
* the viewport by (CONTENT_WINDOW_GAP).
28+
*
29+
* Published here because surfaces portalled to `<body>` — the toast stack —
30+
* position against those elements from the viewport, so they must add back
31+
* whatever separates the element from the viewport edge. Reading it rather
32+
* than hardcoding 8px is what keeps the toast and the canvas controls on the
33+
* same clearance when the shell drops its padding; the controls are laid out
34+
* inside the shell and so need no correction.
35+
*/
36+
--workspace-content-gap: 8px;
2537
--output-panel-width: 560px; /* OUTPUT_PANEL_WIDTH.DEFAULT */
2638
/**
2739
* Neutral border and divider thickness. Standard-density displays cannot draw
@@ -162,6 +174,14 @@ html[data-sim-desktop-title-bar="inset"]
162174
--workspace-content-title-bar-inset: var(--desktop-title-bar-height);
163175
}
164176

177+
/* The one case the shell drops its padding entirely (see `workspace-chrome.tsx`:
178+
`isCollapsed && '[[data-sim-desktop-title-bar=inset]_&]:p-0'`). Declared on the
179+
root so the portalled toast stack — which cannot inherit from the shell — sees
180+
it too, and keeps the same clearance the in-shell canvas controls keep. */
181+
html[data-sim-desktop-title-bar="inset"]:has(.workspace-content-shell[data-sidebar-collapsed]) {
182+
--workspace-content-gap: 0px;
183+
}
184+
165185
.workspace-root code,
166186
.workspace-root kbd,
167187
.workspace-root samp,

‎apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client'
22

33
import { useCallback, useRef, useState } from 'react'
4-
import { cn, Tooltip } from '@sim/emcn'
4+
import { chipActiveSurfaceClass, chipHoverSurfaceClass, cn, Tooltip } from '@sim/emcn'
55
import { ArrowUp, ChevronDown, ChevronRight, Paperclip, Pencil, Trash, X } from '@sim/emcn/icons'
66
import { UserMessageContent } from '@/app/workspace/[workspaceId]/home/components/user-message-content'
77
import type { QueuedMessage } from '@/app/workspace/[workspaceId]/home/types'
@@ -54,7 +54,10 @@ export function QueuedMessages({
5454
<button
5555
type='button'
5656
onClick={() => setIsExpanded(!isExpanded)}
57-
className='flex w-full items-center gap-1.5 px-3.5 py-2 transition-colors hover-hover:bg-[var(--surface-active)]'
57+
className={cn(
58+
'flex w-full items-center gap-1.5 px-3.5 py-2 transition-colors',
59+
chipHoverSurfaceClass
60+
)}
5861
>
5962
{isExpanded ? (
6063
<ChevronDown className='size-[14px] text-[var(--text-icon)]' />
@@ -75,8 +78,8 @@ export function QueuedMessages({
7578
<div
7679
key={msg.id}
7780
className={cn(
78-
'flex items-center gap-2 py-1.5 pr-2 pl-3.5 transition-colors hover-hover:bg-[var(--surface-active)]',
79-
isEditing && 'bg-[var(--surface-active)]'
81+
'flex items-center gap-2 py-1.5 pr-2 pl-3.5 transition-colors',
82+
isEditing ? chipActiveSurfaceClass : chipHoverSurfaceClass
8083
)}
8184
>
8285
<div className='flex size-[16px] shrink-0 items-center justify-center'>

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { useCallback, useEffect, useMemo, useState } from 'react'
44
import {
55
Badge,
6-
Button,
6+
Chip,
77
ChipCombobox,
88
ChipInput,
99
type ComboboxOption,
@@ -506,9 +506,9 @@ export function McpDeploy({
506506
<p className='text-[var(--text-muted)] text-small'>
507507
Create an MCP Server to expose your workflows as tools.
508508
</p>
509-
<Button variant='tertiary' onClick={() => setShowCreateModal(true)}>
509+
<Chip variant='primary' onClick={() => setShowCreateModal(true)}>
510510
Create MCP Server
511-
</Button>
511+
</Chip>
512512
</div>
513513
<CreateWorkflowMcpServerModal
514514
open={showCreateModal}

0 commit comments

Comments
 (0)