From 3bf5f72b4fa729fe86ca3d16d3110680d907e374 Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Wed, 22 Apr 2026 10:53:04 +1000
Subject: [PATCH] ProvidersStep search: lock button, primary-circle, drop focus
 rings, grey chip
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Suppress Autocomplete's own popup/clear indicators (forcePopupIcon,
  clearIcon) so the search IconButton stays anchored in the same spot
  across empty, draft, and chip states
- Search button is a primary-filled circle at default strength in every
  state (no disabled dimming) — a clear affordance, handler already
  guards for empty drafts
- Drop the brand-gold focus ring on the search bar; keep the default
  neutral border on focus
- Drop the copper 2px focus outline on Filters and Sort (outline: none
  under :focus-visible)
- Committed location chip now uses the default neutral tonal fill
  instead of the promoted brand colour

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../pages/ProvidersStep/ProvidersStep.tsx     | 39 ++++++++++++++-----
 1 file changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/components/pages/ProvidersStep/ProvidersStep.tsx b/src/components/pages/ProvidersStep/ProvidersStep.tsx
index a9f9992..6c4cb42 100644
--- a/src/components/pages/ProvidersStep/ProvidersStep.tsx
+++ b/src/components/pages/ProvidersStep/ProvidersStep.tsx
@@ -416,6 +416,8 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
           multiple
           freeSolo
           options={[]}
+          forcePopupIcon={false}
+          clearIcon={null}
           value={searchQuery.trim() ? [searchQuery.trim()] : []}
           inputValue={searchDraft}
           onInputChange={(_, newDraft, reason) => {
@@ -443,7 +445,6 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
                   key={key}
                   label={option}
                   size="small"
-                  selected
                   aria-label={`Current location: ${option}. Press delete to clear.`}
                   {...chipProps}
                 />
@@ -470,22 +471,38 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
                   </>
                 ),
                 endAdornment: (
-                  <InputAdornment position="end" sx={{ mr: 0.25 }}>
+                  <InputAdornment position="end" sx={{ mr: 0.5 }}>
                     <IconButton
                       aria-label="Search"
-                      color="primary"
-                      size="small"
                       onClick={() => commitSearch(searchDraft)}
-                      disabled={!searchDraft.trim()}
+                      sx={{
+                        width: 28,
+                        height: 28,
+                        borderRadius: '50%',
+                        bgcolor: 'primary.main',
+                        color: 'primary.contrastText',
+                        '&:hover': { bgcolor: 'primary.dark' },
+                        '&:focus-visible': { outline: 'none' },
+                      }}
                     >
-                      <SearchIcon fontSize="small" />
+                      <SearchIcon sx={{ fontSize: 16 }} />
                     </IconButton>
                   </InputAdornment>
                 ),
               }}
             />
           )}
-          sx={{ mb: 1.5 }}
+          sx={{
+            mb: 1.5,
+            // Kill the custom brand focus ring + border colour change on focus
+            '& .MuiOutlinedInput-root.Mui-focused': {
+              boxShadow: 'none',
+              '& .MuiOutlinedInput-notchedOutline': {
+                borderColor: 'var(--fa-color-neutral-300)',
+                borderWidth: 1,
+              },
+            },
+          }}
         />
 
         {/* Control bar — filters + sort */}
@@ -497,7 +514,11 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
           }}
         >
           {/* Filters */}
-          <FilterPanel activeCount={activeCount} onClear={handleClear}>
+          <FilterPanel
+            activeCount={activeCount}
+            onClear={handleClear}
+            sx={{ '& .MuiButton-root:focus-visible': { outline: 'none' } }}
+          >
             {/* ── Location ── */}
             <Box>
               <Typography variant="labelLg" sx={sectionHeadingSx}>
@@ -681,7 +702,7 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
               onClick={(e) => setSortAnchor(e.currentTarget)}
               aria-haspopup="listbox"
               aria-label={`Sort by ${SORT_OPTIONS.find((o) => o.value === sortBy)?.label ?? 'Recommended'}`}
-              sx={{ textTransform: 'none' }}
+              sx={{ textTransform: 'none', '&:focus-visible': { outline: 'none' } }}
             >
               <Box component="span" sx={{ color: 'text.secondary', fontWeight: 400, mr: 0.5 }}>
                 Sort: