[docs-infra] Add small design polish (#42455)

mui · May 31, 2024 · 02ed105 · 02ed105
1 parent 9967463
commit 02ed105
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 76 deletions.
diff --git a/docs/pages/experiments/website/branding-theme-test.tsx b/docs/pages/experiments/website/branding-theme-test.tsx
@@ -52,6 +52,9 @@ export default function BrandingThemeTest() {
             <IconButton color="info">
               <GitHubIcon fontSize="small" />
             </IconButton>
+            <IconButton>
+              <GitHubIcon fontSize="small" />
+            </IconButton>
           </Stack>
         </Section>
         <Divider />

diff --git a/docs/src/modules/components/AppLayoutDocsFooter.js b/docs/src/modules/components/AppLayoutDocsFooter.js
@@ -21,28 +21,29 @@ import ThumbDownAltRoundedIcon from '@mui/icons-material/ThumbDownAltRounded';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import PanToolRoundedIcon from '@mui/icons-material/PanToolRounded';
+import ArrowOutwardRoundedIcon from '@mui/icons-material/ArrowOutwardRounded';
 import XIcon from '@mui/icons-material/X';
 import YouTubeIcon from '@mui/icons-material/YouTube';
 import RssFeedIcon from '@mui/icons-material/RssFeed';
-import ArrowOutwardRoundedIcon from '@mui/icons-material/ArrowOutwardRounded';
 import DiscordIcon from 'docs/src/icons/DiscordIcon';
 // Other imports
 import { Link } from '@mui/docs/Link';
 import PageContext from 'docs/src/modules/components/PageContext';
-import EditPage from 'docs/src/modules/components/EditPage';
 import SvgMuiLogotype from 'docs/src/icons/SvgMuiLogotype';
+import EditPage from 'docs/src/modules/components/EditPage';
 import { useUserLanguage, useTranslate } from '@mui/docs/i18n';
 import { getCookie, pageToTitleI18n } from 'docs/src/modules/utils/helpers';
 
-const FooterLink = styled(Typography)(({ theme }) => {
+const FooterLink = styled(Link)(({ theme }) => {
   return {
-    ...theme.typography.body2,
     display: 'flex',
     alignItems: 'center',
-    gap: 4,
-    fontWeight: (theme.vars || theme).typography.fontWeightSemiBold,
+    gap: 2,
+    fontFamily: (theme.vars || theme).typography.fontFamily,
+    fontSize: (theme.vars || theme).typography.pxToRem(13),
+    fontWeight: (theme.vars || theme).typography.fontWeightMedium,
     color: (theme.vars || theme).palette.primary[600],
-    '& > svg': { transition: '0.2s' },
+    '& > svg': { fontSize: '13px', transition: '0.2s' },
     '&:hover > svg': { transform: 'translateX(2px)' },
     ...theme.applyDarkStyles({
       color: (theme.vars || theme).palette.primary[300],
@@ -254,6 +255,8 @@ const EMPTY_SECTION = { hash: '', text: '' };
 // This dead code is here to simplify the creation of special feedback channel
 const SPEACIAL_FEEDBACK_HASH = [{ hash: 'new-docs-api-feedback', text: 'New API content design' }];
 
+const iconColor = 'grey.500';
+
 export default function AppLayoutDocsFooter(props) {
   const { tableOfContents = [], location } = props;
 
@@ -390,33 +393,28 @@ export default function AppLayoutDocsFooter(props) {
 
   return (
     <React.Fragment>
-      <Stack component="footer" direction="column" spacing={2.5} sx={{ my: 6 }}>
+      <Stack component="footer" direction="column" sx={{ my: 4 }}>
         <Stack
           direction={{ xs: 'column', sm: 'row' }}
           alignItems="center"
           justifyContent="space-between"
           spacing={{ xs: 3, sm: 1 }}
         >
           <EditPage sourceLocation={location} />
-          <Stack direction="row" alignItems="center" spacing={1} useFlexGap>
-            <Typography
-              id="feedback-message"
-              variant="body2"
-              fontWeight="medium"
-              color="text.secondary"
-            >
+          <Stack direction="row" alignItems="center" spacing={0.5} useFlexGap>
+            <Typography id="feedback-message" variant="body2" color="text.secondary">
               {t('feedbackMessage')}
             </Typography>
             <Tooltip title={t('feedbackYes')}>
-              <IconButton color="info" onClick={handleClickThumb(1)} aria-pressed={rating === 1}>
+              <IconButton onClick={handleClickThumb(1)} aria-pressed={rating === 1}>
                 <ThumbUpAltRoundedIcon
                   color={rating === 1 ? 'primary' : undefined}
                   sx={{ fontSize: 15 }}
                 />
               </IconButton>
             </Tooltip>
             <Tooltip title={t('feedbackNo')}>
-              <IconButton color="info" onClick={handleClickThumb(0)} aria-pressed={rating === 0}>
+              <IconButton onClick={handleClickThumb(0)} aria-pressed={rating === 0}>
                 <ThumbDownAltRoundedIcon
                   color={rating === 0 ? 'error' : undefined}
                   sx={{ fontSize: 15 }}
@@ -433,6 +431,7 @@ export default function AppLayoutDocsFooter(props) {
             onEntered={handleEntered}
             timeout={{ enter: 0, exit: theme.transitions.duration.standard }}
           >
+            <Divider sx={{ my: 2, borderStyle: 'dashed' }} />
             {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
             <form
               aria-labelledby="feedback-message"
@@ -454,7 +453,7 @@ export default function AppLayoutDocsFooter(props) {
                     }}
                   />
                 ) : (
-                  <Typography variant="body2" id="feedback-description" color="text.secondary">
+                  <Typography id="feedback-description" color="text.secondary">
                     {rating === 1 ? t('feedbackMessageUp') : t('feedbackMessageDown')}
                   </Typography>
                 )}
@@ -463,7 +462,7 @@ export default function AppLayoutDocsFooter(props) {
                   margin="dense"
                   name="comment"
                   fullWidth
-                  rows={4}
+                  rows={2}
                   value={comment}
                   onChange={handleChangeTextfield}
                   inputProps={{
@@ -507,9 +506,9 @@ export default function AppLayoutDocsFooter(props) {
             </form>
           </Collapse>
         </div>
-        <Divider />
+        <Divider sx={{ my: 2 }} />
         {hidePagePagination ? null : (
-          <Stack direction="row" justifyContent="space-between" sx={{ my: 2 }}>
+          <Stack direction="row" justifyContent="space-between">
             {prevPage !== null ? (
               <Button
                 size="small"
@@ -541,53 +540,49 @@ export default function AppLayoutDocsFooter(props) {
             ) : null}
           </Stack>
         )}
-        <Divider />
+        <Divider sx={{ my: 2 }} />
         <Stack
           direction={{ xs: 'column', sm: 'row' }}
           alignItems="center"
           spacing={{ xs: 3, sm: 1 }}
         >
-          <Stack direction="row" alignItems="center" spacing={1.2} useFlexGap sx={{ flexGrow: 1 }}>
+          <Stack direction="row" alignItems="center" spacing={1} useFlexGap sx={{ flexGrow: 1 }}>
             <Link href="https://mui.com/" aria-label="Go to homepage">
-              <SvgMuiLogotype height={24} width={72} />
+              <SvgMuiLogotype height={28} width={64} />
             </Link>
             <Typography color="grey.500" fontSize={13} sx={{ opacity: '70%' }}>
               &bull;
             </Typography>
-            <Link href="https://mui.com/blog/" target="_blank" rel="noopener">
-              <FooterLink>
-                Blog <ArrowOutwardRoundedIcon sx={{ fontSize: 14 }} />
-              </FooterLink>
-            </Link>
+            <FooterLink href="https://mui.com/blog/" target="_blank" rel="noopener">
+              Blog <ArrowOutwardRoundedIcon />
+            </FooterLink>
             <Typography color="grey.500" fontSize={13} sx={{ opacity: '70%' }}>
               &bull;
             </Typography>
-            <Link href="https://mui.com/store/" target="_blank" rel="noopener">
-              <FooterLink>
-                Store <ArrowOutwardRoundedIcon sx={{ fontSize: 14 }} />
-              </FooterLink>
-            </Link>
+            <FooterLink href="https://mui.com/store/" target="_blank" rel="noopener">
+              Store <ArrowOutwardRoundedIcon />
+            </FooterLink>
           </Stack>
           <Stack spacing={1} direction="row" useFlexGap>
             <IconButton
               target="_blank"
               rel="noopener"
-              href="https://mui.com/feed/blog/rss.xml"
-              aria-label="RSS Feed"
-              title="RSS Feed"
+              href="https://twitter.com/MUI_hq"
+              aria-label="twitter"
+              title="X"
               size="small"
             >
-              <RssFeedIcon fontSize="small" sx={{ color: 'grey.500' }} />
+              <XIcon fontSize="small" sx={{ color: iconColor }} />
             </IconButton>
             <IconButton
               target="_blank"
               rel="noopener"
-              href="https://twitter.com/MUI_hq"
-              aria-label="twitter"
-              title="X"
+              href="https://mui.com/r/discord/"
+              aria-label="Discord"
+              title="Discord"
               size="small"
             >
-              <XIcon fontSize="small" sx={{ color: 'grey.500' }} />
+              <DiscordIcon fontSize="small" sx={{ color: iconColor }} />
             </IconButton>
             <IconButton
               target="_blank"
@@ -597,17 +592,17 @@ export default function AppLayoutDocsFooter(props) {
               title="YouTube"
               size="small"
             >
-              <YouTubeIcon fontSize="small" sx={{ color: 'grey.500' }} />
+              <YouTubeIcon fontSize="small" sx={{ color: iconColor }} />
             </IconButton>
             <IconButton
               target="_blank"
               rel="noopener"
-              href="https://mui.com/r/discord/"
-              aria-label="Discord"
-              title="Discord"
+              href="https://mui.com/feed/blog/rss.xml"
+              aria-label="RSS Feed"
+              title="RSS Feed"
               size="small"
             >
-              <DiscordIcon fontSize="small" sx={{ color: 'grey.500' }} />
+              <RssFeedIcon fontSize="small" sx={{ color: iconColor }} />
             </IconButton>
           </Stack>
         </Stack>

diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
@@ -63,7 +63,7 @@ const Item = styled(
         marginTop: theme.spacing(1),
         textTransform: 'uppercase',
         letterSpacing: '.1rem',
-        fontWeight: theme.typography.fontWeightBold,
+        fontWeight: theme.typography.fontWeightSemiBold,
         fontSize: theme.typography.pxToRem(11),
         '&::before': {
           content: '""',
@@ -144,7 +144,7 @@ const Item = styled(
     theme.applyDarkStyles({
       ...color,
       '&::before': {
-        background: alpha(theme.palette.primaryDark[500], 0.3),
+        background: (theme.vars || theme).palette.primaryDark[700],
       },
       '&.app-drawer-active': {
         color: (theme.vars || theme).palette.primary[300],
@@ -159,7 +159,7 @@ const Item = styled(
       },
       ...(subheader && {
         '&::before': {
-          background: alpha(theme.palette.primaryDark[700], 0.6),
+          background: (theme.vars || theme).palette.primaryDark[700],
         },
         '&::after': {
           background: alpha(theme.palette.primaryDark[700], 0.8),

diff --git a/docs/src/modules/components/AppSettingsDrawer.js b/docs/src/modules/components/AppSettingsDrawer.js
@@ -20,7 +20,7 @@ import { useTranslate } from '@mui/docs/i18n';
 
 const Heading = styled(Typography)(({ theme }) => ({
   margin: '16px 0 8px',
-  fontWeight: theme.typography.fontWeightBold,
+  fontWeight: theme.typography.fontWeightSemiBold,
   fontSize: theme.typography.pxToRem(11),
   textTransform: 'uppercase',
   letterSpacing: '.1rem',

diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js
@@ -32,7 +32,7 @@ const Nav = styled('nav')(({ theme }) => ({
 const NavLabel = styled(Typography)(({ theme }) => ({
   padding: theme.spacing(1, 0, 1, 1.4),
   fontSize: theme.typography.pxToRem(11),
-  fontWeight: theme.typography.fontWeightBold,
+  fontWeight: theme.typography.fontWeightSemiBold,
   textTransform: 'uppercase',
   letterSpacing: '.1rem',
   color: (theme.vars || theme).palette.text.tertiary,

diff --git a/docs/src/modules/components/DiamondSponsors.js b/docs/src/modules/components/DiamondSponsors.js
@@ -31,7 +31,7 @@ const NativeLink = styled('a')(({ theme }) => ({
   ...theme.applyDarkStyles({
     boxShadow: `${alpha(theme.palette.primaryDark[600], 0.1)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset`,
     '&:hover': {
-      backgroundColor: (theme.vars || theme).palette.primaryDark[800],
+      backgroundColor: alpha(theme.palette.primary[800], 0.2),
       borderColor: (theme.vars || theme).palette.primary[900],
     },
   }),

diff --git a/docs/src/modules/components/EditPage.js b/docs/src/modules/components/EditPage.js
@@ -24,7 +24,7 @@ export default function EditPage(props) {
     <Button
       component="a"
       size="small"
-      variant="outlined"
+      variant="text"
       color="secondary"
       startIcon={<GitHubIcon sx={{ mr: 0.5 }} />}
       href={
@@ -40,7 +40,6 @@ export default function EditPage(props) {
       data-ga-event-category={userLanguage === 'en' ? undefined : 'l10n'}
       data-ga-event-action={userLanguage === 'en' ? undefined : 'edit-button'}
       data-ga-event-label={userLanguage === 'en' ? undefined : userLanguage}
-      sx={{ '&:hover > span': { transform: 'translateX(-2px)' } }}
     >
       {t('editPage')}
     </Button>

diff --git a/packages/mui-docs/src/MarkdownElement/MarkdownElement.tsx b/packages/mui-docs/src/MarkdownElement/MarkdownElement.tsx
@@ -549,7 +549,7 @@ const Root = styled('div')(
       border: '1px solid',
       borderColor: alpha(lightTheme.palette.primaryDark[600], 0.5),
       backgroundColor: alpha(lightTheme.palette.primaryDark[800], 0.5),
-      color: `var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`,
+      color: `var(--muidocs-palette-grey-300, ${lightTheme.palette.grey[300]})`,
       transition: theme.transitions.create(['background', 'borderColor', 'display'], {
         duration: theme.transitions.duration.shortest,
       }),