Skip to content

Commit 1b49000

Browse files
iagodahlemiagodahlem
committed
refactor(ui): adopt Text colorScheme=secondary and tighten attribute table styling
Replaces sx={{ color: $colorMutedForeground }} with Text colorScheme='secondary' across ConfigureAttributesSubStep — the prop already resolves to the same color token, so the inline sx call drops out cleanly. Tightens the attribute mapping table chrome: column headers shrink to fontSize=$xs, the first column picks up an inline-start pad so the leading cell breathes against the table edge, and the claim-name cells reduce to fontFamily: monospace only (drops the background, border-radius, and padding from the earlier 'code chip' treatment for a flatter look that reads as data, not as inline code). Inner Cols inside ConfigureAttributesSubStep step up from gap $1x5 to $3. Numbered/bulleted list indents grow from paddingInlineStart $4 to $5.
1 parent 35ec991 commit 1b49000

1 file changed

Lines changed: 35 additions & 33 deletions

File tree

‎packages/ui/src/components/ConfigureSSO/steps/ConfigureStep.tsx‎

Lines changed: 35 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,7 @@ export const CreateAppSubStep = (): JSX.Element => {
194194
sx={theme => ({
195195
gap: theme.space.$1x5,
196196
margin: 0,
197-
paddingInlineStart: theme.space.$4,
197+
paddingInlineStart: theme.space.$5,
198198
listStyleType: 'disc',
199199
})}
200200
>
@@ -317,46 +317,59 @@ export const ConfigureAttributesSubStep = (): JSX.Element => {
317317
<>
318318
<Step.Body>
319319
<Step.Section sx={theme => ({ gap: theme.space.$5 })}>
320-
<Col sx={theme => ({ gap: theme.space.$1x5 })}>
320+
<Col sx={theme => ({ gap: theme.space.$3 })}>
321321
<Heading
322322
as='h3'
323323
textVariant='subtitle'
324324
localizationKey={localizationKeys(
325325
'configureSSO.configureStep.configureAttributes.attributeMapping.title',
326326
)}
327327
/>
328-
<Table>
328+
329+
<Table
330+
sx={theme => ({
331+
'tr > th:first-of-type': {
332+
paddingInlineStart: theme.space.$4,
333+
},
334+
})}
335+
>
329336
<Thead>
330337
<Tr>
331338
<Th>
332339
<Text
340+
sx={theme => ({ fontSize: theme.fontSizes.$xs })}
333341
localizationKey={localizationKeys(
334342
'configureSSO.configureStep.configureAttributes.attributeMapping.columns.attribute',
335343
)}
336344
/>
337345
</Th>
346+
338347
<Th>
339348
<Text
349+
sx={theme => ({ fontSize: theme.fontSizes.$xs })}
340350
localizationKey={localizationKeys(
341351
'configureSSO.configureStep.configureAttributes.attributeMapping.columns.claimName',
342352
)}
343353
/>
344354
</Th>
345355
</Tr>
346356
</Thead>
357+
347358
<Tbody>
348359
<Tr>
349360
<Td>
350361
<Flex
362+
as='span'
351363
align='center'
352364
sx={theme => ({ gap: theme.space.$2 })}
353365
>
354366
<Text
355-
as='span'
367+
colorScheme='secondary'
356368
localizationKey={localizationKeys(
357369
'configureSSO.configureStep.configureAttributes.attributeMapping.rows.email.attribute',
358370
)}
359371
/>
372+
360373
<Badge
361374
colorScheme='warning'
362375
localizationKey={localizationKeys(
@@ -365,88 +378,77 @@ export const ConfigureAttributesSubStep = (): JSX.Element => {
365378
/>
366379
</Flex>
367380
</Td>
381+
368382
<Td>
369383
<Text
370384
as='span'
371-
sx={theme => ({
372-
fontFamily: 'monospace',
373-
fontSize: theme.fontSizes.$sm,
374-
backgroundColor: theme.colors.$neutralAlpha100,
375-
borderRadius: theme.radii.$sm,
376-
padding: `${theme.space.$0x25} ${theme.space.$1}`,
377-
})}
385+
sx={{ fontFamily: 'monospace' }}
378386
localizationKey={localizationKeys(
379387
'configureSSO.configureStep.configureAttributes.attributeMapping.rows.email.claim',
380388
)}
381389
/>
382390
</Td>
383391
</Tr>
392+
384393
<Tr>
385394
<Td>
386395
<Flex
396+
as='span'
387397
align='center'
388398
sx={theme => ({ gap: theme.space.$2 })}
389399
>
390400
<Text
391-
as='span'
401+
colorScheme='secondary'
392402
localizationKey={localizationKeys(
393403
'configureSSO.configureStep.configureAttributes.attributeMapping.rows.firstName.attribute',
394404
)}
395405
/>
406+
396407
<Badge
397-
colorScheme='secondary'
398408
localizationKey={localizationKeys(
399409
'configureSSO.configureStep.configureAttributes.attributeMapping.badges.optional',
400410
)}
401411
/>
402412
</Flex>
403413
</Td>
414+
404415
<Td>
405416
<Text
406417
as='span'
407-
sx={theme => ({
408-
fontFamily: 'monospace',
409-
fontSize: theme.fontSizes.$sm,
410-
backgroundColor: theme.colors.$neutralAlpha100,
411-
borderRadius: theme.radii.$sm,
412-
padding: `${theme.space.$0x25} ${theme.space.$1}`,
413-
})}
418+
sx={{ fontFamily: 'monospace' }}
414419
localizationKey={localizationKeys(
415420
'configureSSO.configureStep.configureAttributes.attributeMapping.rows.firstName.claim',
416421
)}
417422
/>
418423
</Td>
419424
</Tr>
425+
420426
<Tr>
421427
<Td>
422428
<Flex
429+
as='span'
423430
align='center'
424431
sx={theme => ({ gap: theme.space.$2 })}
425432
>
426433
<Text
427-
as='span'
434+
colorScheme='secondary'
428435
localizationKey={localizationKeys(
429436
'configureSSO.configureStep.configureAttributes.attributeMapping.rows.lastName.attribute',
430437
)}
431438
/>
439+
432440
<Badge
433-
colorScheme='secondary'
434441
localizationKey={localizationKeys(
435442
'configureSSO.configureStep.configureAttributes.attributeMapping.badges.optional',
436443
)}
437444
/>
438445
</Flex>
439446
</Td>
447+
440448
<Td>
441449
<Text
442450
as='span'
443-
sx={theme => ({
444-
fontFamily: 'monospace',
445-
fontSize: theme.fontSizes.$sm,
446-
backgroundColor: theme.colors.$neutralAlpha100,
447-
borderRadius: theme.radii.$sm,
448-
padding: `${theme.space.$0x25} ${theme.space.$1}`,
449-
})}
451+
sx={{ fontFamily: 'monospace' }}
450452
localizationKey={localizationKeys(
451453
'configureSSO.configureStep.configureAttributes.attributeMapping.rows.lastName.claim',
452454
)}
@@ -457,21 +459,21 @@ export const ConfigureAttributesSubStep = (): JSX.Element => {
457459
</Table>
458460
</Col>
459461

460-
<Col sx={theme => ({ gap: theme.space.$1x5 })}>
462+
<Col sx={theme => ({ gap: theme.space.$3 })}>
461463
<Text
462464
as='p'
463-
variant='body'
464-
sx={theme => ({ color: theme.colors.$colorMutedForeground })}
465+
colorScheme='secondary'
465466
localizationKey={localizationKeys(
466467
'configureSSO.configureStep.configureAttributes.verifyMappings.paragraph',
467468
)}
468469
/>
470+
469471
<Col
470472
as='ol'
471473
sx={theme => ({
472474
gap: theme.space.$1x5,
473475
margin: 0,
474-
paddingInlineStart: theme.space.$4,
476+
paddingInlineStart: theme.space.$5,
475477
listStyleType: 'decimal',
476478
})}
477479
>

0 commit comments

Comments
 (0)