mirror of
https://github.com/simstudioai/sim.git
synced 2026-09-01 14:59:19 +08:00
fix(landing): normalize typography weights (#7144)
This commit is contained in:
@@ -107,7 +107,7 @@ export function FeatureCard({
|
||||
<ChipTag variant='mono' className='hidden max-lg:mb-3 max-lg:inline-flex max-lg:self-start'>
|
||||
{eyebrow}
|
||||
</ChipTag>
|
||||
<h3 className='text-balance font-medium text-[22px] text-[var(--text-primary)] leading-[1.3] max-sm:text-[20px]'>
|
||||
<h3 className='text-balance text-[22px] text-[var(--text-primary)] leading-[1.3] max-sm:text-[20px]'>
|
||||
{title}
|
||||
</h3>
|
||||
<p className='mt-3 text-pretty text-[15px] text-[var(--text-muted)] leading-[1.6]'>
|
||||
|
||||
@@ -46,9 +46,7 @@ export function KnowledgeBasePanel({
|
||||
)}
|
||||
>
|
||||
<div className='flex items-center justify-between px-4 pt-3 pb-2.5'>
|
||||
<span className='font-medium text-[15px] text-[var(--text-primary)]'>
|
||||
Create Knowledge Base
|
||||
</span>
|
||||
<span className='text-[15px] text-[var(--text-primary)]'>Create Knowledge Base</span>
|
||||
<X className='size-4 text-[var(--text-muted)]' />
|
||||
</div>
|
||||
|
||||
|
||||
+1
-3
@@ -33,9 +33,7 @@ export function WorkflowBlockContent({ block }: WorkflowBlockContentProps) {
|
||||
<block.icon className='size-[16px] text-white' />
|
||||
)}
|
||||
</div>
|
||||
<span className='truncate font-medium text-[16px] text-[var(--text-body)]'>
|
||||
{block.name}
|
||||
</span>
|
||||
<span className='truncate text-[16px] text-[var(--text-body)]'>{block.name}</span>
|
||||
</div>
|
||||
|
||||
{block.rows.length > 0 && (
|
||||
|
||||
@@ -40,7 +40,7 @@ export function ProductDemo() {
|
||||
</div>
|
||||
<h2
|
||||
id='product-demo-heading'
|
||||
className='text-balance font-medium text-[22px] text-[var(--text-primary)] leading-[1.3] max-sm:text-[20px]'
|
||||
className='text-balance text-[22px] text-[var(--text-primary)] leading-[1.3] max-sm:text-[20px]'
|
||||
>
|
||||
Describe it. Sim builds it.
|
||||
</h2>
|
||||
|
||||
+1
-1
@@ -77,7 +77,7 @@ export function CodeWindowGraphic({ icon, filename, lines }: CodeWindowGraphicPr
|
||||
>
|
||||
{icon}
|
||||
</span>
|
||||
<span className='font-medium text-[var(--text-inverse)] text-base'>{filename}</span>
|
||||
<span className='text-[var(--text-inverse)] text-base'>{filename}</span>
|
||||
</div>
|
||||
|
||||
<div className='space-y-2 p-4 font-mono text-[var(--text-muted-inverse)] text-caption leading-[1.7]'>
|
||||
|
||||
+1
-4
@@ -86,10 +86,7 @@ export function SolutionsCard({ card, headingId, tabletSpan = false }: Solutions
|
||||
wide && 'sm:max-lg:w-[38%] sm:max-lg:shrink-0 sm:max-lg:self-center'
|
||||
)}
|
||||
>
|
||||
<h3
|
||||
id={headingId}
|
||||
className={cn('font-medium text-[16px] leading-[1.3]', featureTileTone.title)}
|
||||
>
|
||||
<h3 id={headingId} className={cn('text-[16px] leading-[1.3]', featureTileTone.title)}>
|
||||
{card.title}
|
||||
</h3>
|
||||
<p
|
||||
|
||||
+1
-3
@@ -153,9 +153,7 @@ export function AccessControlGraphic() {
|
||||
<span
|
||||
className={cn(
|
||||
'text-caption',
|
||||
index === 0
|
||||
? 'font-medium text-[var(--text-primary)]'
|
||||
: 'text-[var(--text-secondary)]'
|
||||
index === 0 ? 'text-[var(--text-primary)]' : 'text-[var(--text-secondary)]'
|
||||
)}
|
||||
>
|
||||
{team.name}
|
||||
|
||||
+3
-3
@@ -69,7 +69,7 @@ const ROW_TONES = [
|
||||
* window: a frameless, centered vignette (the access tile's composition,
|
||||
* which sits beside it in the row) where each record is a plain row —
|
||||
* gradient actor avatar, the action label in the row's regular sans face
|
||||
* (`font-medium text-small`, the same treatment the standards tile gives
|
||||
* (`text-small`, the same treatment the standards tile gives
|
||||
* its row titles), an "actor · resource" attribution line, and a
|
||||
* right-aligned timestamp. The newest record is the selected event: it
|
||||
* sits on a solid white card wearing the build tile's window chrome
|
||||
@@ -120,7 +120,7 @@ export function AuditTrailGraphic({ entries = ENTRIES }: AuditTrailGraphicProps
|
||||
>
|
||||
<div className='w-full max-w-[312px] sm:max-lg:[@container(min-width:500px)]:max-w-[400px]'>
|
||||
<div className='mb-4 flex items-center justify-between'>
|
||||
<span className='font-medium text-[var(--text-primary)] text-base'>Audit log</span>
|
||||
<span className='text-[var(--text-primary)] text-base'>Audit log</span>
|
||||
<ChipTag variant='mono' className='bg-[var(--surface-6)]'>
|
||||
Append-only
|
||||
</ChipTag>
|
||||
@@ -159,7 +159,7 @@ export function AuditTrailGraphic({ entries = ENTRIES }: AuditTrailGraphicProps
|
||||
/>
|
||||
</span>
|
||||
<span className='min-w-0 flex-1'>
|
||||
<span className={cn('block truncate font-medium text-small', tone.action)}>
|
||||
<span className={cn('block truncate text-small', tone.action)}>
|
||||
{entry.action}
|
||||
</span>
|
||||
<span className='block truncate text-[var(--text-muted)] text-caption'>
|
||||
|
||||
@@ -97,7 +97,7 @@ export function DeployGraphic({
|
||||
className='absolute inset-0 flex flex-col items-center pr-8 max-lg:pr-6'
|
||||
>
|
||||
<div className='mt-1 flex items-center gap-1.5 rounded-[12px] bg-[var(--surface-2)] py-1.5 pr-1.5 pl-2.5 shadow-sm'>
|
||||
<span className='font-medium text-[var(--text-secondary)] text-caption'>{agentName}</span>
|
||||
<span className='text-[var(--text-secondary)] text-caption'>{agentName}</span>
|
||||
<ChipTag variant='mono'>{versionTag}</ChipTag>
|
||||
</div>
|
||||
|
||||
@@ -174,7 +174,7 @@ export function DeployGraphic({
|
||||
</div>
|
||||
<div className='flex items-center gap-2 px-3 pt-2.5 pb-4'>
|
||||
<CircleCheck className='size-[14px] shrink-0 text-[var(--text-muted-inverse)]' />
|
||||
<span className='min-w-0 flex-1 font-medium text-[var(--text-inverse)] text-small'>
|
||||
<span className='min-w-0 flex-1 text-[var(--text-inverse)] text-small'>
|
||||
{statusLabel}
|
||||
</span>
|
||||
<span className='shrink-0 text-[var(--text-muted-inverse)] text-caption'>
|
||||
|
||||
+1
-1
@@ -33,7 +33,7 @@ export function FeaturePlatformPanel({
|
||||
<span className='flex size-6 items-center justify-center rounded-md bg-[var(--surface-5)]'>
|
||||
<Icon className='size-[14px] text-[var(--text-icon)]' />
|
||||
</span>
|
||||
<span className='font-medium text-[var(--text-primary)] text-base'>{title}</span>
|
||||
<span className='text-[var(--text-primary)] text-base'>{title}</span>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
+2
-4
@@ -90,9 +90,7 @@ export function ItPlatformTeamsGraphic({
|
||||
>
|
||||
<div className='w-full max-w-[312px]'>
|
||||
<div className='mb-3 flex items-center justify-between gap-2'>
|
||||
<span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-base'>
|
||||
{title}
|
||||
</span>
|
||||
<span className='min-w-0 truncate text-[var(--text-primary)] text-base'>{title}</span>
|
||||
<span className='flex shrink-0 items-center gap-1.5'>
|
||||
<span className='relative size-4 overflow-hidden rounded-full shadow-sm'>
|
||||
<Image
|
||||
@@ -111,7 +109,7 @@ export function ItPlatformTeamsGraphic({
|
||||
|
||||
<div className='flex items-center gap-3 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-sm'>
|
||||
<span className='min-w-0 flex-1'>
|
||||
<span className='block truncate font-medium text-[var(--text-primary)] text-small'>
|
||||
<span className='block truncate text-[var(--text-primary)] text-small'>
|
||||
{cardTitle}
|
||||
</span>
|
||||
<span className='block truncate text-[var(--text-muted)] text-caption'>
|
||||
|
||||
@@ -48,7 +48,7 @@ export function LifecycleGraphic() {
|
||||
<span className='flex size-6 items-center justify-center rounded-md border border-[var(--border-1)]'>
|
||||
<Clock className='size-[14px] text-[var(--text-icon)]' />
|
||||
</span>
|
||||
<span className='font-medium text-[var(--text-primary)] text-base'>Versions</span>
|
||||
<span className='text-[var(--text-primary)] text-base'>Versions</span>
|
||||
</div>
|
||||
<div className='flex flex-col p-4 [mask-image:linear-gradient(to_bottom,black_45%,transparent_98%)]'>
|
||||
<div className='flex items-center gap-3'>
|
||||
@@ -59,7 +59,7 @@ export function LifecycleGraphic() {
|
||||
</span>
|
||||
<span className='flex min-w-0 flex-1 items-center gap-2'>
|
||||
<span className='flex items-center gap-1.5 rounded-[12px] bg-[var(--white)] py-1.5 pr-1.5 pl-2.5 shadow-sm'>
|
||||
<span className='font-medium text-[var(--text-primary)] text-small'>v3</span>
|
||||
<span className='text-[var(--text-primary)] text-small'>v3</span>
|
||||
<ChipTag variant='solid'>Live</ChipTag>
|
||||
</span>
|
||||
<span className='truncate text-[var(--text-muted)] text-caption'>
|
||||
@@ -79,7 +79,7 @@ export function LifecycleGraphic() {
|
||||
<span className='size-2 rounded-full border border-[var(--text-muted)] bg-[var(--surface-3)]' />
|
||||
</span>
|
||||
<span className='flex min-w-0 flex-1 items-center gap-2'>
|
||||
<span className='font-medium text-[var(--text-secondary)] text-small'>v2</span>
|
||||
<span className='text-[var(--text-secondary)] text-small'>v2</span>
|
||||
<ChipTag variant='mono' className='bg-[var(--surface-6)]'>
|
||||
Saved
|
||||
</ChipTag>
|
||||
|
||||
+1
-1
@@ -141,7 +141,7 @@ function PortTag({ port }: { port: Port }) {
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
'relative flex h-5 items-center overflow-hidden rounded-md border bg-transparent px-1.5 font-medium text-[var(--text-muted-inverse)] text-caption',
|
||||
'relative flex h-5 items-center overflow-hidden rounded-md border bg-transparent px-1.5 text-[var(--text-muted-inverse)] text-caption',
|
||||
OUTLINE_INK
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -48,7 +48,7 @@ export function RollbackGraphic() {
|
||||
className='absolute top-5 right-0 bottom-0 left-0 rounded-tl-xl border-[var(--border-1)] border-t border-l'
|
||||
>
|
||||
<div className='flex h-12 items-center justify-between gap-2 border-[var(--border-1)] border-b px-4 pr-12 max-lg:pr-10'>
|
||||
<span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-base'>
|
||||
<span className='min-w-0 truncate text-[var(--text-primary)] text-base'>
|
||||
Version history
|
||||
</span>
|
||||
<ChipTag variant='mono' className='bg-[var(--surface-6)]'>
|
||||
@@ -62,7 +62,7 @@ export function RollbackGraphic() {
|
||||
<span className='size-2 rounded-full border border-[var(--text-muted)] bg-[var(--surface-3)]' />
|
||||
</span>
|
||||
<span className='flex min-w-0 flex-1 items-center gap-2'>
|
||||
<span className='font-medium text-[var(--text-secondary)] text-small'>v4</span>
|
||||
<span className='text-[var(--text-secondary)] text-small'>v4</span>
|
||||
<ChipTag variant='mono' className='bg-[var(--surface-6)]'>
|
||||
Current
|
||||
</ChipTag>
|
||||
@@ -88,7 +88,7 @@ export function RollbackGraphic() {
|
||||
<div className='flex min-w-0 flex-1 items-center gap-3 rounded-lg border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-sm'>
|
||||
<span className='min-w-0 flex-1'>
|
||||
<span className='flex items-center gap-2'>
|
||||
<span className='font-medium text-[var(--text-primary)] text-small'>v3</span>
|
||||
<span className='text-[var(--text-primary)] text-small'>v3</span>
|
||||
<ChipTag variant='mono'>Stable</ChipTag>
|
||||
</span>
|
||||
<span className='mt-0.5 block truncate text-[var(--text-muted)] text-caption'>
|
||||
|
||||
+2
-8
@@ -55,11 +55,7 @@ function fieldValue(field: LogField) {
|
||||
<span className='font-mono text-[var(--text-secondary)] text-caption'>{field.value}</span>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<span className='truncate font-medium text-[var(--text-primary)] text-caption'>
|
||||
{field.value}
|
||||
</span>
|
||||
)
|
||||
return <span className='truncate text-[var(--text-primary)] text-caption'>{field.value}</span>
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -125,9 +121,7 @@ export function RunMonitoringGraphic({
|
||||
>
|
||||
<div className='w-full max-w-[312px] sm:max-lg:[@container(min-width:500px)]:max-w-[400px]'>
|
||||
<div className='mb-1.5 flex items-center justify-between gap-2'>
|
||||
<span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-base'>
|
||||
{title}
|
||||
</span>
|
||||
<span className='min-w-0 truncate text-[var(--text-primary)] text-base'>{title}</span>
|
||||
<span className='flex shrink-0 items-center gap-1.5'>
|
||||
<span
|
||||
className={cn('size-2 rounded-full bg-[var(--text-primary)]', styles.livePulse)}
|
||||
|
||||
@@ -98,7 +98,7 @@ export function StagingGraphic({
|
||||
>
|
||||
<div className='w-full max-w-[312px] rounded-xl border border-[var(--border-1)]'>
|
||||
<div className='flex h-10 items-center gap-2 border-[var(--border-1)] border-b px-4'>
|
||||
<span className='min-w-0 flex-1 truncate font-medium text-[var(--text-primary)] text-base'>
|
||||
<span className='min-w-0 flex-1 truncate text-[var(--text-primary)] text-base'>
|
||||
{title}
|
||||
</span>
|
||||
<ChipTag variant='mono' className='bg-[var(--surface-6)]'>
|
||||
@@ -110,7 +110,7 @@ export function StagingGraphic({
|
||||
<div className='rounded-lg border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-sm'>
|
||||
<span className='flex items-center gap-2'>
|
||||
<ChipTag variant='mono'>{changeTag}</ChipTag>
|
||||
<span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-small'>
|
||||
<span className='min-w-0 truncate text-[var(--text-primary)] text-small'>
|
||||
{changeTitle}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
@@ -196,7 +196,7 @@ export function StandardsGraphic({
|
||||
<ChipTag variant='mono'>{rightLabel}</ChipTag>
|
||||
</span>
|
||||
|
||||
<span className='-translate-x-1/2 absolute top-[172px] left-1/2 flex h-5 items-center rounded-md bg-[var(--text-muted)] px-1.5 font-medium text-[var(--text-inverse)] text-caption'>
|
||||
<span className='-translate-x-1/2 absolute top-[172px] left-1/2 flex h-5 items-center rounded-md bg-[var(--text-muted)] px-1.5 text-[var(--text-inverse)] text-caption'>
|
||||
{sealLabel}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
+1
-1
@@ -125,7 +125,7 @@ export function TechnicalTeamsGraphic({
|
||||
/>
|
||||
</span>
|
||||
<span className='min-w-0 flex-1'>
|
||||
<span className='block truncate font-medium text-[var(--text-primary)] text-small'>
|
||||
<span className='block truncate text-[var(--text-primary)] text-small'>
|
||||
{reviewerName}
|
||||
</span>
|
||||
<span className='block truncate text-[var(--text-muted)] text-caption'>
|
||||
|
||||
@@ -104,7 +104,7 @@ export function FileLibraryGraphic() {
|
||||
>
|
||||
<div className='w-full max-w-[312px] sm:max-lg:[@container(min-width:500px)]:max-w-[400px]'>
|
||||
<div className='mb-4 flex items-center justify-between'>
|
||||
<span className='font-medium text-[var(--text-primary)] text-base'>Files</span>
|
||||
<span className='text-[var(--text-primary)] text-base'>Files</span>
|
||||
<ChipTag variant='mono' className='bg-[var(--surface-6)]'>
|
||||
Shared
|
||||
</ChipTag>
|
||||
@@ -126,7 +126,7 @@ export function FileLibraryGraphic() {
|
||||
>
|
||||
<OwnerBadge row={row} />
|
||||
<span className='min-w-0 flex-1'>
|
||||
<span className={cn('block truncate font-medium text-small', ROW_TONES[index])}>
|
||||
<span className={cn('block truncate text-small', ROW_TONES[index])}>
|
||||
{row.name}
|
||||
</span>
|
||||
<span className='block truncate text-[var(--text-muted)] text-caption'>
|
||||
|
||||
@@ -143,8 +143,8 @@ const COL_HEADERS = ['Name', 'Size', 'Type', 'Created', 'Owner'] as const
|
||||
/** Renders the owner cell - an initial badge for teammates, the agent glyph for agents. */
|
||||
function OwnerCell({ owner }: { owner: FileOwner }) {
|
||||
return (
|
||||
<span className='flex min-w-0 items-center gap-3 font-medium text-sm'>
|
||||
<span className='flex size-[14px] flex-shrink-0 items-center justify-center rounded-full border border-[var(--border)] bg-[var(--surface-3)] font-medium text-[8px] text-[var(--text-secondary)]'>
|
||||
<span className='flex min-w-0 items-center gap-3 text-sm'>
|
||||
<span className='flex size-[14px] flex-shrink-0 items-center justify-center rounded-full border border-[var(--border)] bg-[var(--surface-3)] text-[8px] text-[var(--text-secondary)]'>
|
||||
{owner.agent ? <AgentIcon className='size-[8px]' /> : owner.initial}
|
||||
</span>
|
||||
<span className='truncate text-[var(--text-secondary)]'>{owner.name}</span>
|
||||
@@ -157,16 +157,16 @@ function FileRow({ row }: { row: FileRowData }) {
|
||||
const Icon = row.icon
|
||||
return (
|
||||
<div className={cn(ROW_GRID, 'h-[40px] items-center')}>
|
||||
<span className='flex min-w-0 items-center gap-3 px-6 font-medium text-[var(--text-body)] text-sm'>
|
||||
<span className='flex min-w-0 items-center gap-3 px-6 text-[var(--text-body)] text-sm'>
|
||||
<Icon className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
|
||||
<span className='truncate'>{row.name}</span>
|
||||
</span>
|
||||
<span className='px-6 font-medium text-[var(--text-secondary)] text-sm'>{row.size}</span>
|
||||
<span className='flex items-center gap-3 px-6 font-medium text-[var(--text-secondary)] text-sm'>
|
||||
<span className='px-6 text-[var(--text-secondary)] text-sm'>{row.size}</span>
|
||||
<span className='flex items-center gap-3 px-6 text-[var(--text-secondary)] text-sm'>
|
||||
<Icon className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
|
||||
{row.type}
|
||||
</span>
|
||||
<span className='px-6 font-medium text-[var(--text-secondary)] text-sm'>{row.created}</span>
|
||||
<span className='px-6 text-[var(--text-secondary)] text-sm'>{row.created}</span>
|
||||
<span className='px-6'>
|
||||
<OwnerCell owner={row.owner} />
|
||||
</span>
|
||||
@@ -246,7 +246,7 @@ export function FilesHeroLoop() {
|
||||
<div className='flex h-[44px] flex-shrink-0 items-center justify-between border-[var(--border)] border-b px-6'>
|
||||
<div className='flex items-center gap-3'>
|
||||
<File className='size-[14px] text-[var(--text-icon)]' />
|
||||
<span className='font-medium text-[var(--text-body)] text-sm'>Files</span>
|
||||
<span className='text-[var(--text-body)] text-sm'>Files</span>
|
||||
</div>
|
||||
<span className='flex items-center rounded-md px-2 py-1 text-[var(--text-secondary)] text-caption'>
|
||||
<Plus className='mr-1.5 size-[14px] text-[var(--text-icon)]' />
|
||||
|
||||
+2
-2
@@ -79,7 +79,7 @@ export function ConnectorSyncGraphic() {
|
||||
>
|
||||
<div className='w-full max-w-[312px] sm:max-lg:[@container(min-width:500px)]:max-w-[400px]'>
|
||||
<div className='mb-4 flex items-center justify-between'>
|
||||
<span className='font-medium text-[var(--text-primary)] text-base'>Connectors</span>
|
||||
<span className='text-[var(--text-primary)] text-base'>Connectors</span>
|
||||
<ChipTag variant='mono' className='bg-[var(--surface-6)]'>
|
||||
Auto-sync
|
||||
</ChipTag>
|
||||
@@ -103,7 +103,7 @@ export function ConnectorSyncGraphic() {
|
||||
<row.icon className='size-[14px]' />
|
||||
</span>
|
||||
<span className='min-w-0 flex-1'>
|
||||
<span className='block truncate font-medium text-[var(--text-primary)] text-small'>
|
||||
<span className='block truncate text-[var(--text-primary)] text-small'>
|
||||
{row.name}
|
||||
</span>
|
||||
<span className='block truncate text-[var(--text-muted)] text-caption'>
|
||||
|
||||
@@ -173,7 +173,7 @@ export function KnowledgeHeroLoop() {
|
||||
<div className='flex h-[44px] flex-shrink-0 items-center justify-between border-[var(--border)] border-b px-6'>
|
||||
<div className='flex items-center gap-3'>
|
||||
<Database className='size-[14px] text-[var(--text-icon)]' />
|
||||
<span className='font-medium text-[var(--text-body)] text-sm'>Knowledge Base</span>
|
||||
<span className='text-[var(--text-body)] text-sm'>Knowledge Base</span>
|
||||
</div>
|
||||
<div className='flex items-center rounded-md px-2 py-1 text-[var(--text-secondary)] text-caption'>
|
||||
<Plus className='mr-1.5 size-[14px] text-[var(--text-icon)]' />
|
||||
@@ -236,15 +236,15 @@ export function KnowledgeHeroLoop() {
|
||||
)}
|
||||
>
|
||||
<td className='px-6 py-2.5 align-middle'>
|
||||
<span className='flex min-w-0 items-center gap-3 font-medium text-[var(--text-body)] text-sm'>
|
||||
<span className='flex min-w-0 items-center gap-3 text-[var(--text-body)] text-sm'>
|
||||
<Database className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
|
||||
<span className='truncate'>{row.name}</span>
|
||||
</span>
|
||||
</td>
|
||||
<td className='px-6 py-2.5 align-middle font-medium text-[var(--text-secondary)] text-sm'>
|
||||
<td className='px-6 py-2.5 align-middle text-[var(--text-secondary)] text-sm'>
|
||||
{synced && row.documentsSynced ? row.documentsSynced : row.documents}
|
||||
</td>
|
||||
<td className='px-6 py-2.5 align-middle font-medium text-[var(--text-secondary)] text-sm'>
|
||||
<td className='px-6 py-2.5 align-middle text-[var(--text-secondary)] text-sm'>
|
||||
{synced && row.tokensSynced ? row.tokensSynced : row.tokens}
|
||||
</td>
|
||||
<td className='px-6 py-2.5 align-middle'>
|
||||
@@ -265,7 +265,7 @@ export function KnowledgeHeroLoop() {
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className='px-6 py-2.5 align-middle font-medium text-[var(--text-secondary)] text-sm'>
|
||||
<td className='px-6 py-2.5 align-middle text-[var(--text-secondary)] text-sm'>
|
||||
{row.created}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -38,12 +38,10 @@ export function FailureAlertGraphic() {
|
||||
styles.runRow
|
||||
)}
|
||||
>
|
||||
<span className='font-medium text-[var(--text-inverse)] text-caption'>
|
||||
Nightly data sync
|
||||
</span>
|
||||
<span className='text-[var(--text-inverse)] text-caption'>Nightly data sync</span>
|
||||
<span
|
||||
className={cn(
|
||||
'flex h-5 items-center rounded-md border px-1.5 font-medium text-[var(--text-muted-inverse)] text-caption',
|
||||
'flex h-5 items-center rounded-md border px-1.5 text-[var(--text-muted-inverse)] text-caption',
|
||||
OUTLINE_INK
|
||||
)}
|
||||
>
|
||||
@@ -77,13 +75,13 @@ export function FailureAlertGraphic() {
|
||||
>
|
||||
<SlackIcon className='size-[12px]' />
|
||||
</span>
|
||||
<span className='min-w-0 flex-1 truncate font-medium text-[var(--text-inverse)] text-small'>
|
||||
<span className='min-w-0 flex-1 truncate text-[var(--text-inverse)] text-small'>
|
||||
#oncall
|
||||
</span>
|
||||
<span className='shrink-0 text-[var(--text-muted-inverse)] text-caption'>Now</span>
|
||||
</div>
|
||||
<div className='px-3 pt-2.5 pb-4'>
|
||||
<span className='block font-medium text-[var(--text-inverse)] text-small'>
|
||||
<span className='block text-[var(--text-inverse)] text-small'>
|
||||
Run failed: Nightly data sync
|
||||
</span>
|
||||
<span className='mt-1 block text-[var(--text-muted-inverse)] text-caption'>
|
||||
|
||||
@@ -55,7 +55,7 @@ export function FilterRunsGraphic() {
|
||||
>
|
||||
<div className='w-full max-w-[312px] sm:max-lg:[@container(min-width:500px)]:max-w-[400px]'>
|
||||
<div className='mb-2.5 flex items-center justify-between'>
|
||||
<span className='font-medium text-[var(--text-primary)] text-base'>Search runs</span>
|
||||
<span className='text-[var(--text-primary)] text-base'>Search runs</span>
|
||||
<ChipTag variant='mono' className='bg-[var(--surface-6)]'>
|
||||
3 matches
|
||||
</ChipTag>
|
||||
@@ -87,7 +87,7 @@ export function FilterRunsGraphic() {
|
||||
ROW_STEP_CLASSES[index]
|
||||
)}
|
||||
>
|
||||
<span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-caption'>
|
||||
<span className='min-w-0 truncate text-[var(--text-primary)] text-caption'>
|
||||
{run.workflow}
|
||||
</span>
|
||||
<span className='flex shrink-0 items-center gap-2.5'>
|
||||
|
||||
@@ -108,7 +108,7 @@ export function RunTraceGraphic() {
|
||||
>
|
||||
<Library className='size-[14px] text-[var(--text-muted-inverse)]' />
|
||||
</span>
|
||||
<span className='min-w-0 flex-1 truncate font-medium text-[var(--text-inverse)] text-base'>
|
||||
<span className='min-w-0 flex-1 truncate text-[var(--text-inverse)] text-base'>
|
||||
Support ticket routing
|
||||
</span>
|
||||
<span className='shrink-0 font-mono text-[var(--text-muted-inverse)] text-caption'>
|
||||
@@ -124,7 +124,7 @@ export function RunTraceGraphic() {
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
'w-[38%] shrink-0 truncate font-medium text-caption',
|
||||
'w-[38%] shrink-0 truncate text-caption',
|
||||
NAME_TONE_CLASS[span.barTone],
|
||||
span.indentClass
|
||||
)}
|
||||
|
||||
@@ -197,7 +197,7 @@ function LogsTableRow({ row, visible }: LogsTableRowProps) {
|
||||
<td className='px-6 align-middle'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Workflow className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
|
||||
<span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-caption'>
|
||||
<span className='min-w-0 truncate text-[var(--text-primary)] text-caption'>
|
||||
{row.workflowName}
|
||||
</span>
|
||||
</div>
|
||||
@@ -287,7 +287,7 @@ export function LogsHeroLoop() {
|
||||
<div className='flex w-full items-center justify-between'>
|
||||
<div className='flex items-center gap-3'>
|
||||
<Library className='size-[14px] text-[var(--text-icon)]' />
|
||||
<span className='font-medium text-[var(--text-body)] text-sm'>Logs</span>
|
||||
<span className='text-[var(--text-body)] text-sm'>Logs</span>
|
||||
</div>
|
||||
<div className='flex items-center gap-1'>
|
||||
<span className='flex items-center rounded-md px-2 py-1 text-[var(--text-secondary)] text-caption'>
|
||||
@@ -352,7 +352,7 @@ export function LogsHeroLoop() {
|
||||
<td className='px-6 align-middle'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Workflow className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
|
||||
<span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-caption'>
|
||||
<span className='min-w-0 truncate text-[var(--text-primary)] text-caption'>
|
||||
{LIVE_ROW.workflowName}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
+2
-2
@@ -69,7 +69,7 @@ export function DocumentDraftGraphic({
|
||||
<span className='flex size-6 shrink-0 items-center justify-center rounded-md border border-[var(--border-1)]'>
|
||||
<File className='size-[14px] text-[var(--text-icon)]' />
|
||||
</span>
|
||||
<span className='min-w-0 flex-1 truncate font-medium text-[var(--text-primary)] text-base'>
|
||||
<span className='min-w-0 flex-1 truncate text-[var(--text-primary)] text-base'>
|
||||
{title}
|
||||
</span>
|
||||
<ChipTag
|
||||
@@ -94,7 +94,7 @@ export function DocumentDraftGraphic({
|
||||
|
||||
<div className='mt-2 flex items-center gap-2 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-sm'>
|
||||
<CircleCheck className='size-[13px] shrink-0 text-[var(--text-icon)]' />
|
||||
<span className='min-w-0 flex-1 truncate font-medium text-[var(--text-primary)] text-small'>
|
||||
<span className='min-w-0 flex-1 truncate text-[var(--text-primary)] text-small'>
|
||||
{footerLabel}
|
||||
</span>
|
||||
<span className='shrink-0 text-[var(--text-muted)] text-caption'>{footerDetail}</span>
|
||||
|
||||
+1
-1
@@ -90,7 +90,7 @@ export function KnowledgeAnswerGraphic({
|
||||
<BookOpen className='size-[14px] text-[var(--text-icon)]' />
|
||||
</span>
|
||||
<span className='min-w-0 flex-1'>
|
||||
<span className='block truncate font-medium text-[var(--text-primary)] text-small'>
|
||||
<span className='block truncate text-[var(--text-primary)] text-small'>
|
||||
{sourceLabel}
|
||||
</span>
|
||||
<span className='block truncate text-[var(--text-muted)] text-caption'>
|
||||
|
||||
+2
-2
@@ -56,7 +56,7 @@ export function ReconcileGraphic() {
|
||||
>
|
||||
<div className='w-full max-w-[312px]'>
|
||||
<div className='mb-1.5 flex items-center justify-between gap-2'>
|
||||
<span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-base'>
|
||||
<span className='min-w-0 truncate text-[var(--text-primary)] text-base'>
|
||||
Reconciliation
|
||||
</span>
|
||||
<ChipTag variant='mono' className='shrink-0 bg-[var(--surface-6)]'>
|
||||
@@ -91,7 +91,7 @@ export function ReconcileGraphic() {
|
||||
>
|
||||
<span className='min-w-0 flex-1'>
|
||||
<span className='flex items-center gap-2'>
|
||||
<span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-small'>
|
||||
<span className='min-w-0 truncate text-[var(--text-primary)] text-small'>
|
||||
Wire transfer
|
||||
</span>
|
||||
<span className='shrink-0 font-mono text-[var(--text-secondary)] text-caption'>
|
||||
|
||||
+2
-2
@@ -57,7 +57,7 @@ export function EnrichmentFillGraphic() {
|
||||
>
|
||||
<div className='w-full max-w-[312px] sm:max-lg:[@container(min-width:500px)]:max-w-[400px]'>
|
||||
<div className='mb-1 flex items-center justify-between gap-2'>
|
||||
<span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-base'>
|
||||
<span className='min-w-0 truncate text-[var(--text-primary)] text-base'>
|
||||
Enrichments
|
||||
</span>
|
||||
<ChipTag variant='mono' className='bg-[var(--surface-6)]'>
|
||||
@@ -81,7 +81,7 @@ export function EnrichmentFillGraphic() {
|
||||
'truncate',
|
||||
row.variant === 'mono'
|
||||
? 'font-mono text-[var(--text-secondary)] text-caption'
|
||||
: 'font-medium text-[var(--text-primary)] text-caption',
|
||||
: 'text-[var(--text-primary)] text-caption',
|
||||
VALUE_STEP_CLASSES[index]
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -68,7 +68,7 @@ export function TableGridGraphic() {
|
||||
<span className='flex size-6 items-center justify-center rounded-md border border-[var(--border-1)]'>
|
||||
<Table className='size-[14px] text-[var(--text-icon)]' />
|
||||
</span>
|
||||
<span className='font-medium text-[var(--text-primary)] text-base'>Leads</span>
|
||||
<span className='text-[var(--text-primary)] text-base'>Leads</span>
|
||||
</div>
|
||||
|
||||
<div className='flex border-[var(--border-1)] border-b'>
|
||||
@@ -83,7 +83,7 @@ export function TableGridGraphic() {
|
||||
)}
|
||||
>
|
||||
<Icon className='size-3 shrink-0 text-[var(--text-icon)]' />
|
||||
<span className='truncate font-medium text-[var(--text-primary)] text-caption'>
|
||||
<span className='truncate text-[var(--text-primary)] text-caption'>
|
||||
{column.label}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -287,12 +287,12 @@ function TablesGridPane({ rowCount, filledCount }: TablesGridPaneProps) {
|
||||
<div className='flex h-full flex-col overflow-hidden bg-[var(--bg)]'>
|
||||
<div className='border-[var(--border)] border-b px-4 py-[8.5px]'>
|
||||
<div className='flex items-center gap-3'>
|
||||
<span className='inline-flex items-center px-2 py-1 font-medium text-[var(--text-secondary)] text-sm'>
|
||||
<span className='inline-flex items-center px-2 py-1 text-[var(--text-secondary)] text-sm'>
|
||||
<Table className='mr-3 size-[14px] text-[var(--text-icon)]' />
|
||||
Tables
|
||||
</span>
|
||||
<span className='select-none text-[var(--text-icon)] text-sm'>/</span>
|
||||
<span className='inline-flex items-center px-2 py-1 font-medium text-[var(--text-body)] text-sm'>
|
||||
<span className='inline-flex items-center px-2 py-1 text-[var(--text-body)] text-sm'>
|
||||
Leads
|
||||
<ChevronDown className='ml-2 size-[14px] shrink-0 text-[var(--text-muted)]' />
|
||||
</span>
|
||||
|
||||
+3
-3
@@ -87,7 +87,7 @@ export function WorkflowCanvasGraphic() {
|
||||
|
||||
<div className='-translate-x-1/2 absolute top-[14px] left-[160px] flex items-center gap-2 rounded-lg border border-[var(--border-1)] bg-[var(--white)] px-2.5 py-1.5 shadow-sm'>
|
||||
<span className='size-2 shrink-0 rounded-full border border-[var(--text-muted)] bg-[var(--surface-3)]' />
|
||||
<span className='whitespace-nowrap font-medium text-[var(--text-secondary)] text-caption'>
|
||||
<span className='whitespace-nowrap text-[var(--text-secondary)] text-caption'>
|
||||
New ticket
|
||||
</span>
|
||||
</div>
|
||||
@@ -99,7 +99,7 @@ export function WorkflowCanvasGraphic() {
|
||||
styles.agentPulse
|
||||
)}
|
||||
/>
|
||||
<span className='whitespace-nowrap font-medium text-[var(--text-primary)] text-small'>
|
||||
<span className='whitespace-nowrap text-[var(--text-primary)] text-small'>
|
||||
Support agent
|
||||
</span>
|
||||
<ChipTag variant='solid'>Agent</ChipTag>
|
||||
@@ -114,7 +114,7 @@ export function WorkflowCanvasGraphic() {
|
||||
)}
|
||||
>
|
||||
<span className='size-2 shrink-0 rounded-full border border-[var(--text-muted)] bg-[var(--surface-3)]' />
|
||||
<span className='whitespace-nowrap font-medium text-[var(--text-secondary)] text-caption'>
|
||||
<span className='whitespace-nowrap text-[var(--text-secondary)] text-caption'>
|
||||
{block.label}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user