Skip to content

Commit 8f776e9

Browse files
emir-karabegemir-karabeg
committed
improvement(copilot): styling consolidation
1 parent 9bd11ba commit 8f776e9

File tree

15 files changed

+215
-158
lines changed

15 files changed

+215
-158
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@
8383
--brand-500: #6f3dfa;
8484
--brand-secondary: #33b4ff;
8585
--brand-tertiary: #22c55e;
86-
--brand-tertiary-2: #33c481;
86+
--brand-tertiary-2: #33c482;
8787
--warning: #ea580c;
8888

8989
/* Utility */
@@ -185,7 +185,7 @@
185185
--border: #2c2c2c;
186186
--surface-5: #363636;
187187
--border-1: #3d3d3d;
188-
--surface-12: #434343;
188+
--surface-12: #454545;
189189
--surface-13: #454545;
190190
--surface-14: #4a4a4a;
191191
--surface-15: #5a5a5a;
@@ -212,7 +212,7 @@
212212
--brand-400: #8e4cfb;
213213
--brand-secondary: #33b4ff;
214214
--brand-tertiary: #22c55e;
215-
--brand-tertiary-2: #33c481;
215+
--brand-tertiary-2: #33c482;
216216
--warning: #ff6600;
217217

218218
/* Utility */

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls/diff-controls.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -339,9 +339,9 @@ export const DiffControls = memo(function DiffControls() {
339339

340340
{/* Accept */}
341341
<Button
342-
variant='ghost'
342+
variant='tertiary'
343343
onClick={handleAccept}
344-
className='!text-[var(--surface-0)] h-[30px] rounded-[8px] bg-[var(--brand-tertiary)] px-3'
344+
className='h-[30px] rounded-[8px] px-3'
345345
title='Accept changes'
346346
>
347347
Accept

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/markdown-renderer.tsx‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -137,45 +137,45 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
137137
() => ({
138138
// Paragraph
139139
p: ({ children }: React.HTMLAttributes<HTMLParagraphElement>) => (
140-
<p className='mb-1 font-base font-season text-[#1f2124] text-sm leading-[1.25rem] last:mb-0 dark:font-[470] dark:text-[#E8E8E8]'>
140+
<p className='mb-1 font-base font-season text-[var(--text-primary)] text-sm leading-[1.25rem] last:mb-0 dark:font-[470]'>
141141
{children}
142142
</p>
143143
),
144144

145145
// Headings
146146
h1: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
147-
<h1 className='mt-3 mb-3 font-season font-semibold text-2xl text-[var(--text-primary)] dark:text-[#F0F0F0]'>
147+
<h1 className='mt-3 mb-3 font-season font-semibold text-2xl text-[var(--text-primary)]'>
148148
{children}
149149
</h1>
150150
),
151151
h2: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
152-
<h2 className='mt-2.5 mb-2.5 font-season font-semibold text-[var(--text-primary)] text-xl dark:text-[#F0F0F0]'>
152+
<h2 className='mt-2.5 mb-2.5 font-season font-semibold text-[var(--text-primary)] text-xl'>
153153
{children}
154154
</h2>
155155
),
156156
h3: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
157-
<h3 className='mt-2 mb-2 font-season font-semibold text-[var(--text-primary)] text-lg dark:text-[#F0F0F0]'>
157+
<h3 className='mt-2 mb-2 font-season font-semibold text-[var(--text-primary)] text-lg'>
158158
{children}
159159
</h3>
160160
),
161161
h4: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
162-
<h4 className='mt-5 mb-2 font-season font-semibold text-[var(--text-primary)] text-base dark:text-[#F0F0F0]'>
162+
<h4 className='mt-5 mb-2 font-season font-semibold text-[var(--text-primary)] text-base'>
163163
{children}
164164
</h4>
165165
),
166166

