From 6ebd52f36f8aca2aad565028765f9d92ec0fcaa6 Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Sun, 29 Mar 2026 22:13:03 +1100
Subject: [PATCH] Batch 1: ToggleButtonGroup fixes, heading standardisation,
 spacing normalisation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ToggleButtonGroup: increase label-to-options spacing (mb 1→2),
  top-align button content (flex-start), fix selected border
  CSS specificity by adding .Mui-selected in grouped selector
- Standardise all split-layout step headings from h4 to display3
  (ProvidersStep, PackagesStep, PreviewStep, VenueStep, CoffinsStep,
  CoffinDetailsStep) — matches D-A decision for brand warmth
- DateTimeStep: normalise section gaps (scheduling fieldset mb 3→4)
- CrematoriumStep: add subheading for consistency, normalise
  witness section spacing (mb 3→4)
- Fix input label clipping in PackagesStep and DateTimeStep
  (add pt: 0.5 to TextField containers for float-label clearance)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../atoms/ToggleButtonGroup/ToggleButtonGroup.tsx         | 7 +++++--
 .../pages/CoffinDetailsStep/CoffinDetailsStep.tsx         | 2 +-
 src/components/pages/CoffinsStep/CoffinsStep.tsx          | 2 +-
 src/components/pages/CrematoriumStep/CrematoriumStep.tsx  | 8 +++++++-
 src/components/pages/DateTimeStep/DateTimeStep.tsx        | 3 ++-
 src/components/pages/PackagesStep/PackagesStep.tsx        | 4 ++--
 src/components/pages/PreviewStep/PreviewStep.tsx          | 2 +-
 src/components/pages/ProvidersStep/ProvidersStep.tsx      | 2 +-
 src/components/pages/VenueStep/VenueStep.tsx              | 2 +-
 9 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/components/atoms/ToggleButtonGroup/ToggleButtonGroup.tsx b/src/components/atoms/ToggleButtonGroup/ToggleButtonGroup.tsx
index f5e25bd..88687f8 100644
--- a/src/components/atoms/ToggleButtonGroup/ToggleButtonGroup.tsx
+++ b/src/components/atoms/ToggleButtonGroup/ToggleButtonGroup.tsx
@@ -114,7 +114,7 @@ export const ToggleButtonGroup = React.forwardRef<HTMLFieldSetElement, ToggleBut
               color: 'text.primary',
               fontWeight: 600,
               fontSize: '1rem',
-              mb: 1,
+              mb: 2,
               '&.Mui-focused': { color: 'text.primary' },
               '&.Mui-error': { color: 'text.primary' },
             }}
@@ -142,6 +142,9 @@ export const ToggleButtonGroup = React.forwardRef<HTMLFieldSetElement, ToggleBut
                 borderColor: 'var(--fa-color-neutral-200)',
                 marginLeft: 0,
               },
+              '&.Mui-selected': {
+                borderColor: 'primary.main',
+              },
             },
           }}
           {...groupProps}
@@ -155,7 +158,7 @@ export const ToggleButtonGroup = React.forwardRef<HTMLFieldSetElement, ToggleBut
                 flex: 1,
                 textTransform: 'none',
                 flexDirection: 'column',
-                alignItems: 'center',
+                alignItems: 'flex-start',
                 gap: 0.5,
                 py: option.description ? 2 : 1.5,
                 px: 3,
