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

ProvidersStep mobile: unify control outlines + shadows, square drawer bottom

Browse Source 
- Search, Filters, Sort by, and the List/Map toggle now share a
  neutral-300 1px border and a shadow-sm drop, so the strip reads as a
  coherent set of floating chips over the map (not a mix of different
  button chromes)
- Drawer card now runs edge-to-edge inside the drawer with its own
  border + shadow stripped; the drawer Paper provides the top radius
  and the bottom is explicitly squared (no stray MUI default radius
  leaking through)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Richie
2026-04-22 21:52:54 +10:00
parent d91ad13af8
commit 7feb6582c4
1 changed files with 37 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/pages/ProvidersStep/ProvidersStep.tsx
View File

@@ -623,9 +623,14 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
sx={{
'& .MuiOutlinedInput-root': {
bgcolor: 'background.paper',
boxShadow: 'var(--fa-shadow-sm)',
},
'& .MuiOutlinedInput-notchedOutline': {
borderColor: 'var(--fa-color-neutral-300)',
borderWidth: 1,
},
'& .MuiOutlinedInput-root.Mui-focused': {
boxShadow: 'none',
boxShadow: 'var(--fa-shadow-sm)',
'& .MuiOutlinedInput-notchedOutline': {
borderColor: 'var(--fa-color-neutral-300)',
borderWidth: 1,
@@ -646,7 +651,12 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
'& .MuiButton-root': {
height: 32,
bgcolor: 'background.paper',
'&:hover': { bgcolor: 'background.paper' },
borderColor: 'var(--fa-color-neutral-300)',
boxShadow: 'var(--fa-shadow-sm)',
'&:hover': {
bgcolor: 'background.paper',
borderColor: 'var(--fa-color-neutral-300)',
},
'&:focus-visible': { outline: 'none' },
},
}}
@@ -666,8 +676,13 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
sx={{
height: 32,
bgcolor: 'background.paper',
borderColor: 'var(--fa-color-neutral-300)',
boxShadow: 'var(--fa-shadow-sm)',
textTransform: 'none',
'&:hover': { bgcolor: 'background.paper' },
'&:hover': {
bgcolor: 'background.paper',
borderColor: 'var(--fa-color-neutral-300)',
},
'&:focus-visible': { outline: 'none' },
}}
>
@@ -705,10 +720,12 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
sx={{
ml: 'auto',
flexShrink: 0,
boxShadow: 'var(--fa-shadow-sm)',
'& .MuiToggleButton-root': {
height: 32,
px: 1,
py: 0,
borderColor: 'var(--fa-color-neutral-300)',
bgcolor: 'background.paper',
'&:hover': { bgcolor: 'background.paper' },
'&.Mui-selected': {
@@ -749,6 +766,7 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
zIndex: 3,
maxHeight: '60vh',
overflow: 'auto',
borderRadius: 0,
borderTopLeftRadius: 16,
borderTopRightRadius: 16,
boxShadow: 'var(--fa-shadow-lg)',
@@ -791,22 +809,23 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
</IconButton>
</Box>
{/* Single-provider drawer content — entire card clickable */}
{/* Single-provider drawer content — entire card clickable. Card
runs edge-to-edge inside the drawer with its own corners
squared; the drawer Paper provides the top radius. */}
{drawerProvider && (
<Box sx={{ px: 1.5, pb: 1.5 }}>
<ProviderCard
name={drawerProvider.name}
location={drawerProvider.location}
verified={drawerProvider.verified}
imageUrl={drawerProvider.imageUrl}
logoUrl={drawerProvider.logoUrl}
rating={drawerProvider.rating}
reviewCount={drawerProvider.reviewCount}
startingPrice={drawerProvider.startingPrice}
onClick={() => onSelectProvider(drawerProvider.id)}
aria-label={`${drawerProvider.name}, ${drawerProvider.location}. Tap to view packages.`}
/>
</Box>
<ProviderCard
name={drawerProvider.name}
location={drawerProvider.location}
verified={drawerProvider.verified}
imageUrl={drawerProvider.imageUrl}
logoUrl={drawerProvider.logoUrl}
rating={drawerProvider.rating}
reviewCount={drawerProvider.reviewCount}
startingPrice={drawerProvider.startingPrice}
onClick={() => onSelectProvider(drawerProvider.id)}
aria-label={`${drawerProvider.name}, ${drawerProvider.location}. Tap to view packages.`}
sx={{ borderRadius: 0, boxShadow: 'none', border: 'none' }}
/>
)}
{/* Cluster list drawer content — tap row to drill in */}