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:
@@ -101,7 +101,7 @@ export const ProviderCardCompact = React.forwardRef<HTMLDivElement, ProviderCard
|
|||||||
|
|
||||||
{/* Location */}
|
{/* Location */}
|
||||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
<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">
|
<Typography variant="body2" color="text.secondary">
|
||||||
{location}
|
{location}
|
||||||
</Typography>
|
</Typography>
|
||||||
@@ -110,10 +110,7 @@ export const ProviderCardCompact = React.forwardRef<HTMLDivElement, ProviderCard
|
|||||||
{/* Rating */}
|
{/* Rating */}
|
||||||
{rating != null && (
|
{rating != null && (
|
||||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||||
<StarRoundedIcon
|
<StarRoundedIcon sx={{ fontSize: 14, color: 'warning.main' }} aria-hidden />
|
||||||
sx={{ fontSize: 16, color: 'var(--fa-color-brand-500)' }}
|
|
||||||
aria-hidden
|
|
||||||
/>
|
|
||||||
<Typography variant="caption" color="text.secondary">
|
<Typography variant="caption" color="text.secondary">
|
||||||
{rating} Rating
|
{rating} Rating
|
||||||
{reviewCount != null
|
{reviewCount != null
|
||||||
|
|||||||
@@ -59,7 +59,7 @@ export const StepIndicator = React.forwardRef<HTMLDivElement, StepIndicatorProps
|
|||||||
sx={[
|
sx={[
|
||||||
{
|
{
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
gap: { xs: '3px', sm: '5px' },
|
gap: { xs: 0.75, sm: 1.25 },
|
||||||
width: '100%',
|
width: '100%',
|
||||||
},
|
},
|
||||||
...(Array.isArray(sx) ? sx : [sx]),
|
...(Array.isArray(sx) ? sx : [sx]),
|
||||||
@@ -80,9 +80,9 @@ export const StepIndicator = React.forwardRef<HTMLDivElement, StepIndicatorProps
|
|||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
height: { xs: 6, sm: 10 },
|
height: { xs: 6, sm: 10 },
|
||||||
borderRadius: '5px',
|
borderRadius: 'var(--fa-border-radius-full)',
|
||||||
bgcolor: isFilled ? 'primary.main' : 'divider',
|
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
|
<Typography
|
||||||
variant="body2"
|
variant="body2"
|
||||||
sx={{
|
sx={{
|
||||||
mt: { xs: '3px', sm: '5px' },
|
mt: { xs: 0.75, sm: 1.25 },
|
||||||
fontWeight: isCurrent ? 600 : 400,
|
fontWeight: isCurrent ? 600 : 400,
|
||||||
color: isCurrent ? 'text.primary' : 'text.secondary',
|
color: isCurrent ? 'text.primary' : 'text.secondary',
|
||||||
whiteSpace: 'nowrap',
|
whiteSpace: 'nowrap',
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
textOverflow: 'ellipsis',
|
textOverflow: 'ellipsis',
|
||||||
fontSize: { xs: '0.625rem', sm: undefined },
|
fontSize: { xs: '0.6875rem', sm: undefined },
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{step.label}
|
{step.label}
|
||||||
|
|||||||
Reference in New Issue
Block a user