Add style overrides to docs layout components.

Hyperkid123 · Hyperkid123 · commit 5bf923fd9f9a · 2020-05-07T08:29:02.000+02:00
diff --git a/packages/react-renderer-demo/src/app/pages/_document.js b/packages/react-renderer-demo/src/app/pages/_document.js
@@ -23,6 +23,28 @@ class MyDocument extends Document {
           <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
           <link rel="stylesheet" type="text/css" href="//wpcc.io/lib/1.0.2/cookieconsent.min.css" />
           <script src="//wpcc.io/lib/1.0.2/cookieconsent.min.js"></script>
+          <style dangerouslySetInnerHTML={{__html: `
+          html {
+            box-sizing: border-box;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+          }
+          *, *::before, *::after {
+            box-sizing: inherit;
+          }
+          strong, b {
+            font-weight: bolder !important;
+          }
+          body {
+            color: rgba(0, 0, 0, 0.87) !important;
+            margin: 0 !important;
+            font-size: 0.875rem !important;
+            font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
+            font-weight: 400 !important;
+            line-height: 1.43 !important;
+            letter-spacing: 0.01071em !important;
+            background-color: #fafafa !important;
+          }`}} />
         </Head>
         <body>
           <Main />
diff --git a/packages/react-renderer-demo/src/app/src/components/footer.js b/packages/react-renderer-demo/src/app/src/components/footer.js
@@ -20,13 +20,16 @@ import NpmSvgIcon from './common/npm-svg-icon';
 import TwitterIcon from './common/twitter-svg-icon';
 import DiscordIcon from './common/discord-svg-icon';
 
+const useRepoLinkStyles = makeStyles(() => ({
+  listLink: {
+    paddingLeft: 0,
+    paddingRight: 0,
+    fontWeight: 'inherit'
+  }
+}));
+
 const RepoLink = ({ href, label }) => {
-  const classes = makeStyles(() => ({
-    listLink: {
-      paddingLeft: 0,
-      paddingRight: 0
-    }
-  }));
+  const classes = useRepoLinkStyles();
   return (
     <ListItem>
       <ListItemText
diff --git a/packages/react-renderer-demo/src/app/src/components/mdx/mdx-components.js b/packages/react-renderer-demo/src/app/src/components/mdx/mdx-components.js
@@ -25,7 +25,8 @@ const CodeEditor = dynamic(import('../code-editor'), {
 const useHeadingStyles = makeStyles(() => ({
   anchor: {
     textDecoration: 'none',
-    color: 'inherit'
+    color: 'inherit',
+    fontWeight: 'inherit'
   },
   heading: {
     '& button': {
@@ -38,6 +39,9 @@ const useHeadingStyles = makeStyles(() => ({
   offset: {
     paddingTop: 92, // compensate for fixed header size and spacing
     marginTop: -92 // compensate for fixed header size and spacing
+  },
+  link: {
+    fontWeight: 'initial'
   }
 }));
 
@@ -94,16 +98,18 @@ const MdxComponents = {
       </div>
     );
   },
-  a: ({ href, children }) =>
-    href.startsWith('/') ? (
+  a: ({ href, children }) => {
+    const classes = useHeadingStyles();
+    return href.startsWith('/') ? (
       <RouterLink href={href}>
         <Link href={href}>{children}</Link>
       </RouterLink>
     ) : (
-      <Link href={href} rel="noopener noreferrer" target="_blank">
+      <Link className={classes.link} href={href} rel="noopener noreferrer" target="_blank">
         {children}
       </Link>
-    ),
+    );
+  },
   h1: (props) => <Heading {...props} level={4} component="h1" />,
   h2: (props) => <Heading {...props} level={5} component="h2" />,
   h3: (props) => <Heading {...props} level={6} component="h3" />,
diff --git a/packages/react-renderer-demo/src/app/src/components/navigation/nav-styles.js b/packages/react-renderer-demo/src/app/src/components/navigation/nav-styles.js
@@ -30,11 +30,15 @@ export const navStyles = (theme) => ({
   listRoot: {
     width: '100%',
     maxWidth: 360,
-    backgroundColor: theme.palette.background.paper
+    backgroundColor: theme.palette.background.paper,
+    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+    fontSize: '0.875rem'
   },
   nested: {
     padding: '8px 16px !important',
-    justifyContent: 'flex-start !important'
+    justifyContent: 'flex-start !important',
+    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+    fontSize: '0.875rem'
   },
   listItem: {
     padding: '8px 16px !important',
diff --git a/packages/react-renderer-demo/src/app/src/helpers/list-of-contents.js b/packages/react-renderer-demo/src/app/src/helpers/list-of-contents.js
@@ -29,7 +29,8 @@ const useLinkStyles = makeStyles((theme) => ({
     paddingLeft: 16,
     paddingRight: 16,
     paddingTop: 8,
-    paddingBottom: 8
+    paddingBottom: 8,
+    fontWeight: 'inherit'
   }
 }));
 

Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,8 @@ const useLinkStyles = makeStyles((theme) => ({`
`29`	`29`	`paddingLeft: 16,`
`30`	`30`	`paddingRight: 16,`
`31`	`31`	`paddingTop: 8,`
`32`		`- paddingBottom: 8`
	`32`	`+ paddingBottom: 8,`
	`33`	`+ fontWeight: 'inherit'`
`33`	`34`	`}`
`34`	`35`	`}));`
`35`	`36`