diff --git a/src/components/pages/ProvidersStep/ProvidersStep.tsx b/src/components/pages/ProvidersStep/ProvidersStep.tsx index 3cd130e..11fa31a 100644 --- a/src/components/pages/ProvidersStep/ProvidersStep.tsx +++ b/src/components/pages/ProvidersStep/ProvidersStep.tsx @@ -623,9 +623,14 @@ export const ProvidersStep: React.FC = ({ 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 = ({ '& .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 = ({ 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 = ({ 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 = ({ 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 = ({ - {/* 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 && ( - - onSelectProvider(drawerProvider.id)} - aria-label={`${drawerProvider.name}, ${drawerProvider.location}. Tap to view packages.`} - /> - + 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 */}