Normalize molecules: fix StepIndicator timing + spacing, ProviderCardCompact consistency

- StepIndicator: transition 300ms → 150ms (system convention)
- StepIndicator: raw px gap/margin strings → MUI spacing values
- StepIndicator: borderRadius '5px' → var(--fa-border-radius-full)
- StepIndicator: mobile font size 10px → 11px (D020 minimum floor)
- ProviderCardCompact: star icon colour → warning.main (match ProviderCard)
- ProviderCardCompact: meta icon fontSize 16 → 14 (match ProviderCard/VenueCard)

Phase 2.1 retroactive review: molecules normalize

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-27 21:42:00 +11:00
parent 897d27aa54
commit 4edea043e8
2 changed files with 7 additions and 10 deletions

View File

@@ -101,7 +101,7 @@ export const ProviderCardCompact = React.forwardRef<HTMLDivElement, ProviderCard
{/* Location */}
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
<LocationOnOutlinedIcon sx={{ fontSize: 16, color: 'text.secondary' }} aria-hidden />
<LocationOnOutlinedIcon sx={{ fontSize: 14, color: 'text.secondary' }} aria-hidden />
<Typography variant="body2" color="text.secondary">
{location}
</Typography>
@@ -110,10 +110,7 @@ export const ProviderCardCompact = React.forwardRef<HTMLDivElement, ProviderCard
{/* Rating */}
{rating != null && (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
<StarRoundedIcon
sx={{ fontSize: 16, color: 'var(--fa-color-brand-500)' }}
aria-hidden
/>
<StarRoundedIcon sx={{ fontSize: 14, color: 'warning.main' }} aria-hidden />
<Typography variant="caption" color="text.secondary">
{rating} Rating
{reviewCount != null

View File

@@ -59,7 +59,7 @@ export const StepIndicator = React.forwardRef<HTMLDivElement, StepIndicatorProps
sx={[
{
display: 'flex',
gap: { xs: '3px', sm: '5px' },
gap: { xs: 0.75, sm: 1.25 },
width: '100%',
},
...(Array.isArray(sx) ? sx : [sx]),
@@ -80,9 +80,9 @@ export const StepIndicator = React.forwardRef<HTMLDivElement, StepIndicatorProps
<Box
sx={{
height: { xs: 6, sm: 10 },
borderRadius: '5px',
borderRadius: 'var(--fa-border-radius-full)',
bgcolor: isFilled ? 'primary.main' : 'divider',
transition: 'background-color 300ms ease-in-out',
transition: 'background-color 150ms ease-in-out',
}}
/>
@@ -90,13 +90,13 @@ export const StepIndicator = React.forwardRef<HTMLDivElement, StepIndicatorProps
<Typography
variant="body2"
sx={{
mt: { xs: '3px', sm: '5px' },
mt: { xs: 0.75, sm: 1.25 },
fontWeight: isCurrent ? 600 : 400,
color: isCurrent ? 'text.primary' : 'text.secondary',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
fontSize: { xs: '0.625rem', sm: undefined },
fontSize: { xs: '0.6875rem', sm: undefined },
}}
>
{step.label}