[website] Polish some pages and stray components (#40797)

mui · Jan 29, 2024 · 0492cf2 · 0492cf2
1 parent 4ee5046
commit 0492cf2
Show file tree

Hide file tree

Showing 25 changed files with 272 additions and 416 deletions.
diff --git a/docs/data/material/getting-started/faq/faq.md b/docs/data/material/getting-started/faq/faq.md
@@ -14,7 +14,7 @@ There are many ways to support us:
 - **Help new users**. You can answer questions on
   [Stack Overflow](https://stackoverflow.com/questions/tagged/material-ui).
 - **Make changes happen**.
-  - Edit the documentation. Every page has an "Edit this page" link in the top right.
+  - Edit the documentation. At the bottom of every page, you can find an "Edit this page" button.
   - Report bugs or missing features by [creating an issue](https://github.com/mui/material-ui/issues/new).
   - Review and comment on existing [pull requests](https://github.com/mui/material-ui/pulls) and [issues](https://github.com/mui/material-ui/issues).
   - [Improve our documentation](https://github.com/mui/material-ui/tree/HEAD/docs), fix bugs, or add features by [submitting a pull request](https://github.com/mui/material-ui/pulls).

diff --git a/docs/pages/core.tsx b/docs/pages/core.tsx
@@ -5,10 +5,9 @@ import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
 import AppHeader from 'docs/src/layouts/AppHeader';
 import CoreHero from 'docs/src/components/productCore/CoreHero';
 import CoreProducts from 'docs/src/components/productCore/CoreProducts';
-import CoreHeroEnd from 'docs/src/components/productCore/CoreHeroEnd';
-import References, { CORE_CUSTOMERS } from 'docs/src/components/home/References';
 import AppFooter from 'docs/src/layouts/AppFooter';
 import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
+import Testimonials from 'docs/src/components/home/Testimonials';
 
 export default function Core() {
   return (
@@ -24,9 +23,7 @@ export default function Core() {
         <CoreHero />
         <CoreProducts />
         <Divider />
-        <References companies={CORE_CUSTOMERS} />
-        <Divider />
-        <CoreHeroEnd />
+        <Testimonials />
         <Divider />
       </main>
       <AppFooter stackOverflowUrl="https://stackoverflow.com/questions/tagged/material-ui" />

diff --git a/docs/pages/material-ui.tsx b/docs/pages/material-ui.tsx
@@ -9,7 +9,7 @@ import MaterialTheming from 'docs/src/components/productMaterial/MaterialTheming
 import MaterialStyling from 'docs/src/components/productMaterial/MaterialStyling';
 import MaterialTemplates from 'docs/src/components/productMaterial/MaterialTemplates';
 import MaterialDesignKits from 'docs/src/components/productMaterial/MaterialDesignKits';
-import CoreHeroEnd from 'docs/src/components/productCore/CoreHeroEnd';
+import MaterialEnd from 'docs/src/components/productMaterial/MaterialEnd';
 import References, { CORE_CUSTOMERS } from 'docs/src/components/home/References';
 import AppFooter from 'docs/src/layouts/AppFooter';
 import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
@@ -38,7 +38,7 @@ export default function Core() {
         <Divider />
         <MaterialDesignKits />
         <Divider />
-        <CoreHeroEnd />
+        <MaterialEnd />
         <Divider />
       </main>
       <AppFooter stackOverflowUrl="https://stackoverflow.com/questions/tagged/material-ui" />

diff --git a/docs/src/components/action/Frame.tsx b/docs/src/components/action/Frame.tsx
@@ -34,6 +34,7 @@ const FrameInfo = React.forwardRef<HTMLDivElement, BoxProps>(function FrameInfo(
         bgcolor: 'common.black',
         border: '1px solid',
         borderColor: 'primaryDark.700',
+        borderTop: 0,
         colorScheme: 'dark',
         '* pre, code': {
           bgcolor: 'common.black',

diff --git a/docs/src/components/action/StylingInfo.tsx b/docs/src/components/action/StylingInfo.tsx
@@ -41,7 +41,6 @@ export default function StylingInfo({
         right: 0,
         px: 2,
         pt: 1,
-        pb: 2,
         background: ({ palette }) => alpha(palette.common.black, 0.5),
         backdropFilter: 'blur(8px)',
         zIndex: 1,
@@ -58,7 +57,7 @@ export default function StylingInfo({
           position: 'absolute',
           zIndex: 2,
           transition: '0.3s',
-          right: 10,
+          right: 16,
           bottom: '100%',
           transform: hidden || !appeared ? 'translateY(-10px)' : 'translateY(50%)',
           opacity: appeared ? 1 : 0,

diff --git a/docs/src/components/animation/FlashCode.tsx b/docs/src/components/animation/FlashCode.tsx
@@ -20,7 +20,7 @@ const FlashCode = styled('div', {
       : alpha(theme.palette.primary.main, 0.1),
     border: '1px solid',
     borderColor: (theme.vars || theme).palette.primary.dark,
-    zIndex: 1,
+    zIndex: 2,
   }),
 );
 

diff --git a/docs/src/components/home/AdvancedShowcase.tsx b/docs/src/components/home/AdvancedShowcase.tsx
@@ -1681,10 +1681,6 @@ const rows = [
 export default function DataTable() {
   return (
     <ShowcaseContainer
-      sx={{ mt: { md: 2 } }}
-      previewSx={{
-        py: 2,
-      }}
       preview={
         <Paper
           variant="outlined"
@@ -1719,7 +1715,6 @@ export default function DataTable() {
       code={
         <Box
           sx={{
-            p: 2,
             overflow: 'auto',
             flexGrow: 1,
             '&::-webkit-scrollbar': {

diff --git a/docs/src/components/home/CoreShowcase.tsx b/docs/src/components/home/CoreShowcase.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
+import { alpha, ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Button, { buttonClasses } from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
@@ -13,18 +13,14 @@ import StylingInfo from 'docs/src/components/action/StylingInfo';
 import FlashCode from 'docs/src/components/animation/FlashCode';
 
 const lineMapping: Record<string, number | number[]> = {
-  avatar: 2,
-  divider: 13,
-  chip: 20,
-  stack: 3,
-  iconButton: 9,
   card: 0,
-  switch: 21,
-  editIcon: 10,
-  typography: 4,
-  typography2: 5,
-  locationOnIcon: 6,
-  stack2: [14, 19],
+  stack: [1, 17],
+  avatar: 2,
+  stack2: [4, 11],
+  chip: [6, 10],
+  typography: 5,
+  typography2: [12, 14],
+  switch: 16,
 };
 
 export default function CoreShowcase() {
@@ -45,7 +41,7 @@ export default function CoreShowcase() {
               },
             },
             shape: {
-              borderRadius: 10,
+              borderRadius: 12,
             },
             shadows: ['none', '0px 4px 20px 0px hsla(210, 14%, 28%, 0.2)'],
             components: {
@@ -54,67 +50,47 @@ export default function CoreShowcase() {
                   root: {
                     boxShadow:
                       mode === 'dark'
-                        ? '0px 4px 30px rgba(29, 29, 29, 0.6)'
-                        : '0px 4px 20px rgba(61, 71, 82, 0.2)',
+                        ? '0px 4px 12px rgba(0, 0, 0, 0.4)'
+                        : '0px 4px 12px rgba(61, 71, 82, 0.1)',
                     backgroundColor:
                       mode === 'dark' ? globalTheme.palette.primaryDark[800] : '#fff',
                     border: '1px solid',
                     borderColor:
                       mode === 'dark'
-                        ? globalTheme.palette.primaryDark[600]
+                        ? globalTheme.palette.primaryDark[700]
                         : globalTheme.palette.grey[200],
                   },
                 },
               },
               MuiAvatar: {
                 styleOverrides: {
                   root: {
-                    width: 60,
-                    height: 60,
+                    width: 50,
+                    height: 50,
                     borderRadius: 99,
                   },
                 },
               },
-              MuiIconButton: {
-                styleOverrides: {
-                  root: {
-                    border: '1px solid',
-                    borderColor:
-                      mode === 'dark'
-                        ? globalTheme.palette.primaryDark[500]
-                        : globalTheme.palette.grey[200],
-                    color:
-                      mode === 'dark'
-                        ? globalTheme.palette.grey[200]
-                        : globalTheme.palette.grey[800],
-                    borderRadius: 10,
-                    '&:hover, &.Mui-focusVisible': {
-                      borderColor: globalTheme.palette.primary.main,
-                      color: globalTheme.palette.primary.main,
-                    },
-                  },
-                },
-              },
               MuiSwich: globalTheme.components?.MuiSwitch,
               MuiChip: {
                 styleOverrides: {
                   filled: {
-                    fontWeight: 700,
+                    fontWeight: 'medium',
                     '&.MuiChip-colorSuccess': {
                       backgroundColor:
                         mode === 'dark'
-                          ? globalTheme.palette.success[800]
+                          ? globalTheme.palette.success[900]
                           : globalTheme.palette.success[100],
                       color:
                         mode === 'dark'
                           ? globalTheme.palette.success[100]
-                          : globalTheme.palette.success[800],
+                          : globalTheme.palette.success[900],
                     },
                     '&.MuiChip-colorDefault': {
                       backgroundColor:
                         mode === 'dark'
-                          ? globalTheme.palette.primaryDark[600]
-                          : globalTheme.palette.grey[200],
+                          ? globalTheme.palette.primaryDark[700]
+                          : globalTheme.palette.grey[100],
                       color:
                         mode === 'dark'
                           ? globalTheme.palette.grey[200]
@@ -137,11 +113,6 @@ export default function CoreShowcase() {
   }
   return (
     <ShowcaseContainer
-      sx={{ mt: { md: 2 } }}
-      previewSx={{
-        minHeight: 220,
-        pb: 4,
-      }}
       preview={
         <React.Fragment>
           <Box
@@ -158,12 +129,14 @@ export default function CoreShowcase() {
           >
             <Typography
               variant="caption"
-              fontWeight={500}
+              fontWeight="medium"
               color="text.primary"
               noWrap
-              sx={{ opacity: 0.5 }}
+              sx={{ opacity: 0.3 }}
             >
-              <TouchAppRounded sx={{ fontSize: '0.875rem', verticalAlign: 'text-bottom' }} />
+              <TouchAppRounded
+                sx={{ fontSize: '0.875rem', verticalAlign: 'text-bottom', mr: 0.5 }}
+              />
               Hover over the component to highlight the code.
             </Typography>
           </Box>
@@ -172,7 +145,7 @@ export default function CoreShowcase() {
               onElementChange={setElement}
               sx={{ minWidth: 300, width: '80%', maxWidth: '100%' }}
             >
-              <MaterialDesignDemo sx={{ transform: 'translate(0, -8px)' }} />
+              <MaterialDesignDemo />
             </PointerContainer>
           </ThemeProvider>
         </React.Fragment>
@@ -181,9 +154,10 @@ export default function CoreShowcase() {
         <div data-mui-color-scheme="dark">
           <Box
             sx={{
-              p: { xs: 2, sm: 1 },
+              pb: 1.5,
               display: 'flex',
               alignItems: 'center',
+              gap: 1,
               right: 0,
               zIndex: 10,
               [`& .${buttonClasses.root}`]: {
@@ -192,32 +166,25 @@ export default function CoreShowcase() {
                 fontSize: '0.75rem',
                 lineHeight: 18 / 12,
               },
-              [`& .${buttonClasses.outlined}`]: {
-                color: '#fff',
-                backgroundColor: 'primary.700',
-                borderColor: 'primary.500',
-                '&:hover': {
-                  backgroundColor: 'primary.700',
-                },
-              },
-              [`& .${buttonClasses.text}`]: {
-                color: 'grey.400',
+              '& .MuiButton-outlinedPrimary': {
+                backgroundColor: alpha(globalTheme.palette.primary[900], 0.5),
               },
             }}
           >
             <Button
               size="small"
-              variant={customized ? 'text' : 'outlined'}
+              variant="outlined"
+              color={customized ? 'secondary' : 'primary'}
               onClick={() => {
                 setCustomized(false);
               }}
-              sx={{ ml: 0 }}
             >
               Material Design
             </Button>
             <Button
               size="small"
-              variant={customized ? 'outlined' : 'text'}
+              variant="outlined"
+              color={customized ? 'primary' : 'secondary'}
               onClick={() => {
                 setCustomized(true);
               }}
@@ -227,9 +194,8 @@ export default function CoreShowcase() {
           </Box>
           <Box
             sx={{
-              p: 2,
-              pt: 0,
-              overflow: 'hidden',
+              position: 'relative',
+              overflow: 'clip',
               flexGrow: 1,
               '&::-webkit-scrollbar': {
                 display: 'none',
@@ -245,16 +211,14 @@ export default function CoreShowcase() {
             }}
           >
             <Box sx={{ position: 'relative' }}>
-              {startLine !== undefined && (
-                <FlashCode startLine={startLine} endLine={endLine} sx={{ mx: -2 }} />
-              )}
+              {startLine !== undefined && <FlashCode startLine={startLine} endLine={endLine} />}
               <HighlightedCode
                 copyButtonHidden
                 component={MarkdownElement}
                 code={componentCode}
                 language="jsx"
               />
-              <StylingInfo appeared={customized} sx={{ mb: -2, mx: -2 }} />
+              <StylingInfo appeared={customized} sx={{ mb: 0, mx: -2 }} />
             </Box>
           </Box>
         </div>

diff --git a/docs/src/components/home/DesignSystemComponents.tsx b/docs/src/components/home/DesignSystemComponents.tsx
@@ -35,6 +35,7 @@ export default function DesignSystemComponents() {
   return (
     <Section ref={ref} cozy>
       <SectionHeadline
+        alwaysCenter
         overline="Production-ready components"
         title={
           <Typography variant="h2">

diff --git a/docs/src/components/home/MaterialDesignComponents.tsx b/docs/src/components/home/MaterialDesignComponents.tsx
@@ -529,9 +529,9 @@ export default function MaterialDesignComponents() {
       <Box
         sx={{
           mt: { xs: 2, md: 2 },
-          mb: 2,
+          mb: 4,
           display: 'flex',
-          justifyContent: 'start',
+          justifyContent: 'center',
         }}
       >
         <StyledChip