sr style tweaking

components/common/Markdown.tsx

@@ -3,6 +3,7 @@ import {
   Code,
   Divider,
   Heading,
+  Image,
   Link,
   List,
   ListItem,
@@ -139,12 +140,43 @@ const Markdown: React.FC<MarkdownProps> = ({ value, allowAll = false }) => {
       definition: () => null,
       heading: (props: any) => {
         const { children } = props;
+
+        if (props.level === 1) {
+          return (
+            <Heading
+              as="h1"
+              mt={8}
+              mb={4}
+              size="2xl"
+              {...getCoreProps(props)}
+              fontFamily="'Rubik', sans-serif"
+            >
+              {children}
+            </Heading>
+          );
+        }
+
+        if (props.level === 2) {
+          return (
+            <Heading
+              as="h2"
+              mt={4}
+              mb={2}
+              size={"lg"}
+              {...getCoreProps(props)}
+              fontFamily="'Rubik', sans-serif"
+            >
+              {children}
+            </Heading>
+          );
+        }
+
         return (
           <Heading
-            as={`h${props.level}` as any}
-            mt={props.level === 1 ? 8 : 4}
-            mb={props.level === 1 ? 4 : 2}
-            size={props.level === 1 ? "2xl" : "lg"}
+            as="h3"
+            mt={2}
+            mb={1}
+            size="md"
             {...getCoreProps(props)}
             fontFamily="'Rubik', sans-serif"
           >
@@ -179,6 +211,7 @@ const Markdown: React.FC<MarkdownProps> = ({ value, allowAll = false }) => {
         }
         return <TableCell {...getCoreProps(props)}>{children}</TableCell>;
       },
+      image: (props: any) => <Image {...props} my={4} />,
     };
   };
   return (

components/layout/IconNavBar.tsx

@@ -54,14 +54,14 @@ export const navIcons: {
         component: (
           <a href="https://discord.gg/pXHRffE">
             <Flex ml="-9px" justify="center">
-              <Box mr={1}>
+              <Flex mr={1} align="center">
                 <Image
                   className="rounded"
                   src="/layout/overfishing_logo.png"
                   width={20}
                   height={20}
                 />
-              </Box>
+              </Flex>
               Overfishing Discord
             </Flex>
           </a>

pages/sr/guide/[level].tsx

@@ -1,5 +1,10 @@
 // import fundamentals from "/lib/data/sr/fundamentals.md";
-import { ListItem, OrderedList, UnorderedList } from "@chakra-ui/react";
+import {
+  Divider,
+  ListItem,
+  OrderedList,
+  UnorderedList,
+} from "@chakra-ui/react";
 import { t } from "@lingui/macro";
 import Breadcrumbs from "components/common/Breadcrumbs";
 import Markdown from "components/common/Markdown";
@@ -41,6 +46,7 @@ const SalmonRunGuidePage: React.FC<Props> = ({ text, sections, level }) => {
           </Fragment>
         ))}
       </OrderedList>
+      <Divider my={8} />
       <Markdown value={text} allowAll />
     </MyContainer>
   );