[docs-infra] Add batch of design polish (mui#42823)

joserodolfofreitas · Jul 29, 2024 · 2c64e67 · 2c64e67
1 parent 64719d2
commit 2c64e67
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 19 deletions.
diff --git a/docs/src/modules/components/AppLayoutDocsFooter.js b/docs/src/modules/components/AppLayoutDocsFooter.js
@@ -407,16 +407,14 @@ export default function AppLayoutDocsFooter(props) {
             <Tooltip title={t('feedbackYes')}>
               <IconButton onClick={handleClickThumb(1)} aria-pressed={rating === 1}>
                 <ThumbUpAltRoundedIcon
-                  color={rating === 1 ? 'primary' : undefined}
-                  sx={{ fontSize: 15 }}
+                  sx={{ fontSize: 15, color: rating === 1 ? 'primary' : 'text.secondary' }}
                 />
               </IconButton>
             </Tooltip>
             <Tooltip title={t('feedbackNo')}>
               <IconButton onClick={handleClickThumb(0)} aria-pressed={rating === 0}>
                 <ThumbDownAltRoundedIcon
-                  color={rating === 0 ? 'error' : undefined}
-                  sx={{ fontSize: 15 }}
+                  sx={{ fontSize: 15, color: rating === 0 ? 'error' : 'text.secondary' }}
                 />
               </IconButton>
             </Tooltip>

diff --git a/docs/src/modules/components/ComponentPageTabs.js b/docs/src/modules/components/ComponentPageTabs.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useRouter } from 'next/router';
-import { styled } from '@mui/material/styles';
+import { styled, alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
 import { Link } from '@mui/docs/Link';
@@ -98,12 +98,13 @@ export default function ComponentPageTabs(props) {
       <Box
         component="nav"
         className="component-tabs"
-        sx={{
+        sx={(theme) => ({
+          width: '100%',
           position: 'sticky',
           top: 57, // to be positioned below the app bar
           mt: 2,
-          mx: { xs: -2, sm: -1 },
-          backgroundColor: 'background.default',
+          backdropFilter: 'blur(8px)',
+          backgroundColor: 'rgba(255,255,255,0.8)',
           borderBottom: 1,
           borderColor: 'divider',
           zIndex: 1000,
@@ -119,7 +120,10 @@ export default function ComponentPageTabs(props) {
             height: '2px',
             backgroundColor: 'primary.light',
           },
-        }}
+          ...theme.applyDarkStyles({
+            backgroundColor: alpha(theme.palette.primaryDark[900], 0.7),
+          }),
+        })}
       >
         {linkTabData.map((linkTab) => (
           <LinkTab

diff --git a/docs/src/modules/components/HighlightedCodeWithTabs.tsx b/docs/src/modules/components/HighlightedCodeWithTabs.tsx
@@ -259,11 +259,11 @@ export const CodeTab = styled(TabBase)<{ ownerState: { mounted: boolean; contain
     ],
     ...theme.unstable_sx({
       height: 26,
-      p: '0 8px 2px 8px',
+      p: '2px 8px',
       bgcolor: 'transparent',
       lineHeight: 1.2,
       outline: 'none',
-      minWidth: 52,
+      minWidth: 45,
       cursor: 'pointer',
       borderRadius: 99,
       position: 'relative',

diff --git a/packages/mui-docs/src/MarkdownElement/MarkdownElement.tsx b/packages/mui-docs/src/MarkdownElement/MarkdownElement.tsx
@@ -194,11 +194,16 @@ const Root = styled('div')(
         marginLeft: 8,
         height: 26,
         width: 26,
-        backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.grey[50]})`,
         color: `var(--muidocs-palette-grey-600, ${lightTheme.palette.grey[600]})`,
-        border: '1px solid',
-        borderColor: `var(--muidocs-palette-divider, ${lightTheme.palette.divider})`,
+        backgroundColor: 'transparent',
+        border: '1px solid transparent',
         borderRadius: 8,
+        transition: theme.transitions.create(
+          ['visibility', 'background-color', 'color', 'border-color'],
+          {
+            duration: theme.transitions.duration.shortest,
+          },
+        ),
         '&:hover': {
           backgroundColor: alpha(lightTheme.palette.primary[100], 0.4),
           borderColor: `var(--muidocs-palette-primary-100, ${lightTheme.palette.primary[100]})`,
@@ -218,7 +223,7 @@ const Root = styled('div')(
       '& .comment-link': {
         display: 'none', // So we can have the comment button opt-in.
         marginLeft: 'auto',
-        transition: theme.transitions.create('opacity', {
+        transition: theme.transitions.create(['background-color', 'color', 'border-color'], {
           duration: theme.transitions.duration.shortest,
         }),
         '& svg': {
@@ -547,7 +552,6 @@ const Root = styled('div')(
       display: 'inline-flex',
       flexDirection: 'row-reverse',
       alignItems: 'center',
-      height: 24,
       padding: theme.spacing(0.5),
       paddingBottom: '5px', // optical alignment
       fontFamily: lightTheme.typography.fontFamily,
@@ -678,9 +682,7 @@ const Root = styled('div')(
       '& h1, & h2, & h3, & h4, & h5': {
         color: `var(--muidocs-palette-grey-50, ${darkTheme.palette.grey[50]})`,
         '& .anchor-icon, & .comment-link': {
-          color: `var(--muidocs-palette-primary-300, ${darkTheme.palette.primaryDark[300]})`,
-          borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
-          backgroundColor: alpha(darkTheme.palette.primaryDark[700], 0.5),
+          color: `var(--muidocs-palette-primary-300, ${darkTheme.palette.primaryDark[400]})`,
           '&:hover': {
             color: `var(--muidocs-palette-primary-100, ${darkTheme.palette.primary[100]})`,
             borderColor: `var(--muidocs-palette-primary-900, ${darkTheme.palette.primary[900]})`,