diff --git a/src/components/pages/CoffinDetailsStep/CoffinDetailsStep.tsx b/src/components/pages/CoffinDetailsStep/CoffinDetailsStep.tsx
index 9d9ee5d..bb9b820 100644
--- a/src/components/pages/CoffinDetailsStep/CoffinDetailsStep.tsx
+++ b/src/components/pages/CoffinDetailsStep/CoffinDetailsStep.tsx
@@ -254,7 +254,7 @@ export const CoffinDetailsStep: React.FC<CoffinDetailsStepProps> = ({
   // ─── Right panel: Option selectors + CTAs ───
   const optionsPanel = (
     <Box>
-      <Typography variant="h4" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
         Coffin details
       </Typography>
 
diff --git a/src/components/pages/CoffinsStep/CoffinsStep.tsx b/src/components/pages/CoffinsStep/CoffinsStep.tsx
index 2477919..37bff2f 100644
--- a/src/components/pages/CoffinsStep/CoffinsStep.tsx
+++ b/src/components/pages/CoffinsStep/CoffinsStep.tsx
@@ -198,7 +198,7 @@ export const CoffinsStep: React.FC<CoffinsStepProps> = ({
       }}
     >
       {/* Page heading */}
-      <Typography variant="h4" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
         Choose a coffin
       </Typography>
 
diff --git a/src/components/pages/CrematoriumStep/CrematoriumStep.tsx b/src/components/pages/CrematoriumStep/CrematoriumStep.tsx
index 4b65320..0137887 100644
--- a/src/components/pages/CrematoriumStep/CrematoriumStep.tsx
+++ b/src/components/pages/CrematoriumStep/CrematoriumStep.tsx
@@ -149,6 +149,12 @@ export const CrematoriumStep: React.FC<CrematoriumStepProps> = ({
         Crematorium
       </Typography>
 
+      <Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}>
+        {isPrePlanning
+          ? 'Review the crematorium details. You can update this later.'
+          : 'Confirm the crematorium and let us know about any preferences.'}
+      </Typography>
+
       <Box
         component="form"
         noValidate
@@ -239,7 +245,7 @@ export const CrematoriumStep: React.FC<CrematoriumStepProps> = ({
         </Box>
 
         {/* ─── Witness / attendance question ─── */}
-        <FormControl component="fieldset" sx={{ mb: 3, display: 'block' }}>
+        <FormControl component="fieldset" sx={{ mb: 4, display: 'block' }}>
           <FormLabel component="legend" sx={{ mb: 0.5 }}>
             Will anyone be following the hearse to the crematorium?
           </FormLabel>
diff --git a/src/components/pages/DateTimeStep/DateTimeStep.tsx b/src/components/pages/DateTimeStep/DateTimeStep.tsx
index f809af4..70ecf01 100644
--- a/src/components/pages/DateTimeStep/DateTimeStep.tsx
+++ b/src/components/pages/DateTimeStep/DateTimeStep.tsx
@@ -197,6 +197,7 @@ export const DateTimeStep: React.FC<DateTimeStepProps> = ({
                 flexDirection: { xs: 'column', sm: 'row' },
                 gap: 2,
                 mb: 2,
+                pt: 0.5,
               }}
             >
               <TextField
@@ -225,7 +226,7 @@ export const DateTimeStep: React.FC<DateTimeStepProps> = ({
 
         {/* ─── Section 2: Scheduling ─── */}
         {showScheduling && (
-          <Box component="fieldset" sx={{ border: 0, m: 0, p: 0, mb: 3 }}>
+          <Box component="fieldset" sx={{ border: 0, m: 0, p: 0, mb: 4 }}>
             <Typography component="legend" variant="h5" sx={{ mb: 2.5 }}>
               {schedulingHeading}
             </Typography>
diff --git a/src/components/pages/PackagesStep/PackagesStep.tsx b/src/components/pages/PackagesStep/PackagesStep.tsx
index 654741a..0effbd0 100644
--- a/src/components/pages/PackagesStep/PackagesStep.tsx
+++ b/src/components/pages/PackagesStep/PackagesStep.tsx
@@ -191,7 +191,7 @@ export const PackagesStep: React.FC<PackagesStepProps> = ({
       </Box>
 
       {/* Heading */}
-      <Typography variant="h4" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
         Choose a funeral package
       </Typography>
       <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
@@ -202,7 +202,7 @@ export const PackagesStep: React.FC<PackagesStepProps> = ({
       </Typography>
 
       {/* Budget filter */}
-      <Box sx={{ mb: 3 }}>
+      <Box sx={{ mb: 3, pt: 0.5 }}>
         <TextField
           select
           size="small"
diff --git a/src/components/pages/PreviewStep/PreviewStep.tsx b/src/components/pages/PreviewStep/PreviewStep.tsx
index 31f36c5..3f836f6 100644
--- a/src/components/pages/PreviewStep/PreviewStep.tsx
+++ b/src/components/pages/PreviewStep/PreviewStep.tsx
@@ -148,7 +148,7 @@ export const PreviewStep: React.FC<PreviewStepProps> = ({
       </Box>
 
       {/* Page heading */}
-      <Typography variant="h4" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
         Your selected package
       </Typography>
       <Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}>
diff --git a/src/components/pages/ProvidersStep/ProvidersStep.tsx b/src/components/pages/ProvidersStep/ProvidersStep.tsx
index fc53c29..c1c907e 100644
--- a/src/components/pages/ProvidersStep/ProvidersStep.tsx
+++ b/src/components/pages/ProvidersStep/ProvidersStep.tsx
@@ -147,7 +147,7 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
       }
     >
       {/* Header */}
-      <Typography variant="h4" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
         Choose a funeral provider
       </Typography>
       <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
diff --git a/src/components/pages/VenueStep/VenueStep.tsx b/src/components/pages/VenueStep/VenueStep.tsx
index 77f67ff..d833ecf 100644
--- a/src/components/pages/VenueStep/VenueStep.tsx
+++ b/src/components/pages/VenueStep/VenueStep.tsx
@@ -194,7 +194,7 @@ export const VenueStep: React.FC<VenueStepProps> = ({
       }
     >
       {/* Page heading */}
-      <Typography variant="h4" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
         Where would you like the service?
       </Typography>