From ebdb7a852e813483421e05b389ba9625f7ad6939 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Mon, 21 Nov 2022 15:25:15 -0800
Subject: [PATCH] update MDX header styles

---
 src/components/MDXComponents.tsx | 10 ++++++----
 src/pages/[...slug].tsx          |  4 ++--
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/MDXComponents.tsx b/src/components/MDXComponents.tsx
index bfc92fc18c..ed8f87144b 100644
--- a/src/components/MDXComponents.tsx
+++ b/src/components/MDXComponents.tsx
@@ -14,6 +14,7 @@ import sh from 'react-syntax-highlighter/dist/cjs/languages/prism/shell-session'
 import solidity from 'react-syntax-highlighter/dist/cjs/languages/prism/solidity';
 import swift from 'react-syntax-highlighter/dist/cjs/languages/prism/swift';
 
+import { textStyles } from '../theme/foundations';
 // syntax highlighting languages supported
 SyntaxHighlighter.registerLanguage('bash', bash);
 SyntaxHighlighter.registerLanguage('go', go);
@@ -27,6 +28,7 @@ SyntaxHighlighter.registerLanguage('solidity', solidity);
 SyntaxHighlighter.registerLanguage('swift', swift);
 
 import { getProgrammingLanguageName } from '../utils';
+const { header1, header2, header3, header4 } = textStyles
 
 const MDXComponents = {
   // paragraphs
@@ -53,28 +55,28 @@ const MDXComponents = {
   // headings
   h1: ({ children }: any) => {
     return (
-      <Heading as='h1' textAlign='start' fontSize='4xl' mb={5}>
+      <Heading as='h1' textAlign='start' mb={5} {...header1}>
         {children}
       </Heading>
     );
   },
   h2: ({ children }: any) => {
     return (
-      <Heading as='h2' textAlign='start' fontSize='3xl' mb={4}>
+      <Heading as='h2' textAlign='start' mb={4} {...header2}>
         {children}
       </Heading>
     );
   },
   h3: ({ children }: any) => {
     return (
-      <Heading as='h3' fontSize='2xl' mt={5} mb={2.5}>
+      <Heading as='h3' mt={5} mb={2.5} {...header3}>
         {children}
       </Heading>
     );
   },
   h4: ({ children }: any) => {
     return (
-      <Heading as='h4' fontSize='lg' mb={2.5}>
+      <Heading as='h4' mb={2.5} {...header4}>
         {children}
       </Heading>
     );
diff --git a/src/pages/[...slug].tsx b/src/pages/[...slug].tsx
index daeb911d84..b89f73ee5f 100644
--- a/src/pages/[...slug].tsx
+++ b/src/pages/[...slug].tsx
@@ -6,6 +6,7 @@ import { Heading } from '@chakra-ui/react';
 import MDXComponents from '../components/';
 import { ParsedUrlQuery } from 'querystring';
 import type { GetStaticPaths, GetStaticProps, NextPage } from 'next';
+import { textStyles } from '../theme/foundations';
 
 const MATTER_OPTIONS = {
   engines: {
@@ -71,8 +72,7 @@ const DocPage: NextPage<Props> = ({ frontmatter, content }) => {
   return (
     <>
       <main>
-        <Heading as='h1'>{frontmatter.title}</Heading>
-
+        <Heading as='h1' mb={5} {...textStyles.header1}>{frontmatter.title}</Heading>
         <ReactMarkdown components={MDXComponents}>{content}</ReactMarkdown>
       </main>
     </>