From af0793687035d77b8383c79fa5a2607ea621dba7 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Thu, 15 Feb 2024 13:14:03 -0300
Subject: [PATCH 1/3] [website] Add overall improvements to the Material UI
 page (#41075)

---
 docs/src/components/action/Highlighter.tsx    | 11 ++-
 docs/src/components/action/Item.tsx           |  9 ++-
 docs/src/components/action/StylingInfo.tsx    |  3 +-
 docs/src/components/home/CoreShowcase.tsx     |  2 +-
 .../home/MaterialDesignComponents.tsx         |  6 +-
 .../productMaterial/MaterialComponents.tsx    | 64 +++++++---------
 .../productMaterial/MaterialHero.tsx          | 11 ++-
 .../productMaterial/MaterialStyling.tsx       | 73 ++++++++-----------
 .../productMaterial/MaterialTemplates.tsx     |  3 +-
 .../productMaterial/MaterialTheming.tsx       | 38 +++++-----
 docs/src/components/showcase/PlayerCard.tsx   | 51 ++++++-------
 .../components/showcase/RealEstateCard.tsx    | 45 ++++++------
 12 files changed, 145 insertions(+), 171 deletions(-)

diff --git a/docs/src/components/action/Highlighter.tsx b/docs/src/components/action/Highlighter.tsx
index 727cc54b6fe57f..1ea42e4b6882cc 100644
--- a/docs/src/components/action/Highlighter.tsx
+++ b/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,13 +58,16 @@ 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',
@@ -73,13 +75,16 @@ export default function Highlighter({
               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),
diff --git a/docs/src/components/action/Item.tsx b/docs/src/components/action/Item.tsx
index 27c7f61eada1e9..4385f5573a84ba 100644
--- a/docs/src/components/action/Item.tsx
+++ b/docs/src/components/action/Item.tsx
@@ -72,14 +72,16 @@ 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
@@ -87,12 +89,13 @@ export default function Item({
       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' }}>
diff --git a/docs/src/components/action/StylingInfo.tsx b/docs/src/components/action/StylingInfo.tsx
index 2ceb1e303da83a..e67cf63941c5ce 100644
--- a/docs/src/components/action/StylingInfo.tsx
+++ b/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,
diff --git a/docs/src/components/home/CoreShowcase.tsx b/docs/src/components/home/CoreShowcase.tsx
index 28bc24fbdba944..b2483ab7abe165 100644
--- a/docs/src/components/home/CoreShowcase.tsx
+++ b/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>
diff --git a/docs/src/components/home/MaterialDesignComponents.tsx b/docs/src/components/home/MaterialDesignComponents.tsx
index fcb937b5e75b8d..ead70ff8dc866f 100644
--- a/docs/src/components/home/MaterialDesignComponents.tsx
+++ b/docs/src/components/home/MaterialDesignComponents.tsx
@@ -453,11 +453,11 @@ 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),
             }),
           }),
         },
