From ecc89d2da67ba39e597740fd3713143b324610b9 Mon Sep 17 00:00:00 2001
From: matushl <hlavacik.matus@gmail.com>
Date: Sun, 10 Dec 2023 02:48:28 +0100
Subject: [PATCH] Improve markdown styles

---
 src/components/StaticSites/Markdown.tsx       |  7 +--
 src/components/StaticSites/Texts.module.scss  |  7 ---
 .../StaticSites/Texts.module.scss.d.ts        |  1 -
 src/components/StaticSites/Texts.tsx          | 51 +++++++++++++++----
 4 files changed, 45 insertions(+), 21 deletions(-)

diff --git a/src/components/StaticSites/Markdown.tsx b/src/components/StaticSites/Markdown.tsx
index e8a1db85..bf9a8fe9 100644
--- a/src/components/StaticSites/Markdown.tsx
+++ b/src/components/StaticSites/Markdown.tsx
@@ -6,7 +6,7 @@ import rehypeKatex from 'rehype-katex'
 import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
 
-import {H1, H2, H3, MarkdownLink, P, Table, Td, Th} from './Texts'
+import {H1, H2, H3, Li, MarkdownLink, P, Table, Td, Th} from './Texts'
 
 type MarkdownProps = {
   content: string
@@ -17,14 +17,15 @@ export const Markdown: FC<MarkdownProps> = ({content}) => (
     remarkPlugins={[remarkGfm, remarkMath]}
     rehypePlugins={[rehypeKatex]}
     components={{
-      th: Th,
-      td: Td,
       a: MarkdownLink,
       table: Table,
+      th: Th,
+      td: Td,
       p: P,
       h1: H1,
       h2: H2,
       h3: H3,
+      li: Li,
     }}
   >
     {content}
diff --git a/src/components/StaticSites/Texts.module.scss b/src/components/StaticSites/Texts.module.scss
index 2e6417d0..f22dd813 100644
--- a/src/components/StaticSites/Texts.module.scss
+++ b/src/components/StaticSites/Texts.module.scss
@@ -9,11 +9,4 @@
 .th {
   background-color: black;
   color: white;
-  font-weight: bold;
-  font-style: italic;
-  text-transform: uppercase;
-}
-
-.p {
-  margin: 1rem 0;
 }
\ No newline at end of file
diff --git a/src/components/StaticSites/Texts.module.scss.d.ts b/src/components/StaticSites/Texts.module.scss.d.ts
index aff0cd78..6aa1d36f 100644
--- a/src/components/StaticSites/Texts.module.scss.d.ts
+++ b/src/components/StaticSites/Texts.module.scss.d.ts
@@ -1,5 +1,4 @@
 export type Styles = {
-  p: string
   table: string
   td: string
   th: string
diff --git a/src/components/StaticSites/Texts.tsx b/src/components/StaticSites/Texts.tsx
index 2991aaa1..f9135839 100644
--- a/src/components/StaticSites/Texts.tsx
+++ b/src/components/StaticSites/Texts.tsx
@@ -1,6 +1,12 @@
 import {Typography} from '@mui/material'
 import {FC, ReactNode} from 'react'
-import {ReactMarkdownProps, TableDataCellProps, TableHeaderCellProps} from 'react-markdown/lib/ast-to-react'
+import {
+  HeadingProps,
+  LiProps,
+  ReactMarkdownProps,
+  TableDataCellProps,
+  TableHeaderCellProps,
+} from 'react-markdown/lib/ast-to-react'
 
 import {Link} from '../Clickable/Link'
 import styles from './Texts.module.scss'
@@ -15,26 +21,51 @@ export const MarkdownLink: FC<MarkdownLinkProps> = ({children, href}) => (
     {children}
   </Link>
 )
-export const Th: FC<TableHeaderCellProps> = ({children}) => <th className={styles.th}>{children}</th>
-export const Td: FC<TableDataCellProps> = ({children}) => <td className={styles.td}>{children}</td>
+
 export const Table: FC<ReactMarkdownProps> = ({children}) => <table className={styles.table}>{children}</table>
+
+export const Th: FC<TableHeaderCellProps> = ({children}) => (
+  <th className={styles.th}>
+    <Typography variant="h3" component="span">
+      {children}
+    </Typography>
+  </th>
+)
+
+export const Td: FC<TableDataCellProps> = ({children}) => (
+  <td className={styles.td}>
+    <Typography variant="body1">{children}</Typography>
+  </td>
+)
+
+export const Li: FC<LiProps> = ({children}) => (
+  <li>
+    <Typography variant="body1" mt={1} component="div">
+      {children}
+    </Typography>
+  </li>
+)
+
 export const P: FC<ReactMarkdownProps> = ({children}) => (
-  <Typography variant="body1" sx={{marginTop: 1}} component="div">
+  <Typography variant="body1" mt={1} component="div">
     {children}
   </Typography>
 )
-export const H1: FC<ReactMarkdownProps> = ({children}) => (
-  <Typography variant="h1" sx={{marginTop: 10}}>
+
+export const H1: FC<HeadingProps> = ({children}) => (
+  <Typography variant="h1" mt={10}>
     {children}
   </Typography>
 )
-export const H2: FC<ReactMarkdownProps> = ({children}) => (
-  <Typography variant="h2" sx={{marginTop: 5}}>
+
+export const H2: FC<HeadingProps> = ({children}) => (
+  <Typography variant="h2" mt={5}>
     {children}
   </Typography>
 )
-export const H3: FC<ReactMarkdownProps> = ({children}) => (
-  <Typography variant="h3" sx={{marginTop: 3}}>
+
+export const H3: FC<HeadingProps> = ({children}) => (
+  <Typography variant="h3" mt={3}>
     {children}
   </Typography>
 )