From b15c96fa446c988dda83a28710b805414f1a68a8 Mon Sep 17 00:00:00 2001 From: Richie Date: Thu, 26 Mar 2026 19:34:56 +1100 Subject: [PATCH] Restyle FuneralFinderV3 to standard design system palette - Container: opaque white (surface.raised), standard card shadow/radius - Status cards: white bg + neutral border, brand border + warm bg when selected - Fields: white bg, neutral-200 border, brand border on focus, no focus ring - CTA: standard Button contained, no custom shadows - Keep: overline labels in brand-800, layout structure, form logic, a11y Co-Authored-By: Claude Opus 4.6 (1M context) --- .../FuneralFinder/FuneralFinderV3.stories.tsx | 26 --------- .../FuneralFinder/FuneralFinderV3.tsx | 55 +++++++------------ 2 files changed, 21 insertions(+), 60 deletions(-) diff --git a/src/components/organisms/FuneralFinder/FuneralFinderV3.stories.tsx b/src/components/organisms/FuneralFinder/FuneralFinderV3.stories.tsx index bb1ba6b..2247e93 100644 --- a/src/components/organisms/FuneralFinder/FuneralFinderV3.stories.tsx +++ b/src/components/organisms/FuneralFinder/FuneralFinderV3.stories.tsx @@ -26,32 +26,6 @@ export const Loading: Story = { args: { loading: true }, }; -/** Over a hero image — demonstrates the glassmorphism effect */ -export const OnHeroImage: Story = { - decorators: [ - (Story) => ( - - - - - - ), - ], - parameters: { - layout: 'fullscreen', - }, -}; - /** Below a masthead — overlapping hero section */ export const BelowMasthead: Story = { decorators: [ diff --git a/src/components/organisms/FuneralFinder/FuneralFinderV3.tsx b/src/components/organisms/FuneralFinder/FuneralFinderV3.tsx index 2e0cebe..8b1aa2e 100644 --- a/src/components/organisms/FuneralFinder/FuneralFinderV3.tsx +++ b/src/components/organisms/FuneralFinder/FuneralFinderV3.tsx @@ -130,11 +130,11 @@ const StatusCard = React.forwardRef< border: '2px solid', borderColor: selected ? 'var(--fa-color-border-brand, #BA834E)' - : 'transparent', - borderRadius: 'var(--fa-border-radius-lg, 12px)', + : 'var(--fa-color-border-default, #E8E8E8)', + borderRadius: 'var(--fa-card-border-radius-default, 8px)', bgcolor: selected ? 'var(--fa-color-surface-warm, #FEF9F5)' - : 'var(--fa-color-brand-100, #F7ECDF)', + : 'var(--fa-color-surface-default, #fff)', cursor: 'pointer', fontFamily: 'inherit', textAlign: 'center', @@ -143,10 +143,10 @@ const StatusCard = React.forwardRef< '&:hover': { borderColor: selected ? 'var(--fa-color-border-brand, #BA834E)' - : 'var(--fa-color-brand-300, #D8C3B5)', + : 'var(--fa-color-border-strong, #BFBFBF)', bgcolor: selected ? 'var(--fa-color-surface-warm, #FEF9F5)' - : 'var(--fa-color-brand-200, #EBDAC8)', + : 'var(--fa-color-surface-subtle, #FAFAFA)', }, '&:active': { transform: 'scale(0.98)', @@ -176,7 +176,7 @@ const StatusCard = React.forwardRef< component="span" sx={{ display: 'block', - color: 'var(--fa-color-brand-800, #6B3C13)', + color: 'text.secondary', lineHeight: 1.4, }} > @@ -188,19 +188,21 @@ StatusCard.displayName = 'StatusCard'; // ─── Shared field styles ──────────────────────────────────────────────────── -/** Warm tonal fill, no visible border, no focus ring (per design spec) */ +/** Standard outlined fields — white bg, neutral border, no focus ring per design spec */ const fieldBaseSx = { width: '100%', - bgcolor: 'var(--fa-color-brand-100, #F7ECDF)', + bgcolor: 'var(--fa-color-surface-default, #fff)', borderRadius: 'var(--fa-border-radius-md, 8px)', '& .MuiOutlinedInput-notchedOutline': { - border: 'none', + borderColor: 'var(--fa-color-border-default, #E8E8E8)', + borderRadius: 'var(--fa-border-radius-md, 8px)', }, - '&:hover .MuiOutlinedInput-notchedOutline': { - border: 'none', + '&:hover:not(.Mui-disabled) .MuiOutlinedInput-notchedOutline': { + borderColor: 'var(--fa-color-border-strong, #BFBFBF)', }, '&.Mui-focused .MuiOutlinedInput-notchedOutline': { - border: 'none', + borderColor: 'var(--fa-color-border-brand, #BA834E)', + borderWidth: 1, }, '&.Mui-focused': { boxShadow: 'none', @@ -227,7 +229,7 @@ const selectMenuProps = { fontSize: '0.9375rem', fontFamily: 'var(--fa-font-family-body)', whiteSpace: 'normal' as const, - '&:hover': { bgcolor: 'var(--fa-color-surface-warm)' }, + '&:hover': { bgcolor: 'var(--fa-color-surface-subtle)' }, '&.Mui-selected': { bgcolor: 'var(--fa-color-surface-warm)', fontWeight: 600, @@ -244,8 +246,8 @@ const selectMenuProps = { * Hero search widget v3 — clean vertical form with status cards. * * Two tappable status cards (Immediate Need / Pre-planning), a funeral type - * dropdown, a location input, and a CTA. Glassmorphism container with warm - * tonal field backgrounds. Overline section labels. CTA is always active — + * dropdown, a location input, and a CTA. Standard card container with + * overline section labels. CTA is always active — * clicking it with missing required fields scrolls to the first gap. * * Required fields: status + location (min 3 chars). @@ -368,14 +370,9 @@ export const FuneralFinderV3 = React.forwardRef< aria-label="Find funeral directors" sx={[ { - // Glassmorphism — semi-transparent for backdrop-blur effect. - // No token equivalent for translucent white or warm-tinted border. - bgcolor: 'rgba(255, 255, 255, 0.92)', - backdropFilter: 'blur(12px)', - WebkitBackdropFilter: 'blur(12px)', - border: '1px solid rgba(213, 195, 182, 0.15)', - borderRadius: 'var(--fa-border-radius-lg, 12px)', - boxShadow: 'var(--fa-shadow-xl)', + bgcolor: 'var(--fa-color-surface-raised, #fff)', + borderRadius: 'var(--fa-card-border-radius-default, 8px)', + boxShadow: 'var(--fa-card-shadow-default)', px: { xs: 3.5, sm: 5 }, py: { xs: 4, sm: 5 }, display: 'flex', @@ -548,17 +545,7 @@ export const FuneralFinderV3 = React.forwardRef< loading={loading} endIcon={!loading ? : undefined} onClick={handleSubmit} - sx={{ - minHeight: 52, - // Warm brand-tinted shadow — uses brand.600 (#B0610F / rgb 176,97,15) - // at low opacity. No token for coloured shadows. - boxShadow: - '0 10px 15px -3px rgba(176, 97, 15, 0.2), 0 4px 6px -4px rgba(176, 97, 15, 0.15)', - '&:hover': { - boxShadow: - '0 10px 20px -3px rgba(176, 97, 15, 0.3), 0 4px 8px -4px rgba(176, 97, 15, 0.2)', - }, - }} + sx={{ minHeight: 52 }} > Find Funeral Directors