From eb1db7904507e3c93261939c0279298f9a6b870e Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Wed, 12 Jun 2024 11:08:19 -0300
Subject: [PATCH] fine-tune some styles

---
 .../src/modules/components/MuiProductSelector.tsx | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/docs/src/modules/components/MuiProductSelector.tsx b/docs/src/modules/components/MuiProductSelector.tsx
index 8537f1d0fc5c62..543a8adccc266d 100644
--- a/docs/src/modules/components/MuiProductSelector.tsx
+++ b/docs/src/modules/components/MuiProductSelector.tsx
@@ -19,9 +19,9 @@ import BarChartRoundedIcon from '@mui/icons-material/BarChartRounded';
 import StyleRoundedIcon from '@mui/icons-material/StyleRounded';
 import WebRoundedIcon from '@mui/icons-material/WebRounded';
 
-const iconStyles = () => ({
+const iconStyles = (theme: Theme) => ({
   fontSize: '.875rem',
-  color: 'primary.main',
+  color: (theme.vars || theme).palette.primary.main,
 });
 
 const logoColor = (theme: Theme) => ({
@@ -83,9 +83,8 @@ function ProductItem({
             backgroundColor: active ? alpha(theme.palette.primary[50], 0.8) : 'grey.50',
             borderColor: 'divider',
           },
-          '&:focus-visible': {
-            outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`,
-            outlineOffset: '2px',
+          '&.Mui-focusVisible': {
+            backgroundColor: active ? (theme.vars || theme).palette.primary[50] : 'transparent',
           },
           ...theme.applyDarkStyles({
             backgroundColor: active ? alpha(theme.palette.primary[900], 0.2) : undefined,
@@ -94,7 +93,9 @@ function ProductItem({
               backgroundColor: active
                 ? alpha(theme.palette.primary[900], 0.3)
                 : alpha(theme.palette.primaryDark[700], 0.5),
-              borderColor: 'divider',
+            },
+            '&.Mui-focusVisible': {
+              backgroundColor: active ? alpha(theme.palette.primary[900], 0.5) : 'transparent',
             },
           }),
         }),
@@ -212,8 +213,6 @@ const MuiProductSelector = React.forwardRef(function MuiProductSelector(
           sm: 'repeat(2, minmax(0, 1fr))',
         },
         gap: '4px',
-        borderBottom: '1px solid',
-        borderColor: 'divider',
       }}
     >
       {coreProducts.map((product) => (