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

Step 1 circle uses primary fill + align Input with Select styling

Browse Source 
- StepCircle gets `active` prop — brand-500 fill with white number (used on step 1)
- Input in step 4 now matches selectSx: bgcolor, disabled (opacity + dashed),
  error border, hover, focus — all consistent with steps 1-3

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Richie
2026-03-26 17:39:44 +11:00
parent d5f0a584e0
commit cb7ba5dcdb
1 changed files with 16 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/organisms/FuneralFinder/FuneralFinderV2.tsx
View File

@@ -77,13 +77,17 @@ const STEP_CIRCLE_SIZE = 48;
function StepCircle({ function StepCircle({
step, step,
completed, completed,
active = false,
showConnector = false, showConnector = false,
}: { }: {
step: number; step: number;
completed: boolean; completed: boolean;
/** Use primary brand fill even when not completed (for the first/always-active step) */
active?: boolean;
/** Show a vertical connector line below this circle to the next step */ /** Show a vertical connector line below this circle to the next step */
showConnector?: boolean; showConnector?: boolean;
}) { }) {
const usePrimary = completed || active;
return ( return (
<Box <Box
sx={{ sx={{
@@ -97,7 +101,7 @@ function StepCircle({
position: 'relative', position: 'relative',
zIndex: 1, zIndex: 1,
transition: 'background-color 200ms ease, color 200ms ease', transition: 'background-color 200ms ease, color 200ms ease',
...(completed ...(usePrimary
? { bgcolor: 'var(--fa-color-brand-500)', color: 'common.white' } ? { bgcolor: 'var(--fa-color-brand-500)', color: 'common.white' }
: { bgcolor: 'var(--fa-color-brand-200, #EBDAC8)', color: 'var(--fa-color-brand-700, #8B4E0D)' }), : { bgcolor: 'var(--fa-color-brand-200, #EBDAC8)', color: 'var(--fa-color-brand-700, #8B4E0D)' }),
// Connector line from bottom of this circle toward the next // Connector line from bottom of this circle toward the next
@@ -320,7 +324,7 @@ export const FuneralFinderV2 = React.forwardRef<HTMLDivElement, FuneralFinderV2P
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}> <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
{/* Step 1: I'm looking to */} {/* Step 1: I'm looking to */}
<Box sx={{ display: 'flex', gap: 2.5, alignItems: 'flex-end' }}> <Box sx={{ display: 'flex', gap: 2.5, alignItems: 'flex-end' }}>
<StepCircle step={1} completed={!!lookingTo} showConnector /> <StepCircle step={1} completed={!!lookingTo} active showConnector />
<Box sx={{ flex: 1 }}> <Box sx={{ flex: 1 }}>
<Typography variant="body1" sx={{ fontWeight: 600, mb: 1, color: 'var(--fa-color-brand-700)' }}> <Typography variant="body1" sx={{ fontWeight: 600, mb: 1, color: 'var(--fa-color-brand-700)' }}>
I&rsquo;m looking to&hellip; I&rsquo;m looking to&hellip;
@@ -421,6 +425,7 @@ export const FuneralFinderV2 = React.forwardRef<HTMLDivElement, FuneralFinderV2P
if (e.key === 'Enter') handleSubmit(); if (e.key === 'Enter') handleSubmit();
}} }}
sx={{ sx={{
bgcolor: 'var(--fa-color-surface-default, #fff)',
'& .MuiOutlinedInput-notchedOutline': { '& .MuiOutlinedInput-notchedOutline': {
borderColor: 'var(--fa-color-neutral-200)', borderColor: 'var(--fa-color-neutral-200)',
borderRadius: 'var(--fa-border-radius-md, 8px)', borderRadius: 'var(--fa-border-radius-md, 8px)',
@@ -433,6 +438,15 @@ export const FuneralFinderV2 = React.forwardRef<HTMLDivElement, FuneralFinderV2P
borderColor: 'var(--fa-color-brand-400)', borderColor: 'var(--fa-color-brand-400)',
borderWidth: '1px', borderWidth: '1px',
}, },
'&.Mui-disabled': {
opacity: 0.6,
'& .MuiOutlinedInput-notchedOutline': {
borderStyle: 'dashed',
},
},
'&.Mui-error .MuiOutlinedInput-notchedOutline': {
borderColor: 'var(--fa-color-feedback-error-500, #d32f2f)',
},
'& .MuiOutlinedInput-input': { '& .MuiOutlinedInput-input': {
py: '14px', py: '14px',
px: 2, px: 2,