Filter panel UX refinements: headings, layout, location chip, padding

- DialogShell: bump px from 3 to 5 (20px) for more breathing room
- FilterPanel: "Done" → "Apply", move "Clear all" to footer as "Reset filters"
- ProvidersStep filters:
  - Section headings: labelLg + fontWeight 600 for visual hierarchy
  - Funeral type chips: horizontal scroll instead of wrap
  - Location section: chip showing current search + editable input
  - Price inputs: compact fontSize 0.875rem + tighter padding
  - Service tradition: 'None' added as first option
  - Active count includes location search
  - Reset clears search query too

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-31 16:07:32 +11:00
parent 7dea9f5855
commit 89ba86565a
4 changed files with 97 additions and 38 deletions

View File

@@ -5,7 +5,6 @@ import type { SxProps, Theme } from '@mui/material/styles';
import { DialogShell } from '../../atoms/DialogShell';
import { Button } from '../../atoms/Button';
import { Badge } from '../../atoms/Badge';
import { Link } from '../../atoms/Link';
// ─── Types ───────────────────────────────────────────────────────────────────
@@ -75,25 +74,18 @@ export const FilterPanel = React.forwardRef<HTMLDivElement, FilterPanelProps>(
<DialogShell
open={open}
onClose={handleClose}
title={
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
{label}
{onClear && activeCount > 0 && (
<Link
component="button"
onClick={() => onClear()}
underline="hover"
sx={{ fontSize: (theme: Theme) => theme.typography.caption.fontSize }}
>
Clear all
</Link>
)}
</Box>
}
title={label}
footer={
<Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
{onClear && activeCount > 0 ? (
<Button variant="text" size="small" color="secondary" onClick={() => onClear()}>
Reset filters
</Button>
) : (
<Box />
)}
<Button variant="contained" size="small" onClick={handleClose}>
Done
Apply
</Button>
</Box>
}