From 4edea043e86f74dd78c67e973a5ff58aff5871e6 Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Fri, 27 Mar 2026 21:42:00 +1100
Subject: [PATCH] Normalize molecules: fix StepIndicator timing + spacing,
 ProviderCardCompact consistency
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 .../ProviderCardCompact/ProviderCardCompact.tsx        |  7 ++-----
 .../molecules/StepIndicator/StepIndicator.tsx          | 10 +++++-----
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/components/molecules/ProviderCardCompact/ProviderCardCompact.tsx b/src/components/molecules/ProviderCardCompact/ProviderCardCompact.tsx
index 923f017..50980d7 100644
--- a/src/components/molecules/ProviderCardCompact/ProviderCardCompact.tsx
+++ b/src/components/molecules/ProviderCardCompact/ProviderCardCompact.tsx
@@ -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
diff --git a/src/components/molecules/StepIndicator/StepIndicator.tsx b/src/components/molecules/StepIndicator/StepIndicator.tsx
index ac59daf..194da58 100644
--- a/src/components/molecules/StepIndicator/StepIndicator.tsx
+++ b/src/components/molecules/StepIndicator/StepIndicator.tsx
@@ -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}