richie/Parsons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restyle FuneralFinderV3 to standard design system palette

Browse Source 
- 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) <noreply@anthropic.com>
This commit is contained in:
Richie
2026-03-26 19:34:56 +11:00
parent 2690a231f6
commit b15c96fa44
2 changed files with 21 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/organisms/FuneralFinder/FuneralFinderV3.stories.tsx
View File

@@ -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) => (
<Box
sx={{
minHeight: '100vh',
background:
'linear-gradient(135deg, #2C2E35 0%, #4C5B6B 40%, #8EA2A7 70%, #D8C3B5 100%)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
p: 4,
}}
>
<Box sx={{ maxWidth: 480, width: '100%' }}>
<Story />
</Box>
</Box>
),
],
parameters: {
layout: 'fullscreen',
},
};
/** Below a masthead — overlapping hero section */
export const BelowMasthead: Story = {
decorators: [

55
src/components/organisms/FuneralFinder/FuneralFinderV3.tsx
View File

@@ -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 ? <ArrowForwardIcon /> : 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
</Button>