This commit contains the following style improvements of the doc site:

1. Add border-radius:4 to index page example code and component to
   achieve better user experience.
2. Add border-radius:4 to all the code block in markdown.
3. Change the code block font to "ui-monospace,SFMono-Regular,SF
   Mono,Menlo,Consolas,Liberation Mono,monospace"
4. Move the AccordionSummary of example component to the borrom of the
   component, as it's more logical to expand the code below the actual
   component.
5. Turn off the rotate of accordion expand icon, replace it with
   <CodeIcon/> and <CodeOffIcon/> to maintain the expand state.
6. Replace the markdown default divider(<hr>) to @mui/material/Divider.

Author: kp0zhiqian

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) =>