[website] Make general improvements to the Material UI page

docs/src/components/action/Highlighter.tsx

@@ -45,7 +45,6 @@ export default function Highlighter({
           transitionProperty: 'all',
           transitionDuration: '100ms',
           color: 'primary.300',
-          overflow: 'auto',
           ...((!disableBorder || selected) && {
             borderColor: 'grey.100',
           }),
@@ -59,27 +58,33 @@ export default function Highlighter({
             color: 'primary.500',
           }),
           ...(!selected && {
-            '&:hover, &:focus': {
+            '&:hover': {
               bgcolor: 'primary.50',
               borderColor: 'primary.100',
               '@media (hover: none)': {
                 bgcolor: 'transparent',
               },
             },
+            '&:focus': {
+              bgcolor: 'transparent',
+            },
           }),
           ...theme.applyDarkStyles({
             color: 'primary.800',
             ...((!disableBorder || selected) && {
               borderColor: alpha(theme.palette.primaryDark[600], 0.3),
             }),
             ...(!selected && {
-              '&:hover, &:focus': {
+              '&:hover': {
                 bgcolor: alpha(theme.palette.primary[900], 0.1),
                 borderColor: alpha(theme.palette.primary[800], 0.4),
                 '@media (hover: none)': {
                   bgcolor: 'transparent',
                 },
               },
+              '&:focus': {
+                bgcolor: 'transparent',
+              },
             }),
             ...(selected && {
               bgcolor: alpha(theme.palette.primary[800], 0.2),

docs/src/components/action/Item.tsx

@@ -72,27 +72,30 @@ export function Group({
 }
 
 export default function Item({
+  description,
   icon,
   title,
-  description,
+  smallerIconDistance = false,
   ...props
 }: {
+  description?: string;
   icon: React.ReactNode;
   title: string;
-  description?: string;
+  smallerIconDistance?: boolean;
 } & BoxProps) {
   return (
     <Box
       {...props}
       component="span"
       sx={{
         p: 2,
+        pr: smallerIconDistance ? 3 : 2,
         display: 'flex',
         alignItems: 'center',
         ...props.sx,
       }}
     >
-      <Box component="span" sx={{ mr: 2, lineHeight: 0 }}>
+      <Box component="span" sx={{ mr: smallerIconDistance ? 1 : 2, lineHeight: 0 }}>
         {icon}
       </Box>
       <Box sx={{ flexWrap: 'wrap' }}>

docs/src/components/action/StylingInfo.tsx

@@ -37,8 +37,7 @@ export default function StylingInfo({
         transition: '0.3s',
         left: 0,
         right: 0,
-        px: 2,
-        pt: 1,
+        p: 2,
         background: ({ palette }) => alpha(palette.common.black, 0.5),
         backdropFilter: 'blur(8px)',
         zIndex: 1,

docs/src/components/home/CoreShowcase.tsx

@@ -190,7 +190,7 @@ export default function CoreShowcase() {
                 code={componentCode}
                 language="jsx"
               />
-              <StylingInfo appeared={customized} sx={{ mb: 0, mx: -2 }} />
+              <StylingInfo appeared={customized} sx={{ mx: -2 }} />
             </Box>
           </Box>
         </div>

docs/src/components/home/MaterialDesignComponents.tsx

@@ -453,19 +453,19 @@ export function buildTheme(): ThemeOptions {
       MuiTableHead: {
         styleOverrides: {
           root: ({ theme }) => ({
-            padding: 10,
+            padding: 8,
             backgroundColor: alpha(theme.palette.grey[50], 0.5),
             borderColor: (theme.vars || theme).palette.divider,
             ...theme.applyDarkStyles({
-              backgroundColor: alpha(theme.palette.primaryDark[600], 0.5),
+              backgroundColor: alpha(theme.palette.primaryDark[700], 0.5),
             }),
           }),
         },
       },
       MuiTableCell: {
         styleOverrides: {
           root: ({ theme }) => ({
-            padding: 10,
+            padding: 8,
             borderColor: (theme.vars || theme).palette.divider,
           }),
         },

docs/src/components/productMaterial/MaterialComponents.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { Experimental_CssVarsProvider as CssVarsProvider, styled } from '@mui/material/styles';
+import { Experimental_CssVarsProvider as CssVarsProvider, alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Alert from '@mui/material/Alert';
-import Button from '@mui/material/Button';
+import Button, { buttonClasses } from '@mui/material/Button';
 import Grid from '@mui/material/Grid';
 import Stack from '@mui/material/Stack';
 import Paper from '@mui/material/Paper';
@@ -36,29 +36,6 @@ import ROUTES from 'docs/src/route';
 
 const DEMOS = ['Button', 'Text field', 'Table', 'Alert', 'Tooltip'] as const;
 
-const StyledButton = styled(Button)(({ theme }) => ({
-  borderRadius: 40,
-  padding: theme.spacing('2px', 1),
-  fontSize: theme.typography.pxToRem(12),
-  lineHeight: 18 / 12,
-  '&.MuiButton-text': {
-    color: theme.palette.grey[500],
-    border: '1px solid',
-    borderColor: theme.palette.primaryDark[700],
-    '&:hover': {
-      backgroundColor: theme.palette.primaryDark[700],
-    },
-  },
-  '&.MuiButton-outlined': {
-    color: '#fff',
-    backgroundColor: theme.palette.primary[800],
-    borderColor: theme.palette.primary[700],
-    '&:hover': {
-      backgroundColor: theme.palette.primary[700],
-    },
-  },
-}));
-
 const CODES = {
   Button: `
   <Button variant="text" startIcon={<ShoppingCartRounded />}>
@@ -151,7 +128,7 @@ export default function MaterialComponents() {
             }
             description="A meticulous implementation of Material Design; every Material UI component meets the highest standards of form and function."
           />
-          <Group desktopColumns={2} sx={{ mt: 4, pb: { xs: 0, md: 2 } }}>
+          <Group desktopColumns={2} sx={{ m: -2, p: 2 }}>
             {DEMOS.map((name) => (
               <Highlighter key={name} selected={name === demo} onClick={() => setDemo(name)}>
                 <Item icon={React.cloneElement(icons[name])} title={name} />
@@ -210,7 +187,7 @@ export default function MaterialComponents() {
                     sx={{
                       mx: 'auto',
                       my: 4,
-                      maxWidth: 320,
+                      maxWidth: '90%',
                       '& .MuiTableBody-root > .MuiTableRow-root:last-of-type > .MuiTableCell-root':
                         {
                           borderBottomWidth: 0,
@@ -310,14 +287,15 @@ export default function MaterialComponents() {
             <Frame.Info
               data-mui-color-scheme="dark"
               sx={{
-                minHeight: 180,
+                minHeight: 220,
                 maxHeight: demo === 'Table' ? 260 : 'none',
                 position: 'relative',
                 overflow: 'hidden',
                 p: 0,
                 pt: 5,
               }}
             >
+              <StylingInfo appeared={customized} />
               <Box
                 sx={{
                   overflow: 'auto',
@@ -339,37 +317,47 @@ export default function MaterialComponents() {
                   pb: 3,
                   display: 'flex',
                   alignItems: 'center',
+                  gap: 1,
                   position: 'absolute',
-                  top: 12,
-                  left: 16,
+                  top: 16,
+                  left: 12,
                   right: 0,
                   zIndex: 10,
                   background: `linear-gradient(to bottom, ${
                     (theme.vars || theme).palette.common.black
                   } 30%, transparent)`,
+                  [`& .${buttonClasses.root}`]: {
+                    borderRadius: 40,
+                    padding: '2px 10px',
+                    fontSize: '0.75rem',
+                    lineHeight: 18 / 12,
+                  },
+                  '& .MuiButton-outlinedPrimary': {
+                    backgroundColor: alpha(theme.palette.primary[900], 0.5),
+                  },
                 })}
               >
-                <StyledButton
+                <Button
                   size="small"
-                  variant={customized ? 'text' : 'outlined'}
+                  variant="outlined"
+                  color={customized ? 'secondary' : 'primary'}
                   onClick={() => {
                     setCustomized(false);
                   }}
                 >
                   Material Design
-                </StyledButton>
-                <StyledButton
+                </Button>
+                <Button
                   size="small"
-                  variant={customized ? 'outlined' : 'text'}
+                  variant="outlined"
+                  color={customized ? 'primary' : 'secondary'}
                   onClick={() => {
                     setCustomized(true);
                   }}
-                  sx={{ ml: 1 }}
                 >
                   Custom theme
-                </StyledButton>
+                </Button>
               </Box>
-              <StylingInfo appeared={customized} />
             </Frame.Info>
           </Frame>
         </Grid>

docs/src/components/productMaterial/MaterialHero.tsx

@@ -294,7 +294,7 @@ export default function MaterialHero() {
               },
             }}
           >
-            <Stack spacing={4}>
+            <Stack spacing={4} useFlexGap>
               <div>
                 <Accordion
                   elevation={0}
@@ -395,7 +395,11 @@ export default function MaterialHero() {
                 </List>
               </Paper>
             </Stack>
-            <Stack spacing={4} sx={{ ml: 4, '& > .MuiPaper-root': { maxWidth: 'none' } }}>
+            <Stack
+              spacing={4}
+              useFlexGap
+              sx={{ ml: 4, '& > .MuiPaper-root': { maxWidth: 'none' } }}
+            >
               <Box sx={{ display: 'flex', gap: 2, '& button': { textWrap: 'nowrap' } }}>
                 <Button variant="contained" startIcon={<DownloadIcon fontSize="small" />} fullWidth>
                   Install library
@@ -466,8 +470,7 @@ export default function MaterialHero() {
                   <Typography variant="body2" color="text.secondary">
                     Not just a great valley, but a shrine to human foresight, the strength of
                     granite, the power of glaciers, the persistence of life, and the tranquility of
-                    the High Sierra. It&apos;s famed for its giant, ancient sequoia trees, and the
-                    granite cliffs of El Capitan and Half Dome.
+                    the High Sierra.
                   </Typography>
                 </CardContent>
                 <CardActions disableSpacing>