From a8c1a401f18f35edf89c6f104b8fc283f0720c7c Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Tue, 7 Sep 2021 11:50:22 +0200
Subject: [PATCH 01/21] improve sidebar

---
 docs/src/modules/components/AppNavDrawerItem.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
index 5e5da7d343ece7..248ee999ee80aa 100644
--- a/docs/src/modules/components/AppNavDrawerItem.js
+++ b/docs/src/modules/components/AppNavDrawerItem.js
@@ -61,7 +61,7 @@ const Item = styled(({ component: Component = 'div', ...props }) => <Component {
 
 const ItemLink = styled(Item, {
   shouldForwardProp: (prop) => prop !== 'depth',
-})(({ theme }) => {
+})(({ theme, depth }) => {
   return {
     color: theme.palette.text.secondary,
     fontSize: '0.8125rem',
@@ -89,7 +89,7 @@ const ItemLink = styled(Item, {
         ),
       },
     },
-    paddingLeft: 38,
+    paddingLeft: 38 + (depth - 1)*10,
   };
 });
 
@@ -145,7 +145,7 @@ const ItemButton = styled(Item, {
           },
         }
       : {
-          paddingLeft: 38,
+          paddingLeft: 38 + (depth - 1)*10,
         }),
   };
 });

From f6e897f07cf48bea405353441bbcfcb21ed2ce53 Mon Sep 17 00:00:00 2001
From: danilo leal <daniloleal09@gmail.com>
Date: Tue, 7 Sep 2021 12:54:56 -0300
Subject: [PATCH 02/21] change settings drawer mode icons

---
 docs/src/modules/components/AppNavDrawerItem.js  | 6 +++---
 docs/src/modules/components/AppSettingsDrawer.js | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
index 248ee999ee80aa..aeee3fa4fc075c 100644
--- a/docs/src/modules/components/AppNavDrawerItem.js
+++ b/docs/src/modules/components/AppNavDrawerItem.js
@@ -89,7 +89,7 @@ const ItemLink = styled(Item, {
         ),
       },
     },
-    paddingLeft: 38 + (depth - 1)*10,
+    paddingLeft: 38 + (depth - 2)*10,
   };
 });
 
@@ -118,7 +118,7 @@ const ItemButton = styled(Item, {
       return theme.palette.text.primary;
     })(),
     fontSize: depth === 1 ? '0.75rem' : undefined,
-    fontWeight: depth === 0 ? 500 : 600,
+    fontWeight: depth === 0 ? 500 : 700,
     margin: theme.spacing(0.5, 0),
     '&:hover': {
       backgroundColor: depth === 0 ? '' : alpha(theme.palette.primary.main, 0),
@@ -145,7 +145,7 @@ const ItemButton = styled(Item, {
           },
         }
       : {
-          paddingLeft: 38 + (depth - 1)*10,
+          paddingLeft: 38,
         }),
   };
 });
diff --git a/docs/src/modules/components/AppSettingsDrawer.js b/docs/src/modules/components/AppSettingsDrawer.js
index ebe41d893823b1..ef123c736ada1a 100644
--- a/docs/src/modules/components/AppSettingsDrawer.js
+++ b/docs/src/modules/components/AppSettingsDrawer.js
@@ -11,8 +11,8 @@ import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import ToggleButton from '@mui/material/ToggleButton';
 import IconButton from '@mui/material/IconButton';
 import CloseIcon from '@mui/icons-material/Close';
-import Brightness2RoundedIcon from '@mui/icons-material/Brightness2Rounded';
-import Brightness7Icon from '@mui/icons-material/Brightness7';
+import LightModeIcon from '@mui/icons-material/LightMode';
+import DarkModeOutlinedIcon from '@mui/icons-material/DarkModeOutlined';
 import SettingsBrightnessIcon from '@mui/icons-material/SettingsBrightness';
 import FormatTextdirectionLToRIcon from '@mui/icons-material/FormatTextdirectionLToR';
 import FormatTextdirectionRToLIcon from '@mui/icons-material/FormatTextdirectionRToL';
@@ -106,7 +106,7 @@ function AppSettingsDrawer(props) {
             data-ga-event-category="settings"
             data-ga-event-action="light"
           >
-            <Brightness7Icon fontSize="small" />
+            <LightModeIcon fontSize="small" />
             {t('settings.light')}
           </IconToggleButton>
           <IconToggleButton
@@ -124,7 +124,7 @@ function AppSettingsDrawer(props) {
             data-ga-event-category="settings"
             data-ga-event-action="dark"
           >
-            <Brightness2RoundedIcon fontSize="small" />
+            <DarkModeOutlinedIcon fontSize="small" />
             {t('settings.dark')}
           </IconToggleButton>
         </ToggleButtonGroup>

From b6144965700feccab69d9ac4161161639549fbf5 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 8 Sep 2021 12:52:24 +0700
Subject: [PATCH 03/21] add PlusJakatarSans bold

---
 docs/pages/_document.js                          |   7 +++++++
 .../fonts/PlusJakartaSans-Bold-subset.woff2      | Bin 0 -> 6764 bytes
 docs/src/modules/brandingTheme.ts                |   1 +
 docs/src/modules/components/MarkdownElement.js   |  10 +++++-----
 4 files changed, 13 insertions(+), 5 deletions(-)
 create mode 100644 docs/public/static/fonts/PlusJakartaSans-Bold-subset.woff2

diff --git a/docs/pages/_document.js b/docs/pages/_document.js
index d99affce662509..323786874a2b5c 100644
--- a/docs/pages/_document.js
+++ b/docs/pages/_document.js
@@ -100,6 +100,13 @@ export default class MyDocument extends Document {
               __html: `@font-face{font-family:'PlusJakartaSans-ExtraBold';font-style:normal;font-weight:800;font-display:swap;src:url('/static/fonts/PlusJakartaSans-ExtraBold-subset.woff2') format('woff2');}`,
             }}
           />
+          <style
+            // the above <link> does not work in mobile device, this inline <style> fixes it without blocking resources
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{
+              __html: `@font-face{font-family:'PlusJakartaSans-Bold';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/PlusJakartaSans-Bold-subset.woff2') format('woff2');}`,
+            }}
+          />
         </Head>
         <body>
           <Main />
