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:
@@ -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>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user