[website] Refine button design and other details

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/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>
           ))}

docs/src/components/productDesignKit/DesignKitValues.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 Palette from '@mui/icons-material/Palette';
 import LibraryBooks from '@mui/icons-material/LibraryBooks';
 import CodeRounded from '@mui/icons-material/CodeRounded';
@@ -41,7 +41,7 @@ function DesignKitValues() {
       </Typography>
       <Grid container spacing={3}>
         {content.map(({ icon, title, description }) => (
-          <Grid key={title} item xs={12} sm={6} md={4}>
+          <Grid key={title} xs={12} sm={6} md={4}>
             <InfoCard title={title} icon={icon} description={description} />
           </Grid>
         ))}

docs/src/layouts/AppFooter.tsx

@@ -53,7 +53,7 @@ export default function AppFooter(props: AppFooterProps) {
           <Link prefetch={false} href="/" aria-label="Go to homepage" sx={{ mb: 2 }}>
             <SvgMuiLogotype height={28} width={91} />
           </Link>
-          <Typography variant="body2" fontWeight="bold" gutterBottom>
+          <Typography variant="body2" fontWeight="semiBold" gutterBottom>
             Keep up to date
           </Typography>
           <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
@@ -70,7 +70,7 @@ export default function AppFooter(props: AppFooterProps) {
           }}
         >
           <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-            <Typography fontWeight="bold" variant="body2" sx={{ mb: 0.5 }}>
+            <Typography fontWeight="semiBold" variant="body2" sx={{ mb: 0.5 }}>
               Products
             </Typography>
             <Link prefetch={false} href={ROUTES.productMaterial}>
@@ -93,7 +93,7 @@ export default function AppFooter(props: AppFooterProps) {
             </Link>
           </Box>
           <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-            <Typography fontWeight="bold" variant="body2" sx={{ mb: 0.5 }}>
+            <Typography fontWeight="semiBold" variant="body2" sx={{ mb: 0.5 }}>
               Resources
             </Typography>
             <Link prefetch={false} href={ROUTES.materialIcons}>
@@ -113,7 +113,7 @@ export default function AppFooter(props: AppFooterProps) {
             </Link>
           </Box>
           <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-            <Typography fontWeight="bold" variant="body2" sx={{ mb: 0.5 }}>
+            <Typography fontWeight="semiBold" variant="body2" sx={{ mb: 0.5 }}>
               Explore
             </Typography>
             <Link prefetch={false} href={ROUTES.documentation}>
@@ -133,7 +133,7 @@ export default function AppFooter(props: AppFooterProps) {
             </Link>
           </Box>
           <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-            <Typography fontWeight="bold" variant="body2" sx={{ mb: 0.5 }}>
+            <Typography fontWeight="semiBold" variant="body2" sx={{ mb: 0.5 }}>
               Company
             </Typography>
             <Link prefetch={false} href={ROUTES.about}>

docs/src/modules/components/AppSearch.js

@@ -54,7 +54,7 @@ const SearchButton = styled('button')(({ theme }) => [
     cursor: 'pointer',
     transitionProperty: 'all',
     transitionDuration: '150ms',
-    boxShadow: `inset 0 -1px 1px ${(theme.vars || theme).palette.grey[100]}, 0 1px 0.5px ${alpha(
+    boxShadow: `inset 0 -1px 0 ${(theme.vars || theme).palette.grey[100]}, 0 1px 0.5px ${alpha(
       theme.palette.grey[100],
       0.6,
     )}`,

docs/src/modules/components/AppSettingsDrawer.js

@@ -66,14 +66,25 @@ export default function AppSettingsDrawer(props) {
       open={open}
       PaperProps={{
         elevation: 0,
-        sx: { width: { xs: 310, sm: 360 }, borderRadius: '10px 0px 0px 10px' },
+        sx: {
+          width: { xs: 310, sm: 360 },
+          borderRadius: '10px 0px 0px 10px',
+          border: '1px solid',
+          borderColor: 'divider',
+        },
       }}
       {...other}
     >
       <Box
-        sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', p: (1, 2) }}
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          px: 2,
+          py: 1,
+        }}
       >
-        <Typography variant="body1" fontWeight="500">
+        <Typography variant="body1" fontWeight="medium">
           {t('settings.settings')}
         </Typography>
         <IconButton color="inherit" onClick={onClose} edge="end" aria-label={t('close')}>
@@ -157,8 +168,8 @@ export default function AppSettingsDrawer(props) {
           href="/material-ui/customization/color/#playground"
           data-ga-event-category="settings"
           data-ga-event-action="colors"
-          size="medium"
           variant="outlined"
+          size="small"
           fullWidth
         >
           {t('settings.editDocsColors')}