ConfirmationStep redesign, page tweaks across wizard

- ConfirmationStep: animated SVG tick, "What happens next" warm card,
  bullet-point layout, contactPhone prop, link-based secondary actions
- VenueStep + ProvidersStep: sticky search bar padding fix, off-white
  bg behind card lists
- IntroStep, CemeteryStep, CrematoriumStep, DateTimeStep: add divider
  under subheading for visual separation
- CoffinsStep: h4 heading (matches VenueStep/ProvidersStep list layout),
  sidebar headings h5 → h6

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-31 15:09:12 +11:00
parent 9b75aa7ef3
commit 7a06f89e84
9 changed files with 217 additions and 71 deletions

View File

@@ -139,7 +139,7 @@ export const VenueStep: React.FC<VenueStepProps> = ({
top: 0,
zIndex: 1,
bgcolor: 'background.default',
pt: 1.5,
pt: 3,
pb: 1.5,
mx: { xs: -2, md: -3 },
px: { xs: 2, md: 3 },
@@ -205,7 +205,16 @@ export const VenueStep: React.FC<VenueStepProps> = ({
<Box
role="list"
aria-label="Available venues"
sx={{ display: 'flex', flexDirection: 'column', gap: 2, pb: 3 }}
sx={{
display: 'flex',
flexDirection: 'column',
gap: 2,
pb: 3,
pt: 2,
px: { xs: 2, md: 3 },
mx: { xs: -2, md: -3 },
bgcolor: 'var(--fa-color-surface-subtle)',
}}
>
{venues.map((venue) => (
<VenueCard