167167
// Lists
168168
ul: ({ children }: React.HTMLAttributes<HTMLUListElement>) => (
169169
<ul
170-
className='mt-1 mb-1 space-y-1 pl-6 font-base font-season text-[#1f2124] dark:font-[470] dark:text-[#E8E8E8]'
170+
className='mt-1 mb-1 space-y-1 pl-6 font-base font-season text-[var(--text-primary)] dark:font-[470]'
171171
style={{ listStyleType: 'disc' }}
172172
>
173173
{children}
174174
</ul>
175175
),
176176
ol: ({ children }: React.HTMLAttributes<HTMLOListElement>) => (
177177
<ol
178-
className='mt-1 mb-1 space-y-1 pl-6 font-base font-season text-[#1f2124] dark:font-[470] dark:text-[#E8E8E8]'
178+
className='mt-1 mb-1 space-y-1 pl-6 font-base font-season text-[var(--text-primary)] dark:font-[470]'
179179
style={{ listStyleType: 'decimal' }}
180180
>
181181
{children}
@@ -186,7 +186,7 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
186186
ordered,
187187
}: React.LiHTMLAttributes<HTMLLIElement> & { ordered?: boolean }) => (
188188
<li
189-
className='font-base font-season text-[#1f2124] dark:font-[470] dark:text-[#E8E8E8]'
189+
className='font-base font-season text-[var(--text-primary)] dark:font-[470]'
190190
style={{ display: 'list-item' }}
191191
>
192192
{children}
@@ -256,14 +256,14 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
256256
: 'javascript'
257257

258258
return (
259-
<div className='my-6 w-0 min-w-full overflow-hidden rounded-md border border-[var(--border-1)] bg-[#1F1F1F] text-sm'>
259+
<div className='my-6 w-0 min-w-full overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-1)] text-sm'>
260260
<div className='flex items-center justify-between border-[var(--border-1)] border-b px-4 py-1.5'>
261-
<span className='font-season text-[#A3A3A3] text-xs'>
261+
<span className='font-season text-[var(--text-muted)] text-xs'>
262262
{language === 'code' ? viewerLanguage : language}
263263
</span>
264264
<button
265265
onClick={handleCopy}
266-
className='text-[#A3A3A3] transition-colors hover:text-gray-300'
266+
className='text-[var(--text-muted)] transition-colors hover:text-[var(--text-tertiary)]'
267267
title='Copy'
268268
>
269269
{showCopySuccess ? (
@@ -293,7 +293,7 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
293293
if (inline) {
294294
return (
295295
<code
296-
className='whitespace-normal break-all rounded border border-[var(--border-1)] bg-[#1F1F1F] px-1 py-0.5 font-mono text-[#eeeeee] text-[0.9em]'
296+
className='whitespace-normal break-all rounded border border-[var(--border-1)] bg-[var(--surface-1)] px-1 py-0.5 font-mono text-[0.9em] text-[var(--text-primary)]'
297297
{...props}
298298
>
299299
{children}
@@ -309,35 +309,33 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
309309

310310
// Bold text
311311
strong: ({ children }: React.HTMLAttributes<HTMLElement>) => (
312-
<strong className='font-semibold text-[var(--text-primary)] dark:text-[#F0F0F0]'>
313-
{children}
314-
</strong>
312+
<strong className='font-semibold text-[var(--text-primary)]'>{children}</strong>
315313
),
316314

317315
// Bold text (alternative)
318316
b: ({ children }: React.HTMLAttributes<HTMLElement>) => (
319-
<b className='font-semibold text-[var(--text-primary)] dark:text-[#F0F0F0]'>{children}</b>
317+
<b className='font-semibold text-[var(--text-primary)]'>{children}</b>
320318
),
321319

322320
// Italic text
323321
em: ({ children }: React.HTMLAttributes<HTMLElement>) => (
324-
<em className='text-[#1f2124] italic dark:text-[#E8E8E8]'>{children}</em>
322+
<em className='text-[var(--text-primary)] italic'>{children}</em>
325323
),
326324

327325
// Italic text (alternative)
328326
i: ({ children }: React.HTMLAttributes<HTMLElement>) => (
329-
<i className='text-[#1f2124] italic dark:text-[#E8E8E8]'>{children}</i>
327+
<i className='text-[var(--text-primary)] italic'>{children}</i>
330328
),
331329

332330
// Blockquotes
333331
blockquote: ({ children }: React.HTMLAttributes<HTMLQuoteElement>) => (
334-
<blockquote className='my-4 border-[var(--border-1)] border-l-4 py-1 pl-4 font-season text-[#3a3d41] italic dark:border-gray-600 dark:text-[#E0E0E0]'>
332+
<blockquote className='my-4 border-[var(--border-1)] border-l-4 py-1 pl-4 font-season text-[var(--text-secondary)] italic'>
335333
{children}
336334
</blockquote>
337335
),
338336

339337
// Horizontal rule
340-
hr: () => <hr className='my-8 border-[var(--divider)] border-t dark:border-gray-400/[.07]' />,
338+
hr: () => <hr className='my-8 border-[var(--divider)] border-t' />,
341339

342340
// Links
343341
a: ({ href, children, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
@@ -349,29 +347,31 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
349347
// Tables
350348
table: ({ children }: React.TableHTMLAttributes<HTMLTableElement>) => (
351349
<div className='my-4 max-w-full overflow-x-auto'>
352-
<table className='min-w-full table-auto border border-[var(--border)] font-season text-sm dark:border-gray-600'>
350+
<table className='min-w-full table-auto border border-[var(--border-1)] font-season text-sm'>
353351
{children}
354352
</table>
355353
</div>
356354
),
357355
thead: ({ children }: React.HTMLAttributes<HTMLTableSectionElement>) => (
358-
<thead className='bg-[var(--surface-5)] text-left dark:bg-[#2A2A2A]'>{children}</thead>
356+
<thead className='bg-[var(--surface-5)] text-left dark:bg-[var(--surface-4)]'>
357+
{children}
358+
</thead>
359359
),
360360
tbody: ({ children }: React.HTMLAttributes<HTMLTableSectionElement>) => (
361-
<tbody className='divide-y divide-[var(--border)] dark:divide-gray-600'>{children}</tbody>
361+
<tbody className='divide-y divide-[var(--border-1)]'>{children}</tbody>
362362
),
363363
tr: ({ children }: React.HTMLAttributes<HTMLTableRowElement>) => (
364-
<tr className='border-[var(--border)] border-b transition-colors hover:bg-[var(--surface-5)] dark:border-gray-600 dark:hover:bg-[#2A2A2A]/60'>
364+
<tr className='border-[var(--border-1)] border-b transition-colors hover:bg-[var(--surface-5)] dark:hover:bg-[var(--surface-4)]/60'>
365365
{children}
366366
</tr>
367367
),
368368
th: ({ children }: React.ThHTMLAttributes<HTMLTableCellElement>) => (
369-
<th className='border-[var(--border)] border-r px-4 py-2 align-top font-base text-[#3a3d41] last:border-r-0 dark:border-gray-600 dark:font-[470] dark:text-[#E0E0E0]'>
369+
<th className='border-[var(--border-1)] border-r px-4 py-2 align-top font-base text-[var(--text-secondary)] last:border-r-0 dark:font-[470]'>
370370
{children}
371371
</th>
372372
),
373373
td: ({ children }: React.TdHTMLAttributes<HTMLTableCellElement>) => (
374-
<td className='break-words border-[var(--border)] border-r px-4 py-2 align-top font-base text-[#1f2124] last:border-r-0 dark:border-gray-600 dark:font-[470] dark:text-[#E8E8E8]'>
374+
<td className='break-words border-[var(--border-1)] border-r px-4 py-2 align-top font-base text-[var(--text-primary)] last:border-r-0 dark:font-[470]'>
375375
{children}
376376
</td>
377377
),
@@ -390,7 +390,7 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
390390
)
391391

392392
return (
393-
<div className='copilot-markdown-wrapper max-w-full space-y-3 break-words font-base font-season text-[#1f2124] text-sm leading-[1.25rem] dark:font-[470] dark:text-[#E8E8E8]'>
393+
<div className='copilot-markdown-wrapper max-w-full space-y-3 break-words font-base font-season text-[var(--text-primary)] text-sm leading-[1.25rem] dark:font-[470]'>
394394
<ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
395395
{content}
396396
</ReactMarkdown>

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/thinking-block.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@ interface ShimmerOverlayTextProps {
3636
function ShimmerOverlayText({ label, value, active = false }: ShimmerOverlayTextProps) {
3737
return (
3838
<span className='relative inline-block'>
39-
<span style={{ color: '#B8B8B8' }}>{label}</span>
40-
<span style={{ color: 'var(--text-muted)' }}>{value}</span>
39+
<span className='text-[var(--text-tertiary)]'>{label}</span>
40+
<span className='text-[var(--text-muted)]'>{value}</span>
4141
{active ? (
4242
<span
4343
aria-hidden='true'
@@ -195,13 +195,10 @@ export function ThinkingBlock({
195195

196196
{isExpanded && (
197197
<div className='ml-1 border-[var(--border-1)] border-l-2 pl-2'>
198-
<pre
199-
className='whitespace-pre-wrap font-[470] font-season text-[12px] leading-[1.15rem]'
200-
style={{ color: '#B8B8B8' }}
201-
>
198+
<pre className='whitespace-pre-wrap font-[470] font-season text-[12px] text-[var(--text-tertiary)] leading-[1.15rem]'>
202199
{content}
203200
{isStreaming && (
204-
<span className='ml-1 inline-block h-2 w-1 animate-pulse bg-[#B8B8B8]' />
201+
<span className='ml-1 inline-block h-2 w-1 animate-pulse bg-[var(--text-tertiary)]' />
205202
)}
206203
</pre>
207204
</div>

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx‎

Lines changed: 35 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,8 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
108108
const {
109109
showRestoreConfirmation,
110110
showCheckpointDiscardModal,
111+
isReverting,
112+
isProcessingDiscard,
111113
pendingEditRef,
112114
setShowCheckpointDiscardModal,
113115
handleRevertToCheckpoint,
@@ -265,30 +267,35 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
265267

266268
{/* Inline Checkpoint Discard Confirmation - shown below input in edit mode */}
267269
{showCheckpointDiscardModal && (
268-
<div className='mt-[8px] rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] p-[10px] dark:bg-[var(--surface-5)]'>
269-
<p className='mb-[8px] text-[var(--text-primary)] text-sm'>
270+
<div className='mt-[8px] rounded-[4px] border border-[var(--border)] bg-[var(--surface-4)] p-[10px]'>
271+
<p className='mb-[8px] text-[12px] text-[var(--text-primary)]'>
270272
Continue from a previous message?
271273
</p>
272-
<div className='flex gap-[6px]'>
274+
<div className='flex gap-[8px]'>
273275
<Button
274276
onClick={handleCancelCheckpointDiscard}
275-
variant='default'
276-
className='flex flex-1 items-center justify-center gap-[6px] px-[8px] py-[4px] text-xs'
277+
variant='active'
278+
size='sm'
279+
className='flex-1'
280+
disabled={isProcessingDiscard}
277281
>
278-
<span>Cancel</span>
279-
<span className='text-[10px] text-[var(--text-muted)]'>(Esc)</span>
282+
Cancel
280283
</Button>
281284
<Button
282285
onClick={handleContinueAndRevert}
283-
variant='outline'
284-
className='flex-1 px-[8px] py-[4px] text-xs'
286+
variant='destructive'
287+
size='sm'
288+
className='flex-1'
289+
disabled={isProcessingDiscard}
285290
>
286-
Revert
291+
{isProcessingDiscard ? 'Reverting...' : 'Revert'}
287292
</Button>
288293
<Button
289294
onClick={handleContinueWithoutRevert}
290-
variant='outline'
291-
className='flex-1 px-[8px] py-[4px] text-xs'
295+
variant='tertiary'
296+
size='sm'
297+
className='flex-1'
298+
disabled={isProcessingDiscard}
292299
>
293300
Continue
294301
</Button>
@@ -316,7 +323,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
316323
>
317324
<div
318325
ref={messageContentRef}
319-
className={`relative whitespace-pre-wrap break-words px-[2px] py-1 font-medium font-sans text-[#0D0D0D] text-sm leading-[1.25rem] dark:text-gray-100 ${isSendingMessage && isLastUserMessage && isHoveringMessage ? 'pr-7' : ''} ${!isExpanded && needsExpansion ? 'max-h-[60px] overflow-hidden' : 'overflow-visible'}`}
326+
className={`relative whitespace-pre-wrap break-words px-[2px] py-1 font-medium font-sans text-[var(--text-primary)] text-sm leading-[1.25rem] ${isSendingMessage && isLastUserMessage && isHoveringMessage ? 'pr-7' : ''} ${!isExpanded && needsExpansion ? 'max-h-[60px] overflow-hidden' : 'overflow-visible'}`}
320327
>
321328
{(() => {
322329
const text = message.content || ''
@@ -369,7 +376,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
369376
e.stopPropagation()
370377
abortMessage()
371378
}}
372-
className='h-[20px] w-[20px] rounded-full bg-[#C0C0C0] p-0 transition-colors hover:bg-[#D0D0D0] dark:bg-[#C0C0C0] dark:hover:bg-[#D0D0D0]'
379+
className='h-[20px] w-[20px] rounded-full bg-[var(--c-C0C0C0)] p-0 transition-colors hover:bg-[var(--c-D0D0D0)]'
373380
title='Stop generation'
374381
>
375382
<svg
@@ -406,29 +413,30 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
406413

407414
{/* Inline Restore Checkpoint Confirmation */}
408415
{showRestoreConfirmation && (
409-
<div className='mt-[8px] rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] p-[10px] dark:bg-[var(--surface-5)]'>
410-
<p className='mb-[8px] text-[var(--text-primary)] text-sm'>
416+
<div className='mt-[8px] rounded-[4px] border border-[var(--border)] bg-[var(--surface-4)] p-[10px]'>
417+
<p className='mb-[8px] text-[12px] text-[var(--text-primary)]'>
411418
Revert to checkpoint? This will restore your workflow to the state saved at this
412419
checkpoint.{' '}
413-
<span className='font-medium text-[var(--text-error)]'>
414-
This action cannot be undone.
415-
</span>
420+
<span className='text-[var(--text-error)]'>This action cannot be undone.</span>
416421
</p>
417-
<div className='flex gap-[6px]'>
422+
<div className='flex gap-[8px]'>
418423
<Button
419424
onClick={handleCancelRevert}
420-
variant='default'
421-
className='flex flex-1 items-center justify-center gap-[6px] px-[8px] py-[4px] text-xs'
425+
variant='active'
426+
size='sm'
427+
className='flex-1'
428+
disabled={isReverting}
422429
>
423-
<span>Cancel</span>
424-
<span className='text-[10px] text-[var(--text-muted)]'>(Esc)</span>
430+
Cancel
425431
</Button>
426432
<Button
427433
onClick={handleConfirmRevert}
428-
variant='outline'
429-
className='flex-1 px-[8px] py-[4px] text-xs'
434+
variant='destructive'
435+
size='sm'
436+
className='flex-1'
437+
disabled={isReverting}
430438
>
431-
Revert
439+
{isReverting ? 'Reverting...' : 'Revert'}
432440
</Button>
433441
</div>
434442
</div>

0 commit comments

Comments
 (0)