diff --git a/docs/public/static/fonts/PlusJakartaSans-Bold-subset.woff2 b/docs/public/static/fonts/PlusJakartaSans-Bold-subset.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..d7d8eb0f67e6e90335b2688305cd747d382c2941
GIT binary patch
literal 6764
zcmV-y8k6OBPew8T0RR9102*un4*&oF06H)L02&Vf0RR9100000000000000000000
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
OkHru<>@dTPFw!V9v;ukn

literal 0
HcmV?d00001

diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts
index 57e162794348d7..825ebb08357d8a 100644
--- a/docs/src/modules/brandingTheme.ts
+++ b/docs/src/modules/brandingTheme.ts
@@ -214,6 +214,7 @@ export const getDesignTokens = (mode: 'light' | 'dark') =>
       fontFamily: ['"IBM Plex Sans"', ...systemFont].join(','),
       fontFamilyCode: ['"IBM Plex Mono"', ...systemFont].join(','),
       fontFamilyTagline: ['"PlusJakartaSans-ExtraBold"', ...systemFont].join(','),
+      fontFamilySystem: systemFont.join(','),
       fontWeightExtraBold: 800,
       h1: {
         fontFamily: ['"PlusJakartaSans-ExtraBold"', ...systemFont].join(','),
diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index 72e7def25b285f..dc64477fabbd5f 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -61,7 +61,7 @@ const Root = styled('div')(({ theme }) => ({
   '& h1': {
     ...theme.typography.h3,
     fontSize: theme.typography.pxToRem(40),
-    fontFamily: ['"PlusJakartaSans-ExtraBold"'].join(','),
+    fontFamily: `"PlusJakartaSans-ExtraBold", ${theme.typography.fontFamilySystem}`,
     margin: '16px 0',
     color: theme.palette.mode === 'dark' ? theme.palette.grey[50] : blueDark[900],
     fontWeight: 800,
@@ -74,16 +74,16 @@ const Root = styled('div')(({ theme }) => ({
   '& h2': {
     ...theme.typography.h5,
     fontSize: theme.typography.pxToRem(30),
-    fontFamily: ['"PlusJakartaSans-ExtraBold"'].join(','),
+    fontFamily: `"PlusJakartaSans-Bold", ${theme.typography.fontFamilySystem}`,
+    fontWeight: 700,
     margin: '40px 0 10px',
-    fontWeight: 600,
     color: theme.palette.mode === 'dark' ? theme.palette.grey[100] : blueDark[700],
   },
   '& h3': {
     ...theme.typography.h6,
     margin: '20px 0 10px',
-    fontFamily: ['"PlusJakartaSans-ExtraBold"'].join(','),
-    fontWeight: 500,
+    fontFamily: `"PlusJakartaSans-Bold", ${theme.typography.fontFamilySystem}`,
+    fontWeight: 700,
     color: theme.palette.mode === 'dark' ? theme.palette.grey[100] : theme.palette.grey[900],
   },
   '& h4': {

From 70a58a9e1946c5b6ebb56811322b972806331772 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 8 Sep 2021 12:52:48 +0700
Subject: [PATCH 04/21] run prettier

---
 docs/src/modules/components/AppNavDrawerItem.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
index aeee3fa4fc075c..dc731f0c9f2f28 100644
--- a/docs/src/modules/components/AppNavDrawerItem.js
+++ b/docs/src/modules/components/AppNavDrawerItem.js
@@ -89,7 +89,7 @@ const ItemLink = styled(Item, {
         ),
       },
     },
-    paddingLeft: 38 + (depth - 2)*10,
+    paddingLeft: 38 + (depth - 2) * 10,
   };
 });
 

From 3df0a43bbc8179a3d076dbf7e4f67f632e568bb3 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 8 Sep 2021 13:39:30 +0700
Subject: [PATCH 05/21] fix DrawerSettings background

---
 docs/src/modules/components/AppSettingsDrawer.js | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/docs/src/modules/components/AppSettingsDrawer.js b/docs/src/modules/components/AppSettingsDrawer.js
index ef123c736ada1a..38213c922ccad2 100644
--- a/docs/src/modules/components/AppSettingsDrawer.js
+++ b/docs/src/modules/components/AppSettingsDrawer.js
@@ -21,12 +21,6 @@ import { useTranslate } from 'docs/src/modules/utils/i18n';
 import { useChangeTheme } from 'docs/src/modules/components/ThemeContext';
 import { getCookie } from 'docs/src/modules/utils/helpers';
 
-const DrawerPaper = styled(Paper)({
-  width: 360,
-  borderTopRightRadius: 0,
-  borderBottomRightRadius: 0,
-});
-
 const Heading = styled(Typography)({
   margin: '20px 0 10px',
 });
@@ -78,7 +72,7 @@ function AppSettingsDrawer(props) {
       anchor="right"
       onClose={onClose}
       open={open}
-      PaperProps={{ component: DrawerPaper }}
+      PaperProps={{ elevation: 0, sx: { width: 360 } }}
       {...other}
     >
       <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', p: 2 }}>

From b9f1caac2121e5e89651f1088c7ab31f24307afb Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 8 Sep 2021 13:41:25 +0700
Subject: [PATCH 06/21] update drawer settings Pascal case

---
 docs/translations/translations.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/translations/translations.json b/docs/translations/translations.json
index 8fa2e497e6cf84..f81068a88d2226 100644
--- a/docs/translations/translations.json
+++ b/docs/translations/translations.json
@@ -113,15 +113,15 @@
   "seeMore": "See more",
   "settings": {
     "color": "Color",
-    "dark": "dark",
+    "dark": "Dark",
     "direction": "Direction",
     "editWebsiteColors": "Edit website colors",
-    "light": "light",
+    "light": "Light",
     "ltr": "Left to right",
     "mode": "Mode",
     "rtl": "Right to left",
     "settings": "Settings",
-    "system": "system"
+    "system": "System"
   },
   "showFullSource": "Show the full source",
   "showJSSource": "Show JavaScript source",

From 1148eb1b97d580c90c69113107ed1d1be0eed71b Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 8 Sep 2021 13:49:20 +0700
Subject: [PATCH 07/21] remove unused component

---
 docs/src/modules/components/AppSettingsDrawer.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/src/modules/components/AppSettingsDrawer.js b/docs/src/modules/components/AppSettingsDrawer.js
index 38213c922ccad2..1491103d412c8d 100644
--- a/docs/src/modules/components/AppSettingsDrawer.js
+++ b/docs/src/modules/components/AppSettingsDrawer.js
@@ -4,7 +4,6 @@ import { styled, useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import Drawer from '@mui/material/Drawer';
 import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import Divider from '@mui/material/Divider';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';

From cf8922cb0b21b6990762fc12cf2341b9ce6b5517 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 9 Sep 2021 09:06:11 +0700
Subject: [PATCH 08/21] remove absolute from edit page

---
 docs/src/modules/components/AppLayoutDocs.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/src/modules/components/AppLayoutDocs.js b/docs/src/modules/components/AppLayoutDocs.js
index 1c6c870ffb6985..243d681fc527c9 100644
--- a/docs/src/modules/components/AppLayoutDocs.js
+++ b/docs/src/modules/components/AppLayoutDocs.js
@@ -60,14 +60,14 @@ const StyledAppContainer = styled(AppContainer, {
   };
 });
 
-const ActionsDiv = styled('div')({
-  position: 'absolute',
-  right: 20,
-  top: 120,
+const ActionsDiv = styled('div')(({ theme }) => ({
   display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'flex-end',
-});
+  marginTop: -10,
+  marginBottom: -15,
+  [theme.breakpoints.up('lg')]: {
+    justifyContent: 'flex-end',
+  },
+}));
 
 function AppLayoutDocs(props) {
   const {

From 3e0b4237b31c749f168cc6dbf596f9413e3e22ee Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 9 Sep 2021 09:27:42 +0700
Subject: [PATCH 09/21] fix drawer item styles

---
 docs/src/modules/components/AppNavDrawerItem.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
index dc731f0c9f2f28..409fe2a643bedf 100644
--- a/docs/src/modules/components/AppNavDrawerItem.js
+++ b/docs/src/modules/components/AppNavDrawerItem.js
@@ -89,7 +89,7 @@ const ItemLink = styled(Item, {
         ),
       },
     },
-    paddingLeft: 38 + (depth - 2) * 10,
+    paddingLeft: 36 + (depth - 2) * 10,
   };
 });
 
@@ -117,13 +117,13 @@ const ItemButton = styled(Item, {
       }
       return theme.palette.text.primary;
     })(),
-    fontSize: depth === 1 ? '0.75rem' : undefined,
-    fontWeight: depth === 0 ? 500 : 700,
+    fontSize: depth === 1 ? '0.75rem' : '0.8125rem',
+    fontWeight: depth === 1 ? 700 : 500,
     margin: theme.spacing(0.5, 0),
     '&:hover': {
       backgroundColor: depth === 0 ? '' : alpha(theme.palette.primary.main, 0),
       color: (() => {
-        if (depth === 0) {
+        if (depth !== 1) {
           return '';
         }
         if (theme.palette.mode === 'dark') {
@@ -145,7 +145,7 @@ const ItemButton = styled(Item, {
           },
         }
       : {
-          paddingLeft: 38,
+          paddingLeft: 36,
         }),
   };
 });

From d19b2f885a168340523e226ccbd22a4136865539 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 9 Sep 2021 09:50:22 +0700
Subject: [PATCH 10/21] fix ads styles and remove jss

---
 docs/src/modules/components/Ad.js            | 59 ++++++++------------
 docs/src/modules/components/AppLayoutDocs.js |  2 +-
 2 files changed, 24 insertions(+), 37 deletions(-)

diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js
index f8d47f74e95589..962baf31922d8c 100644
--- a/docs/src/modules/components/Ad.js
+++ b/docs/src/modules/components/Ad.js
@@ -1,7 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@mui/styles';
-import { createTheme } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
@@ -10,33 +8,16 @@ import AdInHouse from 'docs/src/modules/components/AdInHouse';
 import { AdContext, adShape } from 'docs/src/modules/components/AdManager';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
 
-const styles = (theme) => ({
-  'placement-body-image': {
-    margin: theme.spacing(4, 1, 3),
-    minHeight: 126,
-  },
-  'placement-body-inline': {
-    margin: theme.spacing(4, 0, 3),
-    minHeight: 126,
-    display: 'flex',
-    alignItems: 'flex-end',
-  },
-  'placement-body-inline2': {
-    margin: theme.spacing(4, 0, 3),
-    minHeight: 126,
-    display: 'flex',
-    alignItems: 'flex-end',
-  },
-  paper: {
-    border: `2px solid ${theme.palette.primary.main}`,
-  },
-});
-
 function PleaseDisableAdblock(props) {
   const t = useTranslate();
 
   return (
-    <Paper component="span" elevation={0} sx={{ display: 'block', p: 1.5 }} {...props}>
+    <Paper
+      component="span"
+      elevation={0}
+      sx={{ display: 'block', p: 1.5, border: '2px solid', borderColor: 'primary.main' }}
+      {...props}
+    >
       <Typography variant="body2" display="block" component="span" gutterBottom>
         {t('likeMui')}
       </Typography>
@@ -133,9 +114,7 @@ class AdErrorBoundary extends React.Component {
   }
 }
 
-function Ad(props) {
-  const { classes } = props;
-
+function Ad() {
   const [adblock, setAdblock] = React.useState(null);
   const [carbonOut, setCarbonOut] = React.useState(null);
 
@@ -149,7 +128,7 @@ function Ad(props) {
     children = <span />;
   } else if (adblock) {
     if (randomAdblock < 0.2) {
-      children = <PleaseDisableAdblock className={classes.paper} />;
+      children = <PleaseDisableAdblock />;
       label = 'in-house-adblock';
     } else {
       children = <AdInHouse ad={inHouseAds[Math.floor(inHouseAds.length * randomInHouse)]} />;
@@ -238,8 +217,21 @@ function Ad(props) {
       sx={{
         position: 'relative',
         display: 'block',
+        m: (theme) => theme.spacing(4, 0, 3),
+        ...(adShape === 'image' && {
+          minHeight: 126,
+        }),
+        ...(adShape === 'inline' && {
+          minHeight: 126,
+          display: 'flex',
+          alignItems: 'flex-end',
+        }),
+        ...(adShape === 'inline2' && {
+          minHeight: 126,
+          display: 'flex',
+          alignItems: 'flex-end',
+        }),
       }}
-      className={classes[`placement-body-${adShape}`]}
       data-ga-event-category="ad"
       data-ga-event-action="click"
       data-ga-event-label={eventLabel}
@@ -249,9 +241,4 @@ function Ad(props) {
   );
 }
 
-Ad.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-const defaultTheme = createTheme();
-export default React.memo(withStyles(styles, { defaultTheme })(Ad));
+export default Ad;
diff --git a/docs/src/modules/components/AppLayoutDocs.js b/docs/src/modules/components/AppLayoutDocs.js
index 243d681fc527c9..733a3561fe3adf 100644
--- a/docs/src/modules/components/AppLayoutDocs.js
+++ b/docs/src/modules/components/AppLayoutDocs.js
@@ -90,7 +90,7 @@ function AppLayoutDocs(props) {
         <Head title={`${title} - Material-UI`} description={description} />
         {disableAd ? null : (
           <AdGuest>
-            <Ad placement="body" />
+            <Ad />
           </AdGuest>
         )}
         <Main disableToc={disableToc}>

From 4bfd7f577a1f03b25bf6c5a6466f9e76f9e0bec2 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 9 Sep 2021 09:57:12 +0700
Subject: [PATCH 11/21] reduce h2 code fontsize

---
 docs/src/modules/components/MarkdownElement.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index dc64477fabbd5f..ce5e82edf55c93 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -139,6 +139,9 @@ const Root = styled('div')(({ theme }) => ({
       },
     },
   },
+  '& h2 code': {
+    fontSize: '1.5rem',
+  },
   '& table': {
     // Trade display table for scroll overflow
     display: 'block',

From d3d3d795e12d7ded29485943461a5cdda04014ab Mon Sep 17 00:00:00 2001
From: danilo leal <daniloleal09@gmail.com>
Date: Thu, 9 Sep 2021 16:31:17 -0300
Subject: [PATCH 12/21] use pixel to rem utility

---
 docs/src/modules/components/AppNavDrawer.js       | 2 +-
 docs/src/modules/components/AppNavDrawerItem.js   | 6 +++---
 docs/src/modules/components/AppTableOfContents.js | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js
index d7a9cbe0e62446..b9da5946f49441 100644
--- a/docs/src/modules/components/AppNavDrawer.js
+++ b/docs/src/modules/components/AppNavDrawer.js
@@ -164,7 +164,7 @@ function AppNavDrawer(props) {
 
     return (
       <React.Fragment>
-        <ToolbarIE11>
+        <ToolbarIE11> 
           <ToolbarDiv>
             <NextLink href="/" passHref onClick={onClose}>
               <Box component="a" aria-label={t('goToHome')} sx={{ lineHeight: 0, mr: 2 }}>
diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
index 409fe2a643bedf..62e9383b015d5d 100644
--- a/docs/src/modules/components/AppNavDrawerItem.js
+++ b/docs/src/modules/components/AppNavDrawerItem.js
@@ -64,7 +64,7 @@ const ItemLink = styled(Item, {
 })(({ theme, depth }) => {
   return {
     color: theme.palette.text.secondary,
-    fontSize: '0.8125rem',
+    fontSize: theme.typography.pxToRem(13.5),
     '&.app-drawer-active': {
       // color: theme.palette.primary.main,
       color:
@@ -117,7 +117,7 @@ const ItemButton = styled(Item, {
       }
       return theme.palette.text.primary;
     })(),
-    fontSize: depth === 1 ? '0.75rem' : '0.8125rem',
+    fontSize: depth === 1 ? theme.typography.pxToRem(12) : theme.typography.pxToRem(14.5),
     fontWeight: depth === 1 ? 700 : 500,
     margin: theme.spacing(0.5, 0),
     '&:hover': {
@@ -153,7 +153,7 @@ const ItemButton = styled(Item, {
 const StyledLi = styled('li', { shouldForwardProp: (prop) => prop !== 'depth' })(
   ({ theme, depth }) => {
     return {
-      padding: depth === 0 ? '0 10px' : '2px 0',
+      padding: depth === 0 ? '0 10px' : '4px 0',
       marginTop: depth === 0 ? theme.spacing(1) : undefined,
       display: 'block',
     };
diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js
index 589bd5f64b7059..d46e2109d4a9c9 100644
--- a/docs/src/modules/components/AppTableOfContents.js
+++ b/docs/src/modules/components/AppTableOfContents.js
@@ -30,7 +30,7 @@ const NavLabel = styled(Typography)(({ theme }) => {
   return {
     marginTop: theme.spacing(2),
     paddingLeft: theme.spacing(1.5),
-    fontSize: '.75rem',
+    fontSize: theme.typography.pxToRem(12),
     fontWeight: 600,
     color:
       theme.palette.mode === 'dark' ? alpha(theme.palette.grey[500], 0.5) : theme.palette.grey[500],
@@ -54,7 +54,7 @@ const NavItem = styled(Link, {
   };
 
   return {
-    fontSize: '.8125rem',
+    fontSize: theme.typography.pxToRem(13),
     padding: theme.spacing(0, 1, 0, secondary ? 3 : '10px'),
     margin: theme.spacing(0.5, 0, 1, 0),
     borderLeft: `2px solid transparent`,

From db814cdc71f49c48ff447ce183031862ff9b8811 Mon Sep 17 00:00:00 2001
From: danilo leal <daniloleal09@gmail.com>
Date: Thu, 9 Sep 2021 17:29:13 -0300
Subject: [PATCH 13/21] minor adjustment on the nav drawer items order

---
 .../modules/components/AppNavDrawerItem.js    |  6 ++---
 docs/src/pages.ts                             | 23 ++++++++++---------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
index 62e9383b015d5d..7189526ad622eb 100644
--- a/docs/src/modules/components/AppNavDrawerItem.js
+++ b/docs/src/modules/components/AppNavDrawerItem.js
@@ -63,8 +63,8 @@ const ItemLink = styled(Item, {
   shouldForwardProp: (prop) => prop !== 'depth',
 })(({ theme, depth }) => {
   return {
-    color: theme.palette.text.secondary,
     fontSize: theme.typography.pxToRem(13.5),
+    color: theme.palette.text.secondary,
     '&.app-drawer-active': {
       // color: theme.palette.primary.main,
       color:
@@ -194,7 +194,7 @@ export default function AppNavDrawerItem(props) {
           depth={depth}
           {...linkProps}
         >
-          {title}
+          {title}          
         </ItemLink>
       </StyledLi>
     );
@@ -213,7 +213,7 @@ export default function AppNavDrawerItem(props) {
           {hasIcon && (
             <Box
               sx={{
-                '& svg': { fontSize: '0.875rem' },
+                '& svg': { fontSize: (theme) => theme.typography.pxToRem(14) },
                 display: 'flex',
                 alignItems: 'center',
                 height: '100%',
diff --git a/docs/src/pages.ts b/docs/src/pages.ts
index 52255f0c5bacfb..00aa6034bb48c4 100644
--- a/docs/src/pages.ts
+++ b/docs/src/pages.ts
@@ -309,15 +309,6 @@ const pages: readonly MuiPage[] = [
       { pathname: '/styles/api', title: 'API' },
     ],
   },
-  {
-    pathname: 'https://material-ui.com/store/',
-    title: 'Premium themes',
-    linkProps: {
-      'data-ga-event-category': 'store',
-      'data-ga-event-action': 'click',
-      'data-ga-event-label': 'sidenav',
-    },
-  },
   {
     pathname: '/discover-more',
     icon: 'AddIcon',
@@ -329,12 +320,22 @@ const pages: readonly MuiPage[] = [
       { pathname: '/discover-more/vision' },
       { pathname: '/discover-more/team' },
       { pathname: '/discover-more/changelog' },
-      { pathname: '/discover-more/languages' },
+      { pathname: '/discover-more/languages' }
     ],
   },
+  {
+    pathname: 'https://material-ui.com/store/',
+    title: 'Templates',
+    icon: 'ReaderIcon',
+    linkProps: {
+      'data-ga-event-category': 'store',
+      'data-ga-event-action': 'click',
+      'data-ga-event-label': 'sidenav',
+    },
+  },
   { pathname: '/versions', ordered: false },
   { pathname: '/', ordered: false, disableDrawer: true },
-  { pathname: 'https://medium.com/material-ui', title: 'Blog' },
+  { pathname: 'https://medium.com/material-ui', title: 'Blog', icon: 'BookIcon', },
 ];
 
 export default pages;

From 56d9fae326a55efd30eb6a7306df7616ffd1372f Mon Sep 17 00:00:00 2001
From: danilo leal <daniloleal09@gmail.com>
Date: Thu, 9 Sep 2021 17:34:41 -0300
Subject: [PATCH 14/21] small color tweak

---
 docs/src/modules/components/DemoToolbar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/modules/components/DemoToolbar.js b/docs/src/modules/components/DemoToolbar.js
index 0f3190c2f2d286..00278faffdaa4f 100644
--- a/docs/src/modules/components/DemoToolbar.js
+++ b/docs/src/modules/components/DemoToolbar.js
@@ -59,7 +59,7 @@ const Root = styled('div')(({ theme }) => ({
   alignItems: 'center',
   '& .MuiSvgIcon-root': {
     fontSize: 17,
-    color: theme.palette.mode === 'dark' ? theme.palette.grey[500] : theme.palette.grey[800],
+    color: theme.palette.mode === 'dark' ? theme.palette.grey[400] : theme.palette.grey[800],
   },
 }));
 

From e1f03a2b5eaeb4459ff8032aaa6fd25f16ed479e Mon Sep 17 00:00:00 2001
From: danilo leal <daniloleal09@gmail.com>
Date: Thu, 9 Sep 2021 17:37:20 -0300
Subject: [PATCH 15/21] use px to rem utility

---
 docs/src/modules/components/DiamondSponsors.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/modules/components/DiamondSponsors.js b/docs/src/modules/components/DiamondSponsors.js
index a23f345914d7d9..7f11b2aa546298 100644
--- a/docs/src/modules/components/DiamondSponsors.js
+++ b/docs/src/modules/components/DiamondSponsors.js
@@ -16,7 +16,7 @@ const Root = styled('div')(({ theme }) => ({
 const Placeholder = styled('a')(({ theme }) => ({
   width: '100%',
   height: 55,
-  fontSize: '14px',
+  fontSize: theme.typography.pxToRem(14),
   fontWeight: 600,
   alignItems: 'center',
   justifyContent: 'center',

From 20589fa5153f78ed2e8af49f3f321fc59a001b61 Mon Sep 17 00:00:00 2001
From: danilo leal <daniloleal09@gmail.com>
Date: Thu, 9 Sep 2021 17:40:59 -0300
Subject: [PATCH 16/21] more use of px to rem utility

---
 docs/src/modules/components/MarkdownElement.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index ce5e82edf55c93..20df915b288709 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -40,7 +40,7 @@ const Root = styled('div')(({ theme }) => ({
     padding: '0 5px',
     color: theme.palette.text.primary,
     backgroundColor: alpha(theme.palette.primary.light, 0.15),
-    fontSize: '.8125em',
+    fontSize: theme.typography.pxToRem(13),
     borderRadius: 5,
   },
   '& code[class*="language-"]': {
@@ -51,7 +51,7 @@ const Root = styled('div')(({ theme }) => ({
   },
   // code blocks
   '& pre code': {
-    fontSize: '.8125em',
+    fontSize: theme.typography.pxToRem(13),
     fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace',
     fontWeight: 500,
   },
@@ -140,7 +140,7 @@ const Root = styled('div')(({ theme }) => ({
     },
   },
   '& h2 code': {
-    fontSize: '1.5rem',
+    fontSize: theme.typography.pxToRem(24),
   },
   '& table': {
     // Trade display table for scroll overflow

From 39e4ab298a8323ce579acab67cb9f5e2020b3e1d Mon Sep 17 00:00:00 2001
From: danilo leal <daniloleal09@gmail.com>
Date: Thu, 9 Sep 2021 17:44:13 -0300
Subject: [PATCH 17/21] prettier

---
 docs/src/modules/components/AppNavDrawer.js     | 2 +-
 docs/src/modules/components/AppNavDrawerItem.js | 2 +-
 docs/src/pages.ts                               | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js
index b9da5946f49441..d7a9cbe0e62446 100644
--- a/docs/src/modules/components/AppNavDrawer.js
+++ b/docs/src/modules/components/AppNavDrawer.js
@@ -164,7 +164,7 @@ function AppNavDrawer(props) {
 
     return (
       <React.Fragment>
-        <ToolbarIE11> 
+        <ToolbarIE11>
           <ToolbarDiv>
             <NextLink href="/" passHref onClick={onClose}>
               <Box component="a" aria-label={t('goToHome')} sx={{ lineHeight: 0, mr: 2 }}>
diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
index 7189526ad622eb..3229eed0bfa0c1 100644
--- a/docs/src/modules/components/AppNavDrawerItem.js
+++ b/docs/src/modules/components/AppNavDrawerItem.js
@@ -194,7 +194,7 @@ export default function AppNavDrawerItem(props) {
           depth={depth}
           {...linkProps}
         >
-          {title}          
+          {title}
         </ItemLink>
       </StyledLi>
     );
diff --git a/docs/src/pages.ts b/docs/src/pages.ts
index 00aa6034bb48c4..2745400a60528f 100644
--- a/docs/src/pages.ts
+++ b/docs/src/pages.ts
@@ -320,7 +320,7 @@ const pages: readonly MuiPage[] = [
       { pathname: '/discover-more/vision' },
       { pathname: '/discover-more/team' },
       { pathname: '/discover-more/changelog' },
-      { pathname: '/discover-more/languages' }
+      { pathname: '/discover-more/languages' },
     ],
   },
   {
@@ -335,7 +335,7 @@ const pages: readonly MuiPage[] = [
   },
   { pathname: '/versions', ordered: false },
   { pathname: '/', ordered: false, disableDrawer: true },
-  { pathname: 'https://medium.com/material-ui', title: 'Blog', icon: 'BookIcon', },
+  { pathname: 'https://medium.com/material-ui', title: 'Blog', icon: 'BookIcon' },
 ];
 
 export default pages;

From 613df2721a843ff650cfe6c96126302967fbdeb7 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Fri, 10 Sep 2021 14:07:49 +0700
Subject: [PATCH 18/21] add icons to nav drawer

---
 .../modules/components/AppNavDrawerItem.js    | 80 ++++++++++---------
 .../src/modules/components/MarkdownElement.js |  2 +-
 2 files changed, 45 insertions(+), 37 deletions(-)

diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
index 3229eed0bfa0c1..ee0883ddde569e 100644
--- a/docs/src/modules/components/AppNavDrawerItem.js
+++ b/docs/src/modules/components/AppNavDrawerItem.js
@@ -15,6 +15,8 @@ import CreateOutlinedIcon from '@mui/icons-material/CreateOutlined';
 import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
 import ColorLensOutlinedIcon from '@mui/icons-material/ColorLensOutlined';
 import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
+import BookOutlined from '@mui/icons-material/BookOutlined';
+import ChromeReaderModeOutlined from '@mui/icons-material/ChromeReaderModeOutlined';
 
 const iconsMap = {
   DescriptionIcon: ArticleOutlinedIcon,
@@ -25,6 +27,8 @@ const iconsMap = {
   VisibilityIcon: VisibilityOutlinedIcon,
   StyleIcon: ColorLensOutlinedIcon,
   AddIcon: AddCircleOutlineOutlinedIcon,
+  BookIcon: BookOutlined,
+  ReaderIcon: ChromeReaderModeOutlined,
 };
 
 const Item = styled(({ component: Component = 'div', ...props }) => <Component {...props} />, {
@@ -60,8 +64,8 @@ const Item = styled(({ component: Component = 'div', ...props }) => <Component {
 }));
 
 const ItemLink = styled(Item, {
-  shouldForwardProp: (prop) => prop !== 'depth',
-})(({ theme, depth }) => {
+  shouldForwardProp: (prop) => prop !== 'depth' && prop !== 'hasIcon',
+})(({ theme, hasIcon }) => {
   return {
     fontSize: theme.typography.pxToRem(13.5),
     color: theme.palette.text.secondary,
@@ -89,7 +93,10 @@ const ItemLink = styled(Item, {
         ),
       },
     },
-    paddingLeft: 36 + (depth - 2) * 10,
+    paddingLeft: 36,
+    ...(hasIcon && {
+      paddingLeft: 2,
+    }),
   };
 });
 
@@ -105,8 +112,8 @@ const ItemButtonIcon = styled(KeyboardArrowRightRoundedIcon, {
 });
 
 const ItemButton = styled(Item, {
-  shouldForwardProp: (prop) => prop !== 'depth',
-})(({ depth, theme }) => {
+  shouldForwardProp: (prop) => prop !== 'depth' && prop !== 'hasIcon',
+})(({ depth, hasIcon, theme }) => {
   return {
     color: (() => {
       if (depth === 1) {
@@ -136,17 +143,14 @@ const ItemButton = styled(Item, {
     [`&:hover ${ItemButtonIcon}`]: {
       color: theme.palette.text.primary,
     },
-    ...(depth === 0
-      ? {
-          paddingLeft: 2,
-          '& .KeyboardArrowRightRoundedIcon': {
-            marginLeft: 'auto',
-            marginRight: '5px',
-          },
-        }
-      : {
-          paddingLeft: 36,
-        }),
+    paddingLeft: 36,
+    ...(hasIcon && {
+      paddingLeft: 2,
+    }),
+    '& .KeyboardArrowRightRoundedIcon': {
+      marginLeft: 'auto',
+      marginRight: '5px',
+    },
   };
 });
 
@@ -181,6 +185,26 @@ export default function AppNavDrawerItem(props) {
   const hasIcon = icon && iconsMap[icon];
   const IconComponent = hasIcon ? iconsMap[icon] : React.Fragment;
   const iconProps = hasIcon ? { fontSize: 'small', color: 'primary' } : {};
+  const iconElement = hasIcon ? (
+    <Box
+      sx={{
+        '& svg': { fontSize: (theme) => theme.typography.pxToRem(14) },
+        display: 'flex',
+        alignItems: 'center',
+        height: '100%',
+        marginRight: 1.5,
+        py: 0.5,
+        px: 0.5,
+        borderRadius: '5px',
+        backgroundColor: (theme) =>
+          theme.palette.mode === 'dark'
+            ? theme.palette.primaryDark[700]
+            : theme.palette.primary[50],
+      }}
+    >
+      <IconComponent {...iconProps} />
+    </Box>
+  ) : null;
 
   if (href) {
     return (
@@ -192,8 +216,10 @@ export default function AppNavDrawerItem(props) {
           underline="none"
           onClick={onClick}
           depth={depth}
+          hasIcon={hasIcon}
           {...linkProps}
         >
+          {iconElement}
           {title}
         </ItemLink>
       </StyledLi>
@@ -206,30 +232,12 @@ export default function AppNavDrawerItem(props) {
         <ItemButton
           component={ButtonBase}
           depth={depth}
+          hasIcon={hasIcon}
           disableRipple
           className={topLevel && 'algolia-lvl0'}
           onClick={handleClick}
         >
-          {hasIcon && (
-            <Box
-              sx={{
-                '& svg': { fontSize: (theme) => theme.typography.pxToRem(14) },
-                display: 'flex',
-                alignItems: 'center',
-                height: '100%',
-                marginRight: 1.5,
-                py: 0.5,
-                px: 0.5,
-                borderRadius: '5px',
-                backgroundColor: (theme) =>
-                  theme.palette.mode === 'dark'
-                    ? theme.palette.primaryDark[700]
-                    : theme.palette.primary[50],
-              }}
-            >
-              <IconComponent {...iconProps} />
-            </Box>
-          )}
+          {iconElement}
           {title}
           {depth === 0 && <ItemButtonIcon open={open} className="KeyboardArrowRightRoundedIcon" />}
         </ItemButton>
diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index 20df915b288709..a309865dc73985 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -140,7 +140,7 @@ const Root = styled('div')(({ theme }) => ({
     },
   },
   '& h2 code': {
-    fontSize: theme.typography.pxToRem(24),
+    fontWeight: 'bold',
   },
   '& table': {
     // Trade display table for scroll overflow

From c009960fd544ebd888eb0f0359771d639f14ce61 Mon Sep 17 00:00:00 2001
From: danilo leal <daniloleal09@gmail.com>
Date: Fri, 10 Sep 2021 10:27:08 -0300
Subject: [PATCH 19/21] h2 code iteration

---
 docs/src/modules/components/MarkdownElement.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index a309865dc73985..440fc8af4a639e 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -140,7 +140,9 @@ const Root = styled('div')(({ theme }) => ({
     },
   },
   '& h2 code': {
+    fontSize: theme.typography.pxToRem(27),
     fontWeight: 'bold',
+    color: theme.palette.mode === 'dark' ? theme.palette.grey[100] : blueDark[700],
   },
   '& table': {
     // Trade display table for scroll overflow

From f8126da25e4a0b2b5edafd309fd636a20ee88c4a Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Fri, 10 Sep 2021 21:00:13 +0700
Subject: [PATCH 20/21] yarn docs:i18n

---
 docs/translations/translations.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/translations/translations.json b/docs/translations/translations.json
index f81068a88d2226..2cf908610cb9fd 100644
--- a/docs/translations/translations.json
+++ b/docs/translations/translations.json
@@ -321,7 +321,6 @@
     "/styles": "Styles (legacy)",
     "/styles/basics": "Basics",
     "/styles/advanced": "Advanced",
-    "https://material-ui.com/store/": "Premium themes",
     "/discover-more": "Discover More",
     "/discover-more/showcase": "Showcase",
     "/discover-more/related-projects": "Related Projects",
@@ -331,6 +330,7 @@
     "/discover-more/team": "Team",
     "/discover-more/changelog": "Changelog",
     "/discover-more/languages": "Languages",
+    "https://material-ui.com/store/": "Templates",
     "/versions": "Versions",
     "https://medium.com/material-ui": "Blog"
   }

From afbbfad60505a74cf18e30fabc583cb15ef4fc63 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Fri, 10 Sep 2021 22:36:30 +0700
Subject: [PATCH 21/21] minor styling on drawer item

---
 docs/src/modules/components/AppNavDrawerItem.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
index ee0883ddde569e..9d58f905d81bc7 100644
--- a/docs/src/modules/components/AppNavDrawerItem.js
+++ b/docs/src/modules/components/AppNavDrawerItem.js
@@ -65,7 +65,7 @@ const Item = styled(({ component: Component = 'div', ...props }) => <Component {
 
 const ItemLink = styled(Item, {
   shouldForwardProp: (prop) => prop !== 'depth' && prop !== 'hasIcon',
-})(({ theme, hasIcon }) => {
+})(({ theme, hasIcon, depth }) => {
   return {
     fontSize: theme.typography.pxToRem(13.5),
     color: theme.palette.text.secondary,
@@ -93,7 +93,7 @@ const ItemLink = styled(Item, {
         ),
       },
     },
-    paddingLeft: 36,
+    paddingLeft: 36 + (depth > 2 ? (depth - 2) * 10 : 0),
     ...(hasIcon && {
       paddingLeft: 2,
     }),
@@ -116,7 +116,7 @@ const ItemButton = styled(Item, {
 })(({ depth, hasIcon, theme }) => {
   return {
     color: (() => {
-      if (depth === 1) {
+      if (depth >= 1) {
         if (theme.palette.mode === 'dark') {
           return alpha(theme.palette.grey[500], 0.5);
         }
@@ -130,7 +130,7 @@ const ItemButton = styled(Item, {
     '&:hover': {
       backgroundColor: depth === 0 ? '' : alpha(theme.palette.primary.main, 0),
       color: (() => {
-        if (depth !== 1) {
+        if (depth === 0) {
           return '';
         }
         if (theme.palette.mode === 'dark') {