Skip to content

refactor(ui): consolidate product corner radii #8138

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
waleedlatif1 merged 1 commit into from
Sep 23, 2026
Merged

refactor(ui): consolidate product corner radii #8138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions apps/sim/app/(auth)/login/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,22 @@ import { Skeleton } from '@sim/emcn'
export default function LoginLoading() {
return (
<div className='flex flex-col items-center'>
<Skeleton className='h-[38px] w-[80px] rounded-[4px]' />
<Skeleton className='h-[38px] w-[80px] rounded-sm' />
<div className='mt-8 w-full space-y-2'>
<Skeleton className='h-[14px] w-[40px] rounded-[4px]' />
<Skeleton className='h-[44px] w-full rounded-[10px]' />
<Skeleton className='h-[14px] w-[40px] rounded-sm' />
<Skeleton className='h-[44px] w-full rounded-lg' />
</div>
<div className='mt-4 w-full space-y-2'>
<Skeleton className='h-[14px] w-[64px] rounded-[4px]' />
<Skeleton className='h-[44px] w-full rounded-[10px]' />
<Skeleton className='h-[14px] w-[64px] rounded-sm' />
<Skeleton className='h-[44px] w-full rounded-lg' />
</div>
<Skeleton className='mt-6 h-[44px] w-full rounded-[10px]' />
<Skeleton className='mt-6 h-[1px] w-full rounded-[1px]' />
<Skeleton className='mt-6 h-[44px] w-full rounded-lg' />
<Skeleton className='mt-6 h-[1px] w-full rounded-full' />
<div className='mt-6 flex w-full gap-3'>
<Skeleton className='h-[44px] flex-1 rounded-[10px]' />
<Skeleton className='h-[44px] flex-1 rounded-[10px]' />
<Skeleton className='h-[44px] flex-1 rounded-lg' />
<Skeleton className='h-[44px] flex-1 rounded-lg' />
</div>
<Skeleton className='mt-6 h-[14px] w-[200px] rounded-[4px]' />
<Skeleton className='mt-6 h-[14px] w-[200px] rounded-sm' />
</div>
)
}
12 changes: 6 additions & 6 deletions apps/sim/app/(auth)/reset-password/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@ import { Skeleton } from '@sim/emcn'
export default function ResetPasswordLoading() {
return (
<div className='flex flex-col items-center'>
<Skeleton className='h-[38px] w-[160px] rounded-[4px]' />
<Skeleton className='mt-3 h-[14px] w-[280px] rounded-[4px]' />
<Skeleton className='h-[38px] w-[160px] rounded-sm' />
<Skeleton className='mt-3 h-[14px] w-[280px] rounded-sm' />
<div className='mt-8 w-full space-y-2'>
<Skeleton className='h-[14px] w-[40px] rounded-[4px]' />
<Skeleton className='h-[44px] w-full rounded-[10px]' />
<Skeleton className='h-[14px] w-[40px] rounded-sm' />
<Skeleton className='h-[44px] w-full rounded-lg' />
</div>
<Skeleton className='mt-6 h-[44px] w-full rounded-[10px]' />
<Skeleton className='mt-6 h-[14px] w-[120px] rounded-[4px]' />
<Skeleton className='mt-6 h-[44px] w-full rounded-lg' />
<Skeleton className='mt-6 h-[14px] w-[120px] rounded-sm' />
</div>
)
}
24 changes: 12 additions & 12 deletions apps/sim/app/(auth)/signup/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,26 @@ import { Skeleton } from '@sim/emcn'
export default function SignupLoading() {
return (
<div className='flex flex-col items-center'>
<Skeleton className='h-[38px] w-[100px] rounded-[4px]' />
<Skeleton className='h-[38px] w-[100px] rounded-sm' />
<div className='mt-8 w-full space-y-2'>
<Skeleton className='h-[14px] w-[40px] rounded-[4px]' />
<Skeleton className='h-[44px] w-full rounded-[10px]' />
<Skeleton className='h-[14px] w-[40px] rounded-sm' />
<Skeleton className='h-[44px] w-full rounded-lg' />
</div>
<div className='mt-4 w-full space-y-2'>
<Skeleton className='h-[14px] w-[40px] rounded-[4px]' />
<Skeleton className='h-[44px] w-full rounded-[10px]' />
<Skeleton className='h-[14px] w-[40px] rounded-sm' />
<Skeleton className='h-[44px] w-full rounded-lg' />
</div>
<div className='mt-4 w-full space-y-2'>
<Skeleton className='h-[14px] w-[64px] rounded-[4px]' />
<Skeleton className='h-[44px] w-full rounded-[10px]' />
<Skeleton className='h-[14px] w-[64px] rounded-sm' />
<Skeleton className='h-[44px] w-full rounded-lg' />
</div>
<Skeleton className='mt-6 h-[44px] w-full rounded-[10px]' />
<Skeleton className='mt-6 h-[1px] w-full rounded-[1px]' />
<Skeleton className='mt-6 h-[44px] w-full rounded-lg' />
<Skeleton className='mt-6 h-[1px] w-full rounded-full' />
<div className='mt-6 flex w-full gap-3'>
<Skeleton className='h-[44px] flex-1 rounded-[10px]' />
<Skeleton className='h-[44px] flex-1 rounded-[10px]' />
<Skeleton className='h-[44px] flex-1 rounded-lg' />
<Skeleton className='h-[44px] flex-1 rounded-lg' />
</div>
<Skeleton className='mt-6 h-[14px] w-[220px] rounded-[4px]' />
<Skeleton className='mt-6 h-[14px] w-[220px] rounded-sm' />
</div>
)
}
12 changes: 6 additions & 6 deletions apps/sim/app/(auth)/sso/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@ import { Skeleton } from '@sim/emcn'
export default function SSOLoading() {
return (
<div className='flex flex-col items-center'>
<Skeleton className='h-[38px] w-[120px] rounded-[4px]' />
<Skeleton className='mt-3 h-[14px] w-[260px] rounded-[4px]' />
<Skeleton className='h-[38px] w-[120px] rounded-sm' />
<Skeleton className='mt-3 h-[14px] w-[260px] rounded-sm' />
<div className='mt-8 w-full space-y-2'>
<Skeleton className='h-[14px] w-[80px] rounded-[4px]' />
<Skeleton className='h-[44px] w-full rounded-[10px]' />
<Skeleton className='h-[14px] w-[80px] rounded-sm' />
<Skeleton className='h-[44px] w-full rounded-lg' />
</div>
<Skeleton className='mt-6 h-[44px] w-full rounded-[10px]' />
<Skeleton className='mt-6 h-[14px] w-[120px] rounded-[4px]' />
<Skeleton className='mt-6 h-[44px] w-full rounded-lg' />
<Skeleton className='mt-6 h-[14px] w-[120px] rounded-sm' />
</div>
)
}
8 changes: 4 additions & 4 deletions apps/sim/app/(auth)/verify/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ import { Skeleton } from '@sim/emcn'
export default function VerifyLoading() {
return (
<div className='flex flex-col items-center'>
<Skeleton className='h-[38px] w-[180px] rounded-[4px]' />
<Skeleton className='mt-3 h-[14px] w-[300px] rounded-[4px]' />
<Skeleton className='mt-1 h-[14px] w-[240px] rounded-[4px]' />
<Skeleton className='mt-8 h-[44px] w-full rounded-[10px]' />
<Skeleton className='h-[38px] w-[180px] rounded-sm' />
<Skeleton className='mt-3 h-[14px] w-[300px] rounded-sm' />
<Skeleton className='mt-1 h-[14px] w-[240px] rounded-sm' />
<Skeleton className='mt-8 h-[44px] w-full rounded-lg' />
</div>
)
}
4 changes: 2 additions & 2 deletions apps/sim/app/(auth)/verify/verify-content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,8 +149,8 @@ function VerificationFormFallback() {
return (
<div className='text-center'>
<div className='animate-pulse'>
<div className='mx-auto mb-4 h-8 w-48 rounded bg-[var(--surface-4)]' />
<div className='mx-auto h-4 w-64 rounded bg-[var(--surface-4)]' />
<div className='mx-auto mb-4 h-8 w-48 rounded-sm bg-[var(--surface-4)]' />
<div className='mx-auto h-4 w-64 rounded-sm bg-[var(--surface-4)]' />
</div>
</div>
)
Expand Down
12 changes: 6 additions & 6 deletions apps/sim/app/(interfaces)/chat/[identifier]/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@ export default function ChatLoading() {
<div className='border-[var(--border-1)] border-b px-4 py-3'>
<div className='mx-auto flex max-w-3xl items-center justify-between'>
<div className='flex items-center gap-[12px]'>
<Skeleton className='size-[28px] rounded-[6px]' />
<Skeleton className='h-[18px] w-[120px] rounded-[4px]' />
<Skeleton className='size-[28px] rounded-md' />
<Skeleton className='h-[18px] w-[120px] rounded-sm' />
</div>
<Skeleton className='h-[28px] w-[80px] rounded-[6px]' />
<Skeleton className='h-[28px] w-[80px] rounded-md' />
</div>
</div>
<div className='flex min-h-0 flex-1 items-center justify-center px-4'>
Expand All @@ -24,16 +24,16 @@ export default function ChatLoading() {
<div className='mt-8 w-full space-y-8'>
<div className='space-y-2'>
<Skeleton className='h-4 w-16' />
<Skeleton className='h-10 w-full rounded-[10px]' />
<Skeleton className='h-10 w-full rounded-lg' />
</div>
<Skeleton className='h-10 w-full rounded-[10px]' />
<Skeleton className='h-10 w-full rounded-lg' />
</div>
</div>
</div>
</div>
<div className='relative p-3 pb-4 md:p-4 md:pb-6'>
<div className='relative mx-auto max-w-3xl md:max-w-[748px]'>
<Skeleton className='h-[48px] w-full rounded-[12px]' />
<Skeleton className='h-[48px] w-full rounded-xl' />
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/sim/app/(interfaces)/chat/components/input/input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ export const ChatInput: React.FC<{
{attachedFiles.map((file) => (
<Tooltip.Root key={file.id}>
<Tooltip.Trigger asChild>
<div className='group relative size-[56px] shrink-0 cursor-pointer overflow-hidden rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-3)]'>
<div className='group relative size-[56px] shrink-0 cursor-pointer overflow-hidden rounded-lg border border-[var(--border-1)] bg-[var(--surface-3)]'>
{file.dataUrl ? (
<img
src={file.dataUrl}
Expand Down
4 changes: 2 additions & 2 deletions apps/sim/app/(interfaces)/chat/components/loading-state/loading-state.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@ export function ChatLoadingState() {
<div className='mt-8 w-full space-y-8'>
<div className='space-y-2'>
<Skeleton className='h-4 w-16' />
<Skeleton className='h-10 w-full rounded-[10px]' />
<Skeleton className='h-10 w-full rounded-lg' />
</div>
<Skeleton className='h-10 w-full rounded-[10px]' />
<Skeleton className='h-10 w-full rounded-lg' />
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/sim/app/(interfaces)/chat/components/message/components/markdown-renderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ const COMPONENTS = {
},

inlineCode: ({ children }: { children?: React.ReactNode }) => (
<code className='rounded bg-[var(--surface-5)] px-1 py-0.5 font-mono text-[var(--text-primary)] text-inherit'>
<code className='rounded-sm bg-[var(--surface-5)] px-1 py-0.5 font-mono text-[var(--text-primary)] text-inherit'>
{children}
</code>
),
Expand Down
2 changes: 1 addition & 1 deletion apps/sim/app/(interfaces)/chat/components/message/message.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,7 @@ export const ClientChatMessage = memo(function ClientChatMessage({
/>
) : (
<>
<div className='flex size-10 shrink-0 items-center justify-center rounded bg-[var(--surface-3)] md:size-12'>
<div className='flex size-10 shrink-0 items-center justify-center rounded-sm bg-[var(--surface-3)] md:size-12'>
{getFileIcon(attachment.type)}
</div>
<div className='min-w-0 flex-1'>
Expand Down
26 changes: 13 additions & 13 deletions apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,34 +5,34 @@ export default function ResumeLoading() {
<div className='bg-background'>
<div className='border-b px-4 py-3'>
<div className='mx-auto flex max-w-[1200px] items-center justify-between'>
<Skeleton className='h-[24px] w-[80px] rounded-[4px]' />
<Skeleton className='h-[28px] w-[100px] rounded-[6px]' />
<Skeleton className='h-[24px] w-[80px] rounded-sm' />
<Skeleton className='h-[28px] w-[100px] rounded-md' />
</div>
</div>
<div className='mx-auto max-w-[1200px] px-6 py-8'>
<div className='grid grid-cols-[280px_1fr] gap-6'>
<div className='space-y-[8px]'>
<Skeleton className='h-[20px] w-[120px] rounded-[4px]' />
<Skeleton className='h-[20px] w-[120px] rounded-sm' />
{Array.from({ length: 3 }).map((_, i) => (
<Skeleton key={i} className='h-[48px] w-full rounded-[8px]' />
<Skeleton key={i} className='h-[48px] w-full rounded-lg' />
))}
</div>
<div className='rounded-[8px] border p-6'>
<Skeleton className='h-[24px] w-[200px] rounded-[4px]' />
<Skeleton className='mt-[12px] h-[16px] w-[320px] rounded-[4px]' />
<div className='rounded-lg border p-6'>
<Skeleton className='h-[24px] w-[200px] rounded-sm' />
<Skeleton className='mt-[12px] h-[16px] w-[320px] rounded-sm' />
<div className='mt-[24px] space-y-[16px]'>
<div className='space-y-[8px]'>
<Skeleton className='h-[14px] w-[80px] rounded-[4px]' />
<Skeleton className='h-[40px] w-full rounded-[8px]' />
<Skeleton className='h-[14px] w-[80px] rounded-sm' />
<Skeleton className='h-[40px] w-full rounded-lg' />
</div>
<div className='space-y-[8px]'>
<Skeleton className='h-[14px] w-[100px] rounded-[4px]' />
<Skeleton className='h-[80px] w-full rounded-[8px]' />
<Skeleton className='h-[14px] w-[100px] rounded-sm' />
<Skeleton className='h-[80px] w-full rounded-lg' />
</div>
</div>
<div className='mt-[24px] flex gap-[12px]'>
<Skeleton className='h-[40px] w-[120px] rounded-[8px]' />
<Skeleton className='h-[40px] w-[120px] rounded-[8px]' />
<Skeleton className='h-[40px] w-[120px] rounded-lg' />
<Skeleton className='h-[40px] w-[120px] rounded-lg' />
</div>
</div>
</div>
Expand Down
24 changes: 12 additions & 12 deletions apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/resume-page-client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ function renderStructuredValuePreview(value: unknown) {
const { text: stringValue, truncated } = truncateForPreview(String(value))
return (
<div className='max-w-full'>
<div className='inline-flex max-w-full rounded-[6px] border border-[var(--border)] bg-[var(--surface-5)] px-2 py-1 font-mono text-[var(--text-primary)] text-caption leading-4 [white-space:pre-wrap] [word-break:break-word]'>
<div className='inline-flex max-w-full rounded-md border border-[var(--border)] bg-[var(--surface-5)] px-2 py-1 font-mono text-[var(--text-primary)] text-caption leading-4 [white-space:pre-wrap] [word-break:break-word]'>
{truncated ? `${stringValue}…` : stringValue}
</div>
{truncated && (
Expand Down Expand Up @@ -800,7 +800,7 @@ export default function ResumeExecutionPage({
{/* Main Layout */}
<div className='grid grid-cols-[280px_1fr] gap-6'>
{/* Pause Points List */}
<div className='overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'>
<div className='overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--surface-1)]'>
<div className='border-[var(--border)] border-b px-4 py-3'>
<Label>Pause Points</Label>
</div>
Expand Down Expand Up @@ -832,25 +832,25 @@ export default function ResumeExecutionPage({
{/* Detail Panel */}
<div>
{loadingDetail && !selectedDetail ? (
<div className='flex h-[200px] items-center justify-center rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'>
<div className='flex h-[200px] items-center justify-center rounded-lg border border-[var(--border)] bg-[var(--surface-1)]'>
<span className='text-[var(--text-secondary)] text-small'>Loading…</span>
</div>
) : !selectedContextId ? (
<div className='flex h-[200px] items-center justify-center rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'>
<div className='flex h-[200px] items-center justify-center rounded-lg border border-[var(--border)] bg-[var(--surface-1)]'>
<span className='text-[var(--text-secondary)] text-small'>
Select a pause point
</span>
</div>
) : !selectedDetail ? (
<div className='flex h-[200px] items-center justify-center rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'>
<div className='flex h-[200px] items-center justify-center rounded-lg border border-[var(--border)] bg-[var(--surface-1)]'>
<span className='text-[var(--text-secondary)] text-small'>
Could not load details
</span>
</div>
) : (
<div className='flex flex-col gap-4'>
{/* Status Header */}
<div className='flex items-center justify-between rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)] px-4 py-3'>
<div className='flex items-center justify-between rounded-lg border border-[var(--border)] bg-[var(--surface-1)] px-4 py-3'>
<div>
<Label>{getBlockName(selectedDetail.pausePoint)}</Label>
<p className='mt-[2px] text-[var(--text-muted)] text-caption'>
Expand All @@ -868,7 +868,7 @@ export default function ResumeExecutionPage({
</div>

{selectedDetail.pausePoint.automaticResumeWaitingReason && (
<div className='rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)] px-4 py-3'>
<div className='rounded-lg border border-[var(--border)] bg-[var(--surface-1)] px-4 py-3'>
<Label>Waiting to resume automatically</Label>
<p className='mt-1 text-[var(--text-secondary)] text-small'>
{selectedDetail.pausePoint.automaticResumeWaitingReason}
Expand All @@ -881,7 +881,7 @@ export default function ResumeExecutionPage({

{/* Already resolved - show form fields with submitted values */}
{selectedStatus === 'resumed' || selectedStatus === 'failed' ? (
<div className='overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'>
<div className='overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--surface-1)]'>
<div className='border-[var(--border)] border-b px-4 py-3'>
<Label>Resume Form</Label>
</div>
Expand Down Expand Up @@ -932,7 +932,7 @@ export default function ResumeExecutionPage({
<>
{/* Display Data */}
{responseStructureRows.length > 0 ? (
<div className='overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'>
<div className='overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--surface-1)]'>
<div className='border-[var(--border)] border-b px-4 py-3'>
<Label>Display Data</Label>
</div>
Expand All @@ -958,7 +958,7 @@ export default function ResumeExecutionPage({
</div>
</div>
) : (
<div className='overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'>
<div className='overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--surface-1)]'>
<div className='border-[var(--border)] border-b px-4 py-3'>
<Label>Display Data</Label>
</div>
Expand All @@ -972,7 +972,7 @@ export default function ResumeExecutionPage({

{/* Resume Form */}
{isHumanMode && hasInputFormat ? (
<div className='overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'>
<div className='overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--surface-1)]'>
<div className='border-[var(--border)] border-b px-4 py-3'>
<Label>Resume Form</Label>
</div>
Expand Down Expand Up @@ -1001,7 +1001,7 @@ export default function ResumeExecutionPage({
</div>
</div>
) : (
<div className='overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)]'>
<div className='overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--surface-1)]'>
<div className='border-[var(--border)] border-b px-4 py-3'>
<Label>Resume Input (JSON)</Label>
</div>
Expand Down
Loading
Loading