[website] Polishing spacing and other small things

docs/pages/_document.js

@@ -111,7 +111,7 @@ export default class MyDocument extends Document {
             // use https://cssminifier.com/ to minify
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
-              __html: `@font-face{font-family:'IBM Plex Sans';src:url(/static/fonts/IBMPlexSans-Regular.woff2) format('woff2'),url(/static/fonts/IBMPlexSans-Regular.woff) format('woff'),url(/static/fonts/IBMPlexSans-Regular.ttf) format('truetype');font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:'IBM Plex Sans';src:url(/static/fonts/IBMPlexSans-Medium.woff2) format('woff2'),url(/static/fonts/IBMPlexSans-Medium.woff) format('woff'),url(/static/fonts/IBMPlexSans-Medium.ttf) format('truetype');font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:'IBM Plex Sans';src:url(/static/fonts/IBMPlexSans-Bold.woff2) format('woff2'),url(/static/fonts/IBMPlexSans-Bold.woff) format('woff'),url(/static/fonts/IBMPlexSans-Bold.ttf) format('truetype');font-weight:700;font-style:normal;font-display:swap}`,
+              __html: `@font-face{font-family:'IBM Plex Sans';src:url(/static/fonts/IBMPlexSans-Regular.woff2) format('woff2'),url(/static/fonts/IBMPlexSans-Regular.woff) format('woff'),url(/static/fonts/IBMPlexSans-Regular.ttf) format('truetype');font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:'IBM Plex Sans';src:url(/static/fonts/IBMPlexSans-Medium.woff2) format('woff2'),url(/static/fonts/IBMPlexSans-Medium.woff) format('woff'),url(/static/fonts/IBMPlexSans-Medium.ttf) format('truetype');font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:'IBM Plex Sans';src:url(/static/fonts/IBMPlexSans-SemiBold.woff2) format('woff2'),url(/static/fonts/IBMPlexSans-SemiBold.woff) format('woff'),url(/static/fonts/IBMPlexSans-SemiBold.ttf) format('truetype');font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:'IBM Plex Sans';src:url(/static/fonts/IBMPlexSans-Bold.woff2) format('woff2'),url(/static/fonts/IBMPlexSans-Bold.woff) format('woff'),url(/static/fonts/IBMPlexSans-Bold.ttf) format('truetype');font-weight:700;font-style:normal;font-display:swap}`,
             }}
           />
           <GlobalStyles

docs/pages/about.tsx