@@ -465,7 +465,7 @@ export function buildTheme(): ThemeOptions {
       MuiTableCell: {
         styleOverrides: {
           root: ({ theme }) => ({
-            padding: 10,
+            padding: 8,
             borderColor: (theme.vars || theme).palette.divider,
           }),
         },
diff --git a/docs/src/components/productMaterial/MaterialComponents.tsx b/docs/src/components/productMaterial/MaterialComponents.tsx
index 81a7036fac7d60..3abc1df7a2ad0a 100644
--- a/docs/src/components/productMaterial/MaterialComponents.tsx
+++ b/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,7 +287,7 @@ 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',
@@ -318,6 +295,7 @@ export default function MaterialComponents() {
                 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>
diff --git a/docs/src/components/productMaterial/MaterialHero.tsx b/docs/src/components/productMaterial/MaterialHero.tsx
index 3a4ae3427b5780..ea1bf4a200ead9 100644
--- a/docs/src/components/productMaterial/MaterialHero.tsx
+++ b/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>
diff --git a/docs/src/components/productMaterial/MaterialStyling.tsx b/docs/src/components/productMaterial/MaterialStyling.tsx
index b26d938a3fb7d8..48897433cb4dc4 100644
--- a/docs/src/components/productMaterial/MaterialStyling.tsx
+++ b/docs/src/components/productMaterial/MaterialStyling.tsx
@@ -2,7 +2,9 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
-import AutoAwesomeRounded from '@mui/icons-material/AutoAwesomeRounded';
+import DevicesOtherRoundedIcon from '@mui/icons-material/DevicesOtherRounded';
+import ContrastRoundedIcon from '@mui/icons-material/ContrastRounded';
+import SwitchAccessShortcutRoundedIcon from '@mui/icons-material/SwitchAccessShortcutRounded';
 import DragHandleRounded from '@mui/icons-material/DragHandleRounded';
 import Section from 'docs/src/layouts/Section';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
@@ -19,13 +21,10 @@ const code = `
 <Card
   variant="outlined"
   sx={{
-    p: 1,
-    boxShadow: '0 1px 3px rgba(0, 127, 255, 0.1)',
+    p: 2,
     display: 'flex',
-    flexDirection: {
-      xs: 'column', // mobile
-      sm: 'row', // tablet and up
-    },
+    flexWrap: 'wrap',
+    zIndex: 1,
   }}
 >
   <CardMedia
@@ -33,50 +32,42 @@ const code = `
     width="100"
     height="100"
     alt="123 Main St, Phoenix, AZ cover"
-    src="/static/images/cards/real-estate.png"
+    src="/images/real-estate.png"
     sx={{
-      borderRadius: 0.5,
+      borderRadius: '6px',
       width: { xs: '100%', sm: 100 },
-      mr: { sm: 1.5 },
-      mb: { xs: 1.5, sm: 0 },
     }}
   />
   <Box sx={{ alignSelf: 'center', ml: 2 }}>
-    <Typography variant="body2" color="text.secondary" fontWeight="medium">
-      123 Main St, Phoenix, AZ
+    <Typography variant="body2" color="text.secondary" fontWeight="regular">
+      123 Main St, Phoenix, AZ, USA
     </Typography>
-    <Typography fontWeight="bold" noWrap>
+    <Typography fontWeight="bold" noWrap gutterBottom>
       $280k - $310k
     </Typography>
-    <Box
+    <Chip
+      size="small"
+      variant="outlined"
+      icon={<InfoRounded />}
+      label="Confidence score: 85%"
       sx={(theme) => ({
-        mt: 1,
-        py: 0.4,
-        pl: 0.5,
-        pr: 1,
-        typography: 'caption',
-        borderRadius: 10,
-        display: 'flex',
-        bgcolor: 'primary.50',
-        border: '1px solid',
-        borderColor: 'primary.100',
-        color: 'primary.700',
+        '.MuiChip-icon': { fontSize: 16, ml: '4px', color: 'success.500' },
+        bgcolor: 'success.50',
+        borderColor: 'success.100',
+        color: 'success.900',
         ...theme.applyDarkStyles({
           bgcolor: 'primaryDark.700',
-          color: 'primary.200',
-          borderColor: 'primary.900',
+          color: 'success.200',
+          borderColor: 'success.900',
         }),
       })}
-    >
-      <InfoRounded sx={{ fontSize: 16, mr: 0.5, mt: '1px' }} />
-      Confidence score: 85%
-    </Box>
+    />
   </Box>
 </Card>`;
 
-const startLine = [34, 25, 6];
-const endLine = [48, 30, 8];
-const scrollTo = [540, 320, 0];
+const startLine = [32, 21, 17];
+const endLine = [42, 26, 17];
+const scrollTo = [540, 320, 200];
 
 export const useResizeHandle = (
   target: React.MutableRefObject<HTMLDivElement | null>,
@@ -180,24 +171,24 @@ export default function MaterialStyling() {
             }
             description="CSS utilities allow you to move faster and make for a smooth developer experience when styling any component."
           />
-          <Group sx={{ mt: 4, pb: { xs: 0, md: 2 } }}>
+          <Group sx={{ m: -2, p: 2 }}>
             <Highlighter disableBorder {...getSelectedProps(0)} onClick={() => setIndex(0)}>
               <Item
-                icon={<AutoAwesomeRounded color="warning" />}
+                icon={<ContrastRoundedIcon color="primary" />}
                 title="Leverage the tokens from your theme"
                 description="Easily use the design tokens defined in your theme for any CSS property out there."
               />
             </Highlighter>
             <Highlighter disableBorder {...getSelectedProps(1)} onClick={() => setIndex(1)}>
               <Item
-                icon={<AutoAwesomeRounded color="warning" />}
+                icon={<SwitchAccessShortcutRoundedIcon color="primary" />}
                 title="No context switching"
                 description="The styling and component usage are both in the same place, right where you need them."
               />
             </Highlighter>
             <Highlighter disableBorder {...getSelectedProps(2)} onClick={() => setIndex(2)}>
               <Item
-                icon={<AutoAwesomeRounded color="warning" />}
+                icon={<DevicesOtherRoundedIcon color="primary" />}
                 title="Responsive styles right inside system prop"
                 description="An elegant API for writing CSS media queries that match your theme breakpoints."
               />
@@ -260,10 +251,10 @@ export default function MaterialStyling() {
                         width: '1px',
                         bgcolor: 'grey.200',
                         position: 'absolute',
-                        left: 375,
+                        left: { xs: 335, sm: 375 },
                         height: '100%',
                         ...theme.applyDarkStyles({
-                          bgcolor: 'primaryDark.600',
+                          bgcolor: 'divider',
                         }),
                       })}
                     >
diff --git a/docs/src/components/productMaterial/MaterialTemplates.tsx b/docs/src/components/productMaterial/MaterialTemplates.tsx
index e53b1e2144d26a..554a56b69b1620 100644
--- a/docs/src/components/productMaterial/MaterialTemplates.tsx
+++ b/docs/src/components/productMaterial/MaterialTemplates.tsx
@@ -140,7 +140,7 @@ export default function MaterialTemplates() {
         }
         description="A carefully curated collection of gorgeous, fully functional templates, all powered by Material UI."
       />
-      <Group rowLayout desktopColumns={2} sx={{ mt: 3 }}>
+      <Group rowLayout desktopColumns={2} sx={{ p: 2 }}>
         {DEMOS.map((name) => (
           <Highlighter
             key={name}
@@ -153,6 +153,7 @@ export default function MaterialTemplates() {
             <Item
               icon={React.cloneElement(icons[name], name === demo ? { color: 'primary' } : {})}
               title={name}
+              smallerIconDistance
             />
           </Highlighter>
         ))}
diff --git a/docs/src/components/productMaterial/MaterialTheming.tsx b/docs/src/components/productMaterial/MaterialTheming.tsx
index 65907d826eeef0..01079c893757c9 100644
--- a/docs/src/components/productMaterial/MaterialTheming.tsx
+++ b/docs/src/components/productMaterial/MaterialTheming.tsx
@@ -31,48 +31,44 @@ const code = `
     width="100"
     height="100"
     alt="Contemplative Reptile album cover"
-    src="/static/images/cards/contemplative-reptile.jpg"
+    src="/images/contemplative-reptile.jpg"
     sx={{
       width: { xs: '100%', sm: 100 },
-      borderRadius: 0.6,
     }}
   />
-  <Stack direction="column" spacing={2} alignItems="center">
-    <Stack direction="column" spacing={0.2} alignItems="center">
-      <Typography color="text.primary" fontWeight="medium" fontSize={15}>
+  <Stack direction="column" alignItems="center" spacing={1} useFlexGap>
+    <div>
+      <Typography color="text.primary" fontWeight="semiBold">
         Contemplative Reptile
       </Typography>
       <Typography
-        component="div"
         variant="caption"
         color="text.secondary"
-        fontWeight="regular"
+        fontWeight="medium"
+        textAlign="center"
+        sx={{ width: '100%' }}
       >
         Sounds of Nature
       </Typography>
-    </Stack>
-    <Stack direction="row" alignItems="center" spacing={1.5}>
-      <IconButton 
-        disabled 
-        aria-label="shuffle" 
-        size="small" 
-        sx={{ flexGrow: 0 }}>
+    </div>
+    <Stack direction="row" alignItems="center" spacing={1} useFlexGap>
+      <IconButton aria-label="Shuffle" disabled size="small">
         <ShuffleRoundedIcon fontSize="small" />
       </IconButton>
-      <IconButton aria-label="fast rewind" disabled size="small">
+      <IconButton aria-label="Fast rewind" disabled size="small">
         <FastRewindRounded fontSize="small" />
       </IconButton>
       <IconButton
-        aria-label={paused ? 'play' : 'pause'}
-        sx={{ mx: 1 }}
+        aria-label={paused ? 'Play music' : 'Pause music'}
         onClick={() => setPaused((val) => !val)}
+        sx={{ mx: 1 }}
       >
         {paused ? <PlayArrowRounded /> : <PauseRounded />}
       </IconButton>
-      <IconButton aria-label="fast forward" disabled size="small">
+      <IconButton aria-label="Fast forward" disabled size="small">
         <FastForwardRounded fontSize="small" />
       </IconButton>
-      <IconButton aria-label="loop" disabled size="small">
+      <IconButton aria-label="Loop music" disabled size="small">
         <LoopRoundedIcon fontSize="small" />
       </IconButton>
     </Stack>
@@ -94,7 +90,7 @@ export default function MaterialTheming() {
             }
             description="Start quickly with Material Design or use the advanced theming feature to easily tailor the components to your needs."
           />
-          <Group sx={{ mt: 4, pb: { xs: 0, md: 2 } }}>
+          <Group sx={{ m: -2, p: 2 }}>
             <Highlighter disableBorder selected={customized} onClick={() => setCustomized(true)}>
               <Item
                 icon={<AutoAwesomeRounded color="warning" />}
@@ -124,7 +120,7 @@ export default function MaterialTheming() {
               }}
             >
               {customized ? (
-                <PlayerCard extraStyles />
+                <PlayerCard />
               ) : (
                 <CssVarsProvider>
                   <PlayerCard disableTheming />
diff --git a/docs/src/components/showcase/PlayerCard.tsx b/docs/src/components/showcase/PlayerCard.tsx
index 1e29fbbe51769c..8183ffe5f0e81a 100644
--- a/docs/src/components/showcase/PlayerCard.tsx
+++ b/docs/src/components/showcase/PlayerCard.tsx
@@ -13,13 +13,7 @@ import PauseRounded from '@mui/icons-material/PauseRounded';
 import ShuffleRoundedIcon from '@mui/icons-material/ShuffleRounded';
 import LoopRoundedIcon from '@mui/icons-material/LoopRounded';
 
-export default function PlayerCard({
-  disableTheming,
-  extraStyles,
-}: {
-  disableTheming?: boolean;
-  extraStyles?: boolean;
-}) {
+export default function PlayerCard({ disableTheming }: { disableTheming?: boolean }) {
   const [paused, setPaused] = React.useState(true);
   return (
     <Fade in timeout={700}>
@@ -32,13 +26,10 @@ export default function PlayerCard({
             display: 'flex',
             flexDirection: { xs: 'column', sm: 'row' },
             alignItems: 'center',
-            borderColor: extraStyles ? 'primary.200' : 'grey.200',
             gap: 2,
-            boxShadow: (theme) =>
-              extraStyles
-                ? '0 2px 4px rgba(0, 127, 255, 0.2)'
-                : `0px 4px 8px ${alpha(theme.palette.grey[200], 0.6)}`,
             ...(!disableTheming && {
+              borderColor: 'divider',
+              boxShadow: (theme) => `0px 4px 8px ${alpha(theme.palette.grey[200], 0.6)}`,
               [`& .${iconButtonClasses.root}`]: {
                 border: '1px solid',
                 bgcolor: 'primary.50',
@@ -61,10 +52,7 @@ export default function PlayerCard({
             ((theme) =>
               theme.applyDarkStyles({
                 bgcolor: 'primaryDark.900',
-                borderColor: extraStyles ? 'primary.800' : 'primaryDark.700',
-                boxShadow: extraStyles
-                  ? '0 2px 4px rgba(0, 127, 255, 0.2)'
-                  : '0px 4px 8px rgba(0, 0, 0, 0.4)',
+                boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)',
                 [`& .${iconButtonClasses.root}`]: {
                   bgcolor: 'primary.900',
                   color: 'primary.200',
@@ -90,41 +78,44 @@ export default function PlayerCard({
           src="/static/images/cards/contemplative-reptile.jpg"
           sx={{
             width: { xs: '100%', sm: 100 },
-            borderRadius: 0.6,
+            ...(!disableTheming && {
+              borderRadius: '6px',
+            }),
           }}
         />
-        <Stack direction="column" spacing={2} alignItems="center">
-          <Stack direction="column" spacing={0.2} alignItems="center">
-            <Typography color="text.primary" fontWeight="medium" fontSize={15}>
+        <Stack direction="column" alignItems="center" spacing={1} useFlexGap>
+          <div>
+            <Typography color="text.primary" fontWeight="semiBold">
               Contemplative Reptile
             </Typography>
             <Typography
-              component="div"
               variant="caption"
               color="text.secondary"
-              fontWeight="regular"
+              fontWeight="medium"
+              textAlign="center"
+              sx={{ width: '100%' }}
             >
               Sounds of Nature
             </Typography>
-          </Stack>
-          <Stack direction="row" alignItems="center" spacing={1.5}>
-            <IconButton aria-label="shuffle" disabled size="small" sx={{ flexGrow: 0 }}>
+          </div>
+          <Stack direction="row" alignItems="center" spacing={1} useFlexGap>
+            <IconButton aria-label="Shuffle" disabled size="small">
               <ShuffleRoundedIcon fontSize="small" />
             </IconButton>
-            <IconButton aria-label="fast rewind" disabled size="small">
+            <IconButton aria-label="Fast rewind" disabled size="small">
               <FastRewindRounded fontSize="small" />
             </IconButton>
             <IconButton
-              aria-label={paused ? 'play' : 'pause'}
-              sx={{ mx: 1 }}
+              aria-label={paused ? 'Play music' : 'Pause music'}
               onClick={() => setPaused((val) => !val)}
+              sx={{ mx: 1 }}
             >
               {paused ? <PlayArrowRounded /> : <PauseRounded />}
             </IconButton>
-            <IconButton aria-label="fast forward" disabled size="small">
+            <IconButton aria-label="Fast forward" disabled size="small">
               <FastForwardRounded fontSize="small" />
             </IconButton>
-            <IconButton aria-label="loop" disabled size="small">
+            <IconButton aria-label="Loop music" disabled size="small">
               <LoopRoundedIcon fontSize="small" />
             </IconButton>
           </Stack>
diff --git a/docs/src/components/showcase/RealEstateCard.tsx b/docs/src/components/showcase/RealEstateCard.tsx
index 7f89952d59da2e..569e8d7166f406 100644
--- a/docs/src/components/showcase/RealEstateCard.tsx
+++ b/docs/src/components/showcase/RealEstateCard.tsx
@@ -1,8 +1,10 @@
 import * as React from 'react';
+import { alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Card, { CardProps } from '@mui/material/Card';
 import CardMedia from '@mui/material/CardMedia';
 import Typography from '@mui/material/Typography';
+import Chip from '@mui/material/Chip';
 import InfoRounded from '@mui/icons-material/InfoRounded';
 
 export default function RealEstateCard({ sx, ...props }: CardProps) {
@@ -12,14 +14,14 @@ export default function RealEstateCard({ sx, ...props }: CardProps) {
       {...props}
       sx={[
         (theme) => ({
+          p: 2,
           display: 'flex',
           flexWrap: 'wrap',
-          p: 2,
           zIndex: 1,
-          boxShadow: '0 2px 4px rgba(0, 127, 255, 0.1)',
+          boxShadow: `0px 4px 8px ${alpha(theme.palette.grey[200], 0.6)}`,
           ...theme.applyDarkStyles({
             bgcolor: 'primaryDark.900',
-            boxShadow: '0 2px 4px rgba(0, 0, 0, 0.8)',
+            boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)',
           }),
         }),
         ...(Array.isArray(sx) ? sx : [sx]),
@@ -32,40 +34,35 @@ export default function RealEstateCard({ sx, ...props }: CardProps) {
         alt="123 Main St, Phoenix, AZ cover"
         src="/static/images/cards/real-estate.png"
         sx={{
-          borderRadius: 0.5,
+          borderRadius: '6px',
           width: 'clamp(100px, (304px - 100%) * 999 , 100%)',
         }}
       />
       <Box sx={{ width: 'clamp(15px, (304px - 100%) * 999 , 100%)', height: 15 }} />
       <Box sx={{ alignSelf: 'center' }}>
-        <Typography variant="caption" color="text.secondary" fontWeight="medium">
-          123 Main St, Phoenix, AZ
+        <Typography variant="caption" color="text.secondary" fontWeight="regular">
+          123 Main St, Phoenix, AZ, USA
         </Typography>
-        <Typography fontWeight="bold" noWrap>
+        <Typography fontWeight="bold" noWrap gutterBottom>
           $280k - $310k
         </Typography>
-        <Box
+        <Chip
+          size="small"
+          variant="outlined"
+          icon={<InfoRounded />}
+          label="Confidence score: 85%"
           sx={(theme) => ({
-            mt: 1,
-            py: 0.4,
-            pl: 0.5,
-            pr: 1,
-            typography: 'caption',
-            borderRadius: 10,
-            display: 'flex',
-            bgcolor: 'primary.50',
-            border: '1px solid',
-            borderColor: 'primary.100',
-            color: 'primary.700',
+            '.MuiChip-icon': { fontSize: 16, ml: '4px', color: 'success.500' },
+            bgcolor: 'success.50',
+            borderColor: 'success.100',
+            color: 'success.900',
             ...theme.applyDarkStyles({
               bgcolor: 'primaryDark.700',
-              color: 'primary.200',
-              borderColor: 'primary.900',
+              color: 'success.200',
+              borderColor: 'success.900',
             }),
           })}
-        >
-          <InfoRounded sx={{ fontSize: 16, mr: 0.5, mt: '1px' }} /> Confidence score: 85%
-        </Box>
+        />
       </Box>
     </Card>
   );

From 36523fa8232e5aaabf86dbfb682f5773d48a2321 Mon Sep 17 00:00:00 2001
From: Victor Zanivan Monteiro <victorzanivan@gmail.com>
Date: Thu, 15 Feb 2024 14:37:50 -0300
Subject: [PATCH 2/3] [material-ui][docs] Remove Masonry component and Material
 Design icon from the landing page template (#41080)

---
 .../templates/landing-page/LandingPage.js     |  6 +-
 .../templates/landing-page/LandingPage.tsx    |  6 +-
 .../landing-page/components/Testimonials.js   | 59 +++++++++++--------
 .../landing-page/components/Testimonials.tsx  | 59 +++++++++++--------
 4 files changed, 72 insertions(+), 58 deletions(-)

diff --git a/docs/data/material/getting-started/templates/landing-page/LandingPage.js b/docs/data/material/getting-started/templates/landing-page/LandingPage.js
index 470c1ae6cea57d..74c6cff3c40ba8 100644
--- a/docs/data/material/getting-started/templates/landing-page/LandingPage.js
+++ b/docs/data/material/getting-started/templates/landing-page/LandingPage.js
@@ -8,7 +8,6 @@ import { ThemeProvider, createTheme } from '@mui/material/styles';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
-import SvgMaterialDesign from 'docs/src/icons/SvgMaterialDesign';
 import AppAppBar from './components/AppAppBar';
 import Hero from './components/Hero';
 import LogoCollection from './components/LogoCollection';
@@ -51,10 +50,7 @@ function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
           <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
           Custom theme
         </ToggleButton>
-        <ToggleButton value={false}>
-          <SvgMaterialDesign sx={{ fontSize: '20px', mr: 1 }} />
-          Material Design
-        </ToggleButton>
+        <ToggleButton value={false}>Material Design 2</ToggleButton>
       </ToggleButtonGroup>
     </Box>
   );
diff --git a/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx b/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx
index 7499a406440821..399372c0c0587e 100644
--- a/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx
+++ b/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx
@@ -7,7 +7,6 @@ import { ThemeProvider, createTheme } from '@mui/material/styles';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
-import SvgMaterialDesign from 'docs/src/icons/SvgMaterialDesign';
 import AppAppBar from './components/AppAppBar';
 import Hero from './components/Hero';
 import LogoCollection from './components/LogoCollection';
@@ -58,10 +57,7 @@ function ToggleCustomTheme({
           <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
           Custom theme
         </ToggleButton>
-        <ToggleButton value={false}>
-          <SvgMaterialDesign sx={{ fontSize: '20px', mr: 1 }} />
-          Material Design
-        </ToggleButton>
+        <ToggleButton value={false}>Material Design 2</ToggleButton>
       </ToggleButtonGroup>
     </Box>
   );
diff --git a/docs/data/material/getting-started/templates/landing-page/components/Testimonials.js b/docs/data/material/getting-started/templates/landing-page/components/Testimonials.js
index 719caa3998ef15..7395247413d723 100644
--- a/docs/data/material/getting-started/templates/landing-page/components/Testimonials.js
+++ b/docs/data/material/getting-started/templates/landing-page/components/Testimonials.js
@@ -6,8 +6,7 @@ import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
-import Masonry from '@mui/lab/Masonry';
-import { useMediaQuery } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import { useTheme } from '@mui/system';
 
 const userTestimonials = [
@@ -23,7 +22,7 @@ const userTestimonials = [
     name: 'Travis Howard',
     occupation: 'Lead Product Designer',
     testimonial:
-      "One of the standout features of this product is the exceptional customer support. In my experience, the team behind this product has been quick to respond and incredibly helpful. It's reassuring to know that they stand firmly behind their product, providing the kind of support that enhances the overall user experience and instills confidence in the brand.",
+      "One of the standout features of this product is the exceptional customer support. In my experience, the team behind this product has been quick to respond and incredibly helpful. It's reassuring to know that they stand firmly behind their product.",
   },
   {
     avatar: <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />,
@@ -80,8 +79,6 @@ const logoStyle = {
 
 export default function Testimonials() {
   const theme = useTheme();
-  const isSmallScreen = useMediaQuery('(max-width:600px)');
-  const columns = isSmallScreen ? 1 : 3;
   const logos = theme.palette.mode === 'light' ? darkLogos : whiteLogos;
 
   return (
@@ -112,32 +109,46 @@ export default function Testimonials() {
           and reliable support.
         </Typography>
       </Box>
-      <Masonry columns={columns} spacing={2}>
+      <Grid container spacing={2}>
         {userTestimonials.map((testimonial, index) => (
-          <Card key={index} sx={{ p: 1 }}>
-            <CardContent>
-              <Typography variant="body2" color="text.secondary">
-                {testimonial.testimonial}
-              </Typography>
-            </CardContent>
-            <Box
+          <Grid item xs={12} sm={6} md={4} key={index} sx={{ display: 'flex' }}>
+            <Card
               sx={{
                 display: 'flex',
-                flexDirection: 'row',
+                flexDirection: 'column',
                 justifyContent: 'space-between',
-                pr: 2,
+                flexGrow: 1,
+                p: 1,
               }}
             >
-              <CardHeader
-                avatar={testimonial.avatar}
-                title={testimonial.name}
-                subheader={testimonial.occupation}
-              />
-              <img src={logos[index]} alt={`Logo ${index + 1}`} style={logoStyle} />
-            </Box>
-          </Card>
+              <CardContent>
+                <Typography variant="body2" color="text.secondary">
+                  {testimonial.testimonial}
+                </Typography>
+              </CardContent>
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                  pr: 2,
+                }}
+              >
+                <CardHeader
+                  avatar={testimonial.avatar}
+                  title={testimonial.name}
+                  subheader={testimonial.occupation}
+                />
+                <img
+                  src={logos[index]}
+                  alt={`Logo ${index + 1}`}
+                  style={logoStyle}
+                />
+              </Box>
+            </Card>
+          </Grid>
         ))}
-      </Masonry>
+      </Grid>
     </Container>
   );
 }
diff --git a/docs/data/material/getting-started/templates/landing-page/components/Testimonials.tsx b/docs/data/material/getting-started/templates/landing-page/components/Testimonials.tsx
index 719caa3998ef15..7395247413d723 100644
--- a/docs/data/material/getting-started/templates/landing-page/components/Testimonials.tsx
+++ b/docs/data/material/getting-started/templates/landing-page/components/Testimonials.tsx
@@ -6,8 +6,7 @@ import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
-import Masonry from '@mui/lab/Masonry';
-import { useMediaQuery } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import { useTheme } from '@mui/system';
 
 const userTestimonials = [
@@ -23,7 +22,7 @@ const userTestimonials = [
     name: 'Travis Howard',
     occupation: 'Lead Product Designer',
     testimonial:
-      "One of the standout features of this product is the exceptional customer support. In my experience, the team behind this product has been quick to respond and incredibly helpful. It's reassuring to know that they stand firmly behind their product, providing the kind of support that enhances the overall user experience and instills confidence in the brand.",
+      "One of the standout features of this product is the exceptional customer support. In my experience, the team behind this product has been quick to respond and incredibly helpful. It's reassuring to know that they stand firmly behind their product.",
   },
   {
     avatar: <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />,
@@ -80,8 +79,6 @@ const logoStyle = {
 
 export default function Testimonials() {
   const theme = useTheme();
-  const isSmallScreen = useMediaQuery('(max-width:600px)');
-  const columns = isSmallScreen ? 1 : 3;
   const logos = theme.palette.mode === 'light' ? darkLogos : whiteLogos;
 
   return (
@@ -112,32 +109,46 @@ export default function Testimonials() {
           and reliable support.
         </Typography>
       </Box>
-      <Masonry columns={columns} spacing={2}>
+      <Grid container spacing={2}>
         {userTestimonials.map((testimonial, index) => (
-          <Card key={index} sx={{ p: 1 }}>
-            <CardContent>
-              <Typography variant="body2" color="text.secondary">
-                {testimonial.testimonial}
-              </Typography>
-            </CardContent>
-            <Box
+          <Grid item xs={12} sm={6} md={4} key={index} sx={{ display: 'flex' }}>
+            <Card
               sx={{
                 display: 'flex',
-                flexDirection: 'row',
+                flexDirection: 'column',
                 justifyContent: 'space-between',
-                pr: 2,
+                flexGrow: 1,
+                p: 1,
               }}
             >
-              <CardHeader
-                avatar={testimonial.avatar}
-                title={testimonial.name}
-                subheader={testimonial.occupation}
-              />
-              <img src={logos[index]} alt={`Logo ${index + 1}`} style={logoStyle} />
-            </Box>
-          </Card>
+              <CardContent>
+                <Typography variant="body2" color="text.secondary">
+                  {testimonial.testimonial}
+                </Typography>
+              </CardContent>
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                  pr: 2,
+                }}
+              >
+                <CardHeader
+                  avatar={testimonial.avatar}
+                  title={testimonial.name}
+                  subheader={testimonial.occupation}
+                />
+                <img
+                  src={logos[index]}
+                  alt={`Logo ${index + 1}`}
+                  style={logoStyle}
+                />
+              </Box>
+            </Card>
+          </Grid>
         ))}
-      </Masonry>
+      </Grid>
     </Container>
   );
 }

From e0e722dedcca370421478078c4eb985b1a08764b Mon Sep 17 00:00:00 2001
From: Jan Potoms <2109932+Janpot@users.noreply.github.com>
Date: Fri, 16 Feb 2024 13:24:51 +0100
Subject: [PATCH 3/3] [code-infra] Use `experimental.cpus` to control amount of
 export workers in Next.js (#41132)

---
 docs/next.config.mjs | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/next.config.mjs b/docs/next.config.mjs
index 14def7cc34e9a0..87531b1a2cf1c8 100644
--- a/docs/next.config.mjs
+++ b/docs/next.config.mjs
@@ -30,6 +30,10 @@ const pkgContent = fs.readFileSync(path.resolve(workspaceRoot, 'package.json'),
 const pkg = JSON.parse(pkgContent);
 
 export default withDocsInfra({
+  experimental: {
+    workerThreads: true,
+    cpus: 3,
+  },
   webpack: (config, options) => {
     const plugins = config.plugins.slice();