[website] Refine button design and other details

docs/pages/careers.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled, alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Divider from '@mui/material/Divider';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 import Stack from '@mui/material/Stack';
 import Paper from '@mui/material/Paper';
 import Button from '@mui/material/Button';
@@ -339,12 +339,13 @@ function RemoteAwardCard() {
     >
       <Box
         sx={{
-          aspectRatio: '1/1',
+          mb: 2,
+          maxWidth: { xs: 315, sm: 325 },
+          maxHeight: 315,
           border: '1px solid',
           borderColor: 'divider',
           borderRadius: '6px',
           overflow: 'clip',
-          mb: 2,
         }}
       >
         <Box
@@ -405,9 +406,9 @@ export default function Careers() {
         <OurValues />
         <Divider />
         {/* Perks & benefits */}
-        <Section bg="gradient">
+        <Section bg="gradient" cozy>
           <Grid container spacing={5} alignItems="center">
-            <Grid item md={6}>
+            <Grid md={6}>
               <SectionHeadline
                 overline="Working at MUI"
                 title={
@@ -447,12 +448,48 @@ export default function Careers() {
                 ))}
               </Box>
             </Grid>
-            <Grid item xs={12} md={6}>
-              <Grid container spacing={2}>
-                <Grid item xs={12} md={8}>
+            <Grid
+              xs={12}
+              md={6}
+              sx={{
+                p: { xs: 2, sm: 0 },
+                display: 'flex',
+                flexDirection: { xs: 'column', sm: 'row' },
+                gap: 2,
+              }}
+            >
+              <RemoteAwardCard />
+              <Stack spacing={2} useFlexGap>
+                {companyInfo.map(({ title, description, routeUrl }) => (
+                  <Paper
+                    key={title}
+                    component={Link}
+                    href={routeUrl}
+                    noLinkStyle
+                    variant="outlined"
+                    sx={{ p: 2, width: '100%', flexGrow: 1 }}
+                  >
+                    <Typography variant="body2" fontWeight="bold" sx={{ mb: 0.5 }}>
+                      {title}
+                    </Typography>
+                    <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+                      {description}
+                    </Typography>
+                    <Typography variant="body2" fontWeight="bold" color="primary">
+                      Learn more{' '}
+                      <KeyboardArrowRightRounded
+                        fontSize="small"
+                        sx={{ verticalAlign: 'middle' }}
+                      />
+                    </Typography>
+                  </Paper>
+                ))}
+              </Stack>
+              {/* <Grid container spacing={2}>
+                <Grid xs={12} md={8}>
                   <RemoteAwardCard />
                 </Grid>
-                <Grid item xs={12} md={4}>
+                <Grid xs={12} md={4}>
                   <Stack spacing={2} useFlexGap sx={{ height: '100%', width: '100%' }}>
                     {companyInfo.map(({ title, description, routeUrl }) => (
                       <Paper
@@ -480,7 +517,7 @@ export default function Careers() {
                     ))}
                   </Stack>
                 </Grid>
-              </Grid>
+              </Grid> */}
             </Grid>
           </Grid>
         </Section>
@@ -584,11 +621,11 @@ export default function Careers() {
             Frequently asked questions
           </Typography>
           <Grid container spacing={2}>
-            <Grid item xs={12} md={6}>
+            <Grid xs={12} md={6}>
               {renderFAQItem(0, true)}
               {renderFAQItem(1)}
             </Grid>
-            <Grid item xs={12} md={6}>
+            <Grid xs={12} md={6}>
               {renderFAQItem(2)}
               <Paper
                 variant="outlined"

docs/pages/experiments/website/branding-theme-test.tsx

@@ -2,12 +2,14 @@ import * as React from 'react';
 import Stack from '@mui/material/Stack';
 import Chip from '@mui/material/Chip';
 import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
 import Divider from '@mui/material/Divider';
 import Head from 'docs/src/modules/components/Head';
 import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
 import AppHeader from 'docs/src/layouts/AppHeader';
 import Section from 'docs/src/layouts/Section';
 import AppFooter from 'docs/src/layouts/AppFooter';
+import GitHubIcon from '@mui/icons-material/GitHub';
 
 export default function BrandingThemeTest() {
   return (
@@ -30,20 +32,26 @@ export default function BrandingThemeTest() {
           </Stack>
           <Stack direction="row" spacing={2} useFlexGap sx={{ width: 'fit-content', mt: 8 }}>
             <Button variant="contained" size="small" color="primary">
-              This button
+              Contained primary
             </Button>
             <Button variant="contained" size="small" color="secondary">
-              This button
+              Contained secondary
             </Button>
             <Button variant="outlined" size="small" color="primary">
-              This button
+              Outlined primary
             </Button>
             <Button variant="outlined" size="small" color="secondary">
-              This button
+              Outlined secondary
             </Button>
             <Button variant="text" size="small" color="info">
               This button
             </Button>
+            <IconButton color="primary">
+              <GitHubIcon fontSize="small" />
+            </IconButton>
+            <IconButton color="info">
+              <GitHubIcon fontSize="small" />
+            </IconButton>
           </Stack>
         </Section>
         <Divider />

docs/src/components/about/AboutEnd.tsx

@@ -48,7 +48,7 @@ export default function AboutEnd() {
         alt="A map illustration with pins loosely positioned where team members from MUI are located."
         loading="lazy"
         sx={(theme) => ({
-          mt: -8,
+          mt: -20,
           display: { xs: 'none', sm: 'block' },
           width: '100%',
           aspectRatio: '231/145',

docs/src/components/about/HowToSupport.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
@@ -72,7 +72,7 @@ export default function HowToSupport() {
         description=""
       />
       <Grid container spacing={3}>
-        <Grid item xs={12} sm={6} md={4}>
+        <Grid xs={12} sm={6} md={4}>
           <Widget
             icon={<ForumRoundedIcon fontSize="small" color="primary" />}
             title="Give feedback"
@@ -96,7 +96,7 @@ export default function HowToSupport() {
             </Button>
           </Widget>
         </Grid>
-        <Grid item xs={12} sm={6} md={4}>
+        <Grid xs={12} sm={6} md={4}>
           <Widget
             icon={<PeopleRoundedIcon fontSize="small" color="primary" />}
             title="Join the community"
@@ -157,7 +157,7 @@ export default function HowToSupport() {
             </Button>
           </Widget>
         </Grid>
-        <Grid item xs={12} sm={6} md={4}>
+        <Grid xs={12} sm={6} md={4}>
           <Widget
             icon={<LocalAtmRoundedIcon fontSize="small" color="primary" />}
             title="Support us financially"

docs/src/components/about/OurValues.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
@@ -70,7 +70,7 @@ export default function OurValues() {
       </Button>
       <Grid container spacing={3} sx={{ mt: { xs: 1, sm: 2 } }}>
         {values.map(({ title, description, darkIcon, lightIcon, height, width }) => (
-          <Grid key={title} item xs={12} md={3}>
+          <Grid key={title} xs={12} md={3}>
             <Paper
               variant="outlined"
               sx={(theme) => ({
@@ -90,14 +90,14 @@ export default function OurValues() {
             >
               <Box sx={{ height: 94 }}>
                 <Box
+                  width={width}
+                  height={height}
                   sx={(theme) => ({
                     background: `${lightIcon}`,
                     ...theme.applyDarkStyles({
                       background: `${darkIcon}`,
                     }),
                   })}
-                  width={width}
-                  height={height}
                 />
               </Box>
               <Box sx={{ flexGrow: 1 }}>

docs/src/components/about/Team.tsx

@@ -5,7 +5,7 @@ import Button from '@mui/material/Button';
 import Container from '@mui/material/Container';
 import Divider from '@mui/material/Divider';
 import IconButton from '@mui/material/IconButton';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 import Paper, { PaperProps } from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import Tooltip from '@mui/material/Tooltip';
@@ -369,7 +369,7 @@ export default function Team() {
               ...profileJson,
             };
             return (
-              <Grid key={profile.name} item xs={12} sm={6} md={3}>
+              <Grid key={profile.name} xs={12} sm={6} md={3}>
                 <Person {...profile} />
               </Grid>
             );
@@ -389,7 +389,7 @@ export default function Team() {
           </Typography>
           <Grid container spacing={2} mt={2}>
             {contributors.map((profile) => (
-              <Grid key={profile.name} item xs={12} sm={6} md={3}>
+              <Grid key={profile.name} xs={12} sm={6} md={3}>
                 <Person {...profile} sx={{ bgcolor: 'primaryDark.600' }} />
               </Grid>
             ))}
@@ -404,7 +404,7 @@ export default function Team() {
           </Typography>
           <Grid container spacing={2} mt={2}>
             {emeriti.map((profile) => (
-              <Grid key={profile.name} item xs={12} sm={6} md={3}>
+              <Grid key={profile.name} xs={12} sm={6} md={3}>
                 <Person {...profile} sx={{ bgcolor: 'primaryDark.600' }} />
               </Grid>
             ))}

docs/src/components/banner/AppFrameBanner.tsx

@@ -35,9 +35,9 @@ export default function AppFrameBanner() {
           fontWeight: 'medium',
           textWrap: 'nowrap',
           maxHeight: '34px',
-          backgroundColor: (theme.vars || theme).palette.primary[50],
+          backgroundColor: alpha(theme.palette.primary[50], 0.8),
           border: '1px solid',
-          borderColor: (theme.vars || theme).palette.grey[200],
+          borderColor: (theme.vars || theme).palette.divider,
           borderRadius: 1,
           transition: 'all 150ms ease',
           '&:hover, &:focus-visible': {
@@ -47,11 +47,10 @@ export default function AppFrameBanner() {
         }),
         (theme) =>
           theme.applyDarkStyles({
-            backgroundColor: alpha(theme.palette.primary[900], 0.2),
-            borderColor: (theme.vars || theme).palette.primaryDark[700],
+            backgroundColor: alpha(theme.palette.primary[900], 0.15),
             '&:hover, &:focus-visible': {
-              backgroundColor: alpha(theme.palette.primary[900], 0.6),
-              borderColor: (theme.vars || theme).palette.primary[800],
+              backgroundColor: alpha(theme.palette.primary[900], 0.4),
+              borderColor: (theme.vars || theme).palette.primary[900],
             },
           }),
       ]}

docs/src/components/home/DiamondSponsors.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useInView } from 'react-intersection-observer';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 import Paper from '@mui/material/Paper';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
@@ -46,8 +46,8 @@ export default function DiamondSponsors() {
         sx={(theme) => ({
           mt: 4,
           mb: 1.5,
-          background: `linear-gradient(90deg, ${(theme.vars || theme).palette.primary[400]} 50%, ${
-            (theme.vars || theme).palette.primary[700]
+          background: `linear-gradient(45deg, ${(theme.vars || theme).palette.primary[400]} 50%, ${
+            (theme.vars || theme).palette.primary[800]
           } 100%)`,
           WebkitBackgroundClip: 'text',
           WebkitTextFillColor: 'transparent',
@@ -57,12 +57,12 @@ export default function DiamondSponsors() {
       </Typography>
       <Grid container spacing={{ xs: 2, md: 3 }}>
         {DIAMONDs.map((item) => (
-          <Grid item key={item.name} xs={12} sm={6} md={4}>
+          <Grid key={item.name} xs={12} sm={6} md={4}>
             <SponsorCard logoSize={64} inView={inView} item={item} />
           </Grid>
         ))}
         {spotIsAvailable && (
-          <Grid item xs={12} sm={6} md={4}>
+          <Grid xs={12} sm={6} md={4}>
             <Paper
               variant="outlined"
               sx={{

docs/src/components/home/GoldSponsors.tsx

@@ -4,7 +4,7 @@ import Paper from '@mui/material/Paper';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import AddRounded from '@mui/icons-material/AddRounded';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 import SponsorCard from 'docs/src/components/home/SponsorCard';
 import { Link } from '@mui/docs/Link';
 import ROUTES from 'docs/src/route';
@@ -98,11 +98,11 @@ export default function GoldSponsors() {
       </Typography>
       <Grid container spacing={{ xs: 2, md: 3 }}>
         {GOLDs.map((item) => (
-          <Grid item key={item.name} xs={12} sm={6} md={4} lg={3}>
+          <Grid key={item.name} xs={12} sm={6} md={4} lg={3}>
             <SponsorCard inView={inView} item={item} />
           </Grid>
         ))}
-        <Grid item xs={12} sm={6} md={4} lg={3}>
+        <Grid xs={12} sm={6} md={4} lg={3}>
           <Paper
             variant="outlined"
             sx={{

docs/src/components/home/ValueProposition.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 import InvertColorsRoundedIcon from '@mui/icons-material/InvertColorsRounded';
 import HandymanRoundedIcon from '@mui/icons-material/HandymanRounded';
 import ArticleRoundedIcon from '@mui/icons-material/ArticleRounded';
@@ -51,7 +51,7 @@ export default function ValueProposition() {
       />
       <Grid container spacing={3}>
         {content.map(({ icon, title, description }) => (
-          <Grid key={title} item xs={12} sm={6} lg={3}>
+          <Grid key={title} xs={12} sm={6} lg={3}>
             <InfoCard title={title} icon={icon} description={description} />
           </Grid>
         ))}

docs/src/components/productBaseUI/BaseUISummary.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 import StyleRoundedIcon from '@mui/icons-material/StyleRounded';
 import AccessibilityNewRounded from '@mui/icons-material/AccessibilityNewRounded';
 import PhishingRoundedIcon from '@mui/icons-material/PhishingRounded';
@@ -50,7 +50,7 @@ export default function BaseUISummary() {
       <Box sx={{ mt: 6 }}>
         <Grid container spacing={3}>
           {content.map(({ icon, title, description, link }) => (
-            <Grid key={title} item xs={12} md={4}>
+            <Grid key={title} xs={12} md={4}>
               <InfoCard link={link} title={title} icon={icon} description={description} />
             </Grid>
           ))}