Merge pull request #1217 from kp0zhiqian/improve-doc-site-styles

Improve the styles of the doc site

Author: Hyperkid123

packages/react-renderer-demo/src/components/code-editor/index.js

@@ -12,11 +12,13 @@ const StyledPre = styled('pre')({
     maxWidth: '100vw',
     textAlign: 'left',
     margin: '1em 0',
-    padding: '0.5em',
+    padding: '1em',
     overflow: 'auto',
+    borderRadius: 4,
+    fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace',
     '& .token-line': {
-      lineHeight: '1.3em',
-      height: '1.3em',
+      lineHeight: '1.5em',
+      height: '1.5em',
     },
   },
 });

packages/react-renderer-demo/src/components/code-example.js

@@ -6,8 +6,9 @@ import Typography from '@mui/material/Typography';
 import Link from '@mui/material/Link';
 import Box from '@mui/material/Box';
 import CodeIcon from '@mui/icons-material/Code';
+import CodeOffIcon from '@mui/icons-material/CodeOff';
 import Accordion from '@mui/material/Accordion';
-import AccordionSummary from '@mui/material/AccordionSummary';
+import MuiAccordionSummary from '@mui/material/AccordionSummary';
 import PropTypes from 'prop-types';
 import AccordionDetails from '@mui/material/AccordionDetails';
 import Paper from '@mui/material/Paper';
@@ -159,7 +160,32 @@ const getPayload = (code, sourceFiles = {}) =>
       },
     },
   });
-
+const AccordionSummary = styled((props) => {
+  const [codeExpand, setCodeExpand] = useState(false);
+  return (
+    <MuiAccordionSummary
+      sx={{
+        pointerEvents: 'none',
+      }}
+      expandIcon={
+        <Tooltip title="Expand code example">
+          <IconButton size="small" display="flex" sx={{ pointerEvents: 'auto' }} onClick={() => setCodeExpand(!codeExpand)}>
+            {codeExpand ? <CodeOffIcon /> : <CodeIcon />}
+          </IconButton>
+        </Tooltip>
+      }
+      {...props}
+    />
+  );
+})(({ theme }) => ({
+  flexDirection: 'row',
+  '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
+    transform: 'none',
+  },
+  '& .MuiAccordionSummary-content': {
+    flexDirection: 'row-reverse',
+  },
+}));
 const CodeExample = ({ source, mode }) => {
   const [name, setName] = useState('');
   const [codeSource, setCodeSource] = useState('');
@@ -182,28 +208,32 @@ const CodeExample = ({ source, mode }) => {
   if (mode === 'preview') {
     return (
       <ExampleRoot container spacing={0} className={clsx('DocRawComponent', 'container')}>
+        {Component && (
+          <Heading component="h3" level="5">
+            {name}
+          </Heading>
+        )}
+        {Component && (
+          <Grid className={'formContainer'} item xs={12}>
+            <Paper className={'componentPanel'}>
+              <Component />
+            </Paper>
+          </Grid>
+        )}
         <Grid item xs={12}>
           <Accordion className={'accordion'}>
-            <AccordionSummary
-              className={'accordionSummary'}
-              expandIcon={
-                <Tooltip title="Expand code example">
-                  <IconButton size="large">
-                    <CodeIcon />
-                  </IconButton>
-                </Tooltip>
-              }
-            >
-              {Component && (
-                <Heading component="h3" level="5">
-                  {name}
-                </Heading>
-              )}
+            <AccordionSummary className={'accordionSummary'}>
               <Box display="flex">
                 <form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank">
                   <input type="hidden" name="parameters" value={getPayload(codeSource, sourceFiles)} />
                   <Tooltip title="Edit in codesandbox">
-                    <IconButton disableFocusRipple type="submit" onClick={(event) => event.stopPropagation()} size="large">
+                    <IconButton
+                      disableFocusRipple
+                      type="submit"
+                      sx={{ pointerEvents: 'auto' }}
+                      onClick={(event) => event.stopPropagation()}
+                      size="small"
+                    >
                       <CodesandboxIcon />
                     </IconButton>
                   </Tooltip>
@@ -215,7 +245,7 @@ const CodeExample = ({ source, mode }) => {
                   onClick={(event) => event.stopPropagation()}
                 >
                   <Tooltip title="View source on github">
-                    <IconButton size="large">
+                    <IconButton sx={{ pointerEvents: 'auto' }} size="small">
                       <GhIcon style={{ color: grey[700] }} />
                     </IconButton>
                   </Tooltip>
@@ -227,13 +257,6 @@ const CodeExample = ({ source, mode }) => {
             </AccordionDetails>
           </Accordion>
         </Grid>
-        {Component && (
-          <Grid className={'formContainer'} item xs={12}>
-            <Paper className={'componentPanel'}>
-              <Component />
-            </Paper>
-          </Grid>
-        )}
       </ExampleRoot>
     );
   }

packages/react-renderer-demo/src/components/landing-page/landing-page-cards.js

@@ -178,13 +178,15 @@ const Root = styled(Grid)(({ theme }) => ({
     color: '#F28D63',
   },
   '& .editorWrapper': {
-    background: '#1d1f21',
+    background: '#1D1F21',
     padding: 16,
+    borderRadius: 4,
   },
   '& .formState': {
-    marginTop: 16,
+    marginTop: 7,
     padding: 16,
     marginBottom: 16,
+    borderRadius: 4,
   },
   '& .textBottom': {
     marginBottom: 16,

packages/react-renderer-demo/src/components/mdx/mdx-components.js

@@ -11,6 +11,7 @@ import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
+import Divider from '@mui/material/Divider';
 import Paper from '@mui/material/Paper';
 import { headerToId } from '../../helpers/list-of-contents';
 import ShareButton from './share-button';
@@ -135,6 +136,15 @@ const MdLink = ({ href, children }) =>
     </StyledLink>
   );
 
+const StyledDivider = styled(Divider)(() => ({
+  '&.divider': {
+    marginTop: 20,
+    marginBottom: 15,
+  },
+}));
+
+const MdDivider = (props) => <StyledDivider {...props} variant="middle" className={'divider'} />;
+
 const MdxComponents = {
   p: ({ children }) => (
     <Typography variant="body1" gutterBottom>
@@ -169,6 +179,7 @@ const MdxComponents = {
   inlineCode: ({ children }) => (
     <Root style={{ background: 'white', borderRadius: 3, fontFamily: 'courier, monospace', padding: '3px' }}>{children}</Root>
   ),
+  hr: MdDivider,
 };
 
 export default MdxComponents;

packages/react-renderer-demo/src/pages/releases.js

@@ -6,7 +6,9 @@ import { Heading } from '../components/mdx/mdx-components';
 import mdxComponents from '@docs/components/mdx/mdx-components';
 
 const options = {
-  overrides: { a: mdxComponents.link },
+  overrides: {
+    a: mdxComponents.link,
+  },
 };
 
 const parseData = (data) =>