@@ -191,7 +191,7 @@ const Widget = ({
   icon: React.ReactElement;
 }) => {
   return (
-    <Paper variant="outlined" sx={{ height: '100%', p: 2 }}>
+    <Paper variant="outlined" sx={{ height: '100%', px: 2, pt: 2, pb: 1.5 }}>
       <Typography component="div" variant="body2" fontWeight="bold" sx={{ mb: 1 }}>
         <Box sx={{ display: 'inline-block', lineHeight: 0, verticalAlign: 'bottom', mr: 1 }}>
           {icon}
@@ -276,10 +276,10 @@ const teamMembers: Array<Profile> = [
   {
     name: 'Danilo Leal',
     src: '/static/branding/about/danilo.png',
-    title: 'Design Lead',
+    title: 'Lead designer',
     location: 'São Paulo, Brazil',
     locationCountry: 'br',
-    about: 'Music production and hiking!',
+    about: 'Music production, hiking and traveling!',
     github: 'danilo-leal',
     twitter: 'danilobleal',
   },
@@ -343,10 +343,10 @@ const teamMembers: Array<Profile> = [
   {
     src: '/static/branding/about/jose.png',
     name: 'José Freitas',
-    title: 'MUI X Technical PM',
+    title: 'MUI X PM',
     location: 'Augsburg, Germany',
     locationCountry: 'de',
-    about: 'Art, fiction',
+    about: 'Art, fiction and bar philosophy',
     twitter: 'zehdefreitas',
     github: 'joserodolfofreitas',
   },
@@ -589,6 +589,7 @@ function AboutContent() {
               endIcon={<KeyboardArrowRightRounded fontSize="small" />}
               variant="contained"
               size="large"
+              sx={{ width: { xs: '100%', sm: 'auto' } }}
             >
               See open roles
             </Button>

docs/pages/blog.tsx

@@ -157,13 +157,14 @@ const PostPreview = (props: BlogPost) => {
           size="small"
           endIcon={<KeyboardArrowRightRoundedIcon />}
           sx={(theme) => ({
-            mt: { xs: 0.5, sm: 0 },
+            mt: { xs: 1, md: 0 },
+            mb: { xs: -1, md: 0 },
             color:
               theme.palette.mode === 'dark'
                 ? theme.palette.primary[300]
                 : theme.palette.primary[600],
-            '& svg': {
-              ml: -0.5,
+            '& .MuiButton-endIcon': {
+              ml: 0,
             },
           })}
         >
@@ -306,7 +307,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
         <Container
           ref={postListRef}
           sx={{
-            mt: { xs: -8, sm: -7 },
+            mt: -6,
             display: 'grid',
             gridTemplateColumns: { md: '1fr 380px' },
             columnGap: 8,
@@ -337,8 +338,8 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
                 position: 'sticky',
                 top: 100,
                 alignSelf: 'start',
-                mb: { xs: 2, sm: 8 },
-                mt: { xs: 2, sm: 8 }, // margin-top makes the title appear when scroll into view
+                mb: 2,
+                mt: { xs: 3, sm: 2, md: 9 }, // margin-top makes the title appear when scroll into view
                 p: 2,
                 borderRadius: 1,
                 border: '1px solid',
@@ -403,7 +404,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
                   component="li"
                   key={post.slug}
                   sx={() => ({
-                    py: 2,
+                    py: 2.5,
                     display: 'flex',
                     flexDirection: 'column',
                     position: 'relative',

docs/pages/blog/introducing-the-row-grouping-feature.md

@@ -3,7 +3,7 @@ title: 'Introducing the Row Grouping feature'
 description: After more than a year of development on the DataGrid, the first premium feature is live.
 date: 2022-01-20T00:00:00.000Z
 authors: ['alexfauquette']
-tags: ['News', 'MUI X']
+tags: ['MUI X', 'News']
 ---
 
 A lot of you were asking about it, and we are pleased to announce that the Premium plan is on the road.

docs/pages/blog/material-ui-is-now-mui.md

@@ -3,7 +3,7 @@ title: Material-UI is now MUI!
 description: Starting today, we are evolving our brand identity. We are clarifying the difference between our company and our products.
 date: 2021-09-16T00:00:00.000Z
 authors: ['oliviertassinari', 'danilo-leal', 'mbrookes']
-tags: ['News']
+tags: ['Company update']
 card: true
 ---
 

docs/pages/careers.tsx

@@ -332,9 +332,9 @@ function CareersContent() {
       </Box>
       {/* Perks & benefits */}
       <div>
-        <Container sx={{ py: { xs: 4, md: 8 } }}>
+        <Container sx={{ py: 4 }}>
           <Grid container alignItems="center" spacing={{ xs: 2, sm: 4 }}>
-            <Grid item xs={12} md={6}>
+            <Grid item xs={12} md={6} sx={{ pr: { sm: 0, md: 4 } }}>
               <Typography variant="h2" sx={{ my: 1 }} id="perks-amp-benefits">
                 {'Perks & benefits'}
               </Typography>
@@ -362,53 +362,59 @@ function CareersContent() {
                 </Box>
               ))}
             </Grid>
-            <Grid item xs={12} sm={6} md={3}>
-              <Paper
-                component={Link}
-                href={ROUTES.handbook}
-                noLinkStyle
-                variant="outlined"
-                sx={{ p: 2 }}
-              >
-                <Typography variant="body2" fontWeight="bold" sx={{ mb: 0.5 }}>
-                  Handbook
-                </Typography>
-                <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
-                  See how we run the company and the way we work.
-                </Typography>
-                <Typography
-                  color={(theme) => (theme.palette.mode === 'dark' ? 'primary.400' : 'primary.600')}
-                  variant="body2"
-                  fontWeight="bold"
+            <Grid item xs={12} sm={12} md={6} container spacing={2}>
+              <Grid item xs={12} sm={12} md={6}>
+                <Paper
+                  component={Link}
+                  href={ROUTES.handbook}
+                  noLinkStyle
+                  variant="outlined"
+                  sx={{ p: 2 }}
                 >
-                  Learn more{' '}
-                  <KeyboardArrowRightRounded fontSize="small" sx={{ verticalAlign: 'middle' }} />
-                </Typography>
-              </Paper>
-            </Grid>
-            <Grid item xs={12} sm={6} md={3}>
-              <Paper
-                component={Link}
-                href={ROUTES.blog}
-                noLinkStyle
-                variant="outlined"
-                sx={{ p: 2 }}
-              >
-                <Typography variant="body2" fontWeight="bold" sx={{ mb: 0.5 }}>
-                  Blog
-                </Typography>
-                <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
-                  Check behind the scenes and news from the company.
-                </Typography>
-                <Typography
-                  color={(theme) => (theme.palette.mode === 'dark' ? 'primary.400' : 'primary.600')}
-                  variant="body2"
-                  fontWeight="bold"
+                  <Typography variant="body2" fontWeight="bold" sx={{ mb: 0.5 }}>
+                    Handbook
+                  </Typography>
+                  <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+                    See how we run the company and the way we work.
+                  </Typography>
+                  <Typography
+                    color={(theme) =>
+                      theme.palette.mode === 'dark' ? 'primary.400' : 'primary.600'
+                    }
+                    variant="body2"
+                    fontWeight="bold"
+                  >
+                    Learn more{' '}
+                    <KeyboardArrowRightRounded fontSize="small" sx={{ verticalAlign: 'middle' }} />
+                  </Typography>
+                </Paper>
+              </Grid>
+              <Grid item xs={12} sm={12} md={6}>
+                <Paper
+                  component={Link}
+                  href={ROUTES.blog}
+                  noLinkStyle
+                  variant="outlined"
+                  sx={{ p: 2 }}
                 >
-                  Learn more{' '}
-                  <KeyboardArrowRightRounded fontSize="small" sx={{ verticalAlign: 'middle' }} />
-                </Typography>
-              </Paper>
+                  <Typography variant="body2" fontWeight="bold" sx={{ mb: 0.5 }}>
+                    Blog
+                  </Typography>
+                  <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+                    Check behind the scenes and news from the company.
+                  </Typography>
+                  <Typography
+                    color={(theme) =>
+                      theme.palette.mode === 'dark' ? 'primary.400' : 'primary.600'
+                    }
+                    variant="body2"
+                    fontWeight="bold"
+                  >
+                    Learn more{' '}
+                    <KeyboardArrowRightRounded fontSize="small" sx={{ verticalAlign: 'middle' }} />
+                  </Typography>
+                </Paper>
+              </Grid>
             </Grid>
           </Grid>
         </Container>

docs/src/components/home/GetStartedButtons.tsx

@@ -37,10 +37,11 @@ export default function GetStartedButtons({
         size="large"
         variant="contained"
         endIcon={<KeyboardArrowRightRounded />}
-        sx={{ mr: { xs: 0, md: 2 }, mb: { xs: 2, md: 0 } }}
+        sx={{ mr: { xs: 0, sm: 2 } }}
       >
         Get started
       </Button>
+      <Box sx={{ py: 1, display: { xs: 'block', sm: 'hidden' } }} />
       <Button
         size="large"
         // @ts-expect-error

docs/src/components/home/Hero.tsx

@@ -122,6 +122,7 @@ export default function Hero() {
       }
       rightSx={{
         p: 3,
+        ml: 2,
         minWidth: 2000,
         overflowY: 'auto',
         '& > div': {

docs/src/components/home/MaterialDesignComponents.tsx

@@ -492,7 +492,7 @@ export default function MaterialDesignComponents() {
           mt: { xs: 2, md: 4 },
           mb: 2,
           display: 'flex',
-          justifyContent: { xs: 'flex-start', sm: 'flex-end' },
+          justifyContent: { sm: 'flex-start', md: 'flex-end' },
         }}
       >
         <StyledChip

docs/src/components/home/MuiStatistics.tsx

@@ -5,29 +5,29 @@ import Typography from '@mui/material/Typography';
 
 const data = [
   { title: '2.3M', metadata: 'Weekly downloads on npm' },
-  { title: '72.7k', metadata: 'Stars on GitHub' },
+  { title: '74.8k', metadata: 'Stars on GitHub' },
   { title: '2.2k', metadata: 'Open-source contributors' },
-  { title: '15.8k', metadata: 'Followers on Twitter' },
+  { title: '16.8k', metadata: 'Followers on Twitter' },
 ];
 
 export default function MuiStatistics() {
   return (
-    <Grid item xs={12} md={6} container spacing={2}>
+    <Grid item xs={12} md={6} container spacing={4}>
       {data.map((item) => (
         <Grid key={item.title} item xs={6}>
           <Box
             sx={{
               height: '100%',
-              p: 1,
+              p: 0.5,
               pl: 2,
-              borderLeft: '4px solid',
+              borderLeft: '2px solid',
               borderColor: (theme) =>
                 theme.palette.mode === 'dark' ? 'primaryDark.600' : 'primary.100',
             }}
           >
             <Typography
               component="div"
-              variant="h3"
+              variant="h4"
               color={(theme) => (theme.palette.mode === 'dark' ? 'primary.200' : 'primary.main')}
               fontWeight="bold"
             >

docs/src/components/home/StartToday.tsx

@@ -11,7 +11,7 @@ import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
 
 export default function StartToday() {
   return (
-    <Grid container spacing={{ xs: 2, md: 4 }} alignItems="center">
+    <Grid container spacing={{ xs: 5, md: 4 }} alignItems="center">
       <Grid item xs={12} sm={6} md={6} sx={{ mb: { md: 4 } }}>
         <SectionHeadline
           overline="Go live!"

docs/src/components/home/UserFeedbacks.tsx

@@ -21,7 +21,7 @@ const Feedback = ({
 }) => {
   return (
     <Box sx={{ color: '#fff' }}>
-      <Typography variant="subtitle1" component="div" sx={{ mb: 2 }}>
+      <Typography variant="body1" fontWeight="500" component="div" sx={{ mb: 2.5 }}>
         {quote}
       </Typography>
       <Box sx={{ display: 'flex' }}>
@@ -31,15 +31,15 @@ const Feedback = ({
           alt={`Picture of ${profile.name}`}
           imgProps={{ loading: 'lazy' }}
           sx={{
-            width: 60,
-            height: 60,
-            border: '1px solid',
-            borderColor: '#fff',
+            width: 58,
+            height: 58,
+            border: '2px solid',
+            borderColor: 'primary.200',
             bgcolor: 'grey.800',
           }}
         />
         <Box sx={{ ml: 2 }}>
-          <Typography fontWeight="bold" sx={{ mb: 1 }}>
+          <Typography fontWeight="500" sx={{ mb: 1 }}>
             {profile.name},{' '}
             <Box component="span" sx={{ color: 'grey.500', fontWeight: 'regular' }}>
               {profile.role}

docs/src/components/productCore/CoreComponents.tsx

@@ -314,6 +314,7 @@ export default function CoreComponents() {
               </Box>
               <Box
                 sx={{
+                  pl: 1.5,
                   display: 'flex',
                   alignItems: 'center',
                   position: 'absolute',

docs/src/components/productCore/CoreHeroEnd.tsx

@@ -15,10 +15,10 @@ export default function CoreHeroEnd() {
   return (
     <ThemeProvider theme={brandingDarkTheme}>
       <Section bg="dim">
-        <Box sx={{ py: 4 }}>
+        <Box>
           <Grid container spacing={2} alignItems="center">
             <Grid item md={6}>
-              <Box maxWidth={500}>
+              <Box maxWidth={500} sx={{ mb: 4 }}>
                 <SectionHeadline
                   overline="Community"
                   title="Get and give help by joining our contributors community"
@@ -32,6 +32,7 @@ export default function CoreHeroEnd() {
                   size="large"
                   variant="contained"
                   endIcon={<KeyboardArrowRightRounded />}
+                  sx={{ width: { xs: '100%', sm: 'auto' } }}
                 >
                   Learn more
                 </Button>

docs/src/components/productCore/CoreStyling.tsx

@@ -302,7 +302,7 @@ export default function CoreStyling() {
                 <Box sx={{ position: 'relative', zIndex: 1 }}>
                   <HighlightedCode component={MarkdownElement} code={code} language="jsx" />
                 </Box>
-                <FlashCode startLine={startLine[index]} endLine={endLine[index]} sx={{ mx: -2 }} />
+                <FlashCode startLine={startLine[index]} endLine={endLine[index]} sx={{ mx: -1 }} />
               </Box>
             </Frame.Info>
           </Frame>