From 9019ca1d5f97ccede06a9b2aeb8c016b3b004016 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Fri, 24 May 2024 20:29:32 -0300
Subject: [PATCH] make menu styles consistent

---
 .../ApiPage/sections/ToggleDisplayOption.tsx      | 12 ++++++------
 docs/src/modules/components/AppNavDrawer.js       |  2 +-
 packages/mui-docs/src/branding/brandingTheme.ts   | 15 ++++++++++-----
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/docs/src/modules/components/ApiPage/sections/ToggleDisplayOption.tsx b/docs/src/modules/components/ApiPage/sections/ToggleDisplayOption.tsx
index 6c379397e6a41c..9bc9fc506d8b8e 100644
--- a/docs/src/modules/components/ApiPage/sections/ToggleDisplayOption.tsx
+++ b/docs/src/modules/components/ApiPage/sections/ToggleDisplayOption.tsx
@@ -135,10 +135,10 @@ export default function ToggleDisplayOption(props: ToggleDisplayOptionProps) {
           data-ga-event-action={sectionType}
           data-ga-event-label="table"
         >
+          Table
           <CheckIcon
-            sx={{ fontSize: '0.85rem', mr: 1, opacity: displayOption === 'table' ? 1 : 0 }}
+            sx={{ fontSize: '0.85rem', ml: 'auto', opacity: displayOption === 'table' ? 1 : 0 }}
           />
-          Table
         </MenuItem>
         <MenuItem
           value="expanded"
@@ -148,10 +148,10 @@ export default function ToggleDisplayOption(props: ToggleDisplayOptionProps) {
           data-ga-event-action={sectionType}
           data-ga-event-label="expanded"
         >
+          Expanded list
           <CheckIcon
-            sx={{ fontSize: '0.85rem', mr: 1, opacity: displayOption === 'expanded' ? 1 : 0 }}
+            sx={{ fontSize: '0.85rem', ml: 'auto', opacity: displayOption === 'expanded' ? 1 : 0 }}
           />
-          Expanded list
         </MenuItem>
         <MenuItem
           value="collapsed"
@@ -161,10 +161,10 @@ export default function ToggleDisplayOption(props: ToggleDisplayOptionProps) {
           data-ga-event-action={sectionType}
           data-ga-event-label="collapsed"
         >
+          Collapsed list
           <CheckIcon
-            sx={{ fontSize: '0.85rem', mr: 1, opacity: displayOption === 'collapsed' ? 1 : 0 }}
+            sx={{ fontSize: '0.85rem', ml: 'auto', opacity: displayOption === 'collapsed' ? 1 : 0 }}
           />
-          Collapsed list
         </MenuItem>
       </Menu>
     </React.Fragment>
diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js
index 0665d1a5364796..1039501c0ed53e 100644
--- a/docs/src/modules/components/AppNavDrawer.js
+++ b/docs/src/modules/components/AppNavDrawer.js
@@ -356,7 +356,7 @@ export default function AppNavDrawer(props) {
             {versions.map((item) => {
               if (item.text === 'View all versions') {
                 return [
-                  <Divider key="divider" sx={{ mx: -1 }} />,
+                  <Divider key="divider" />,
                   <MenuItem key="all-versions" component="a" href={item.href} onClick={onClose}>
                     {/* eslint-disable-next-line material-ui/no-hardcoded-labels -- version string is untranslatable */}
                     {`View all versions`}
diff --git a/packages/mui-docs/src/branding/brandingTheme.ts b/packages/mui-docs/src/branding/brandingTheme.ts
index 9ef9e9c47a1f82..46866433930872 100644
--- a/packages/mui-docs/src/branding/brandingTheme.ts
+++ b/packages/mui-docs/src/branding/brandingTheme.ts
@@ -509,7 +509,7 @@ export function getThemedComponents(): ThemeOptions {
                 color: (theme.vars || theme).palette.text.primary,
                 backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
                 borderColor: (theme.vars || theme).palette.primaryDark[100],
-                boxShadow: `${alpha(theme.palette.grey[200], 0.5)} 0 1px 0 inset, ${alpha(theme.palette.grey[100], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+                boxShadow: `#FFF 0 1px 0 inset, ${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
                 '&:hover': {
                   backgroundColor: (theme.vars || theme).palette.grey[50],
                 },
@@ -801,6 +801,14 @@ export function getThemedComponents(): ThemeOptions {
               border: '1px solid',
               backgroundColor: (theme.vars || theme).palette.background.paper,
               borderColor: (theme.vars || theme).palette.grey[200],
+              '& .MuiMenu-list': {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '2px',
+                '& .MuiDivider-root': {
+                  margin: '4px -8px 4px -8px',
+                },
+              },
               '& .MuiMenuItem-root': {
                 padding: '6px 12px',
                 borderRadius: '6px',
@@ -849,10 +857,7 @@ export function getThemedComponents(): ThemeOptions {
       MuiDivider: {
         styleOverrides: {
           root: ({ theme }) => ({
-            borderColor: (theme.vars || theme).palette.grey[100],
-            ...theme.applyDarkStyles({
-              borderColor: alpha(theme.palette.primaryDark[500], 0.3),
-            }),
+            borderColor: (theme.vars || theme).palette.divider,
           }),
         },
       },