From e8a50b84051ceebd7697e772d749e09b26e6ee3f Mon Sep 17 00:00:00 2001
From: Alex T <79433869+hereAlexT@users.noreply.github.com>
Date: Sun, 17 Dec 2023 22:51:03 +1100
Subject: [PATCH] * feat(NoteContent.tsx): add clsx import for conditional
 class names * style(NoteContent.tsx): add different font sizes for different
 heading levels in Markdown * style(SparkMde.tsx): remove
 autoDownloadFontAwesome option and toolbar option from MdeOptions *
 style(sparkmde.css): update font sizes for different heading levels in
 EasyMDE

---
 frontend/src/components/Note/NoteContent.tsx        | 11 ++++++++++-
 frontend/src/components/NoteEditor/Mde/SparkMde.tsx |  5 ++---
 frontend/src/components/NoteEditor/Mde/sparkmde.css | 12 ++++++------
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/Note/NoteContent.tsx b/frontend/src/components/Note/NoteContent.tsx
index 57832cf..3b260d4 100644
--- a/frontend/src/components/Note/NoteContent.tsx
+++ b/frontend/src/components/Note/NoteContent.tsx
@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import React from "react";
 import Markdown from "react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
@@ -19,7 +20,15 @@ const NoteContent: React.FC<NoteContentProps> = ({ note }) => {
       <Markdown
         rehypePlugins={[rehypeKatex]}
         remarkPlugins={[remarkMath]}
-        className="prose prose-neutral  font-poppins text-sm dark:prose-invert"
+        className={clsx(
+          "prose prose-neutral font-poppins text-sm dark:prose-invert",
+          "prose-h1:text-2xl",
+          "prose-h2:text-xl",
+          "prose-h3:text-lg",
+          "prose-h4:text-base prose-h4:font-bold",
+          "prose-h5:text-base prose-h5:font-normal",
+          "prose-h6:text-base prose-h6:font-light",
+        )}
         children={note.body}
         components={{
           code(props) {
diff --git a/frontend/src/components/NoteEditor/Mde/SparkMde.tsx b/frontend/src/components/NoteEditor/Mde/SparkMde.tsx
index 2b0c63b..86f793c 100644
--- a/frontend/src/components/NoteEditor/Mde/SparkMde.tsx
+++ b/frontend/src/components/NoteEditor/Mde/SparkMde.tsx
@@ -112,17 +112,16 @@ const SparkMde = React.forwardRef((props: SparkMdeProps, ref) => {
 
   const MdeOptions = useMemo(() => {
     return {
-      autoDownloadFontAwesome: false,
       minHeight: minHeight || "100%",
-      // maxHeight: maxHeight || "100%",
       spellChecker: false,
       lineNumbers: false,
       unorderedListStyle: "-",
       uploadImage: false,
       placeholder: "You got an idea💡? What's that?",
       status: false,
-      toolbar: false,
       autofocus: true,
+      autoDownloadFontAwesome: false,
+      toolbar: false,
     } as EasyMDE.Options;
   }, []);
 
diff --git a/frontend/src/components/NoteEditor/Mde/sparkmde.css b/frontend/src/components/NoteEditor/Mde/sparkmde.css
index 136b96f..24b75aa 100644
--- a/frontend/src/components/NoteEditor/Mde/sparkmde.css
+++ b/frontend/src/components/NoteEditor/Mde/sparkmde.css
@@ -685,22 +685,22 @@ span.CodeMirror-selectedtext {
   color: #183691;
 }
 .cm-s-easymde .cm-header-1 {
-  font-size: calc(1.375rem + 1.5vw);
+  @apply text-2xl font-bold;
 }
 .cm-s-easymde .cm-header-2 {
-  font-size: calc(1.325rem + 0.9vw);
+  @apply text-xl font-bold;
 }
 .cm-s-easymde .cm-header-3 {
-  font-size: calc(1.3rem + 0.6vw);
+  @apply text-lg font-bold;
 }
 .cm-s-easymde .cm-header-4 {
-  font-size: calc(1.275rem + 0.3vw);
+  @apply text-base font-bold;
 }
 .cm-s-easymde .cm-header-5 {
-  font-size: 1.25rem;
+  @apply text-base font-normal;
 }
 .cm-s-easymde .cm-header-6 {
-  font-size: 1rem;
+  @apply text-base font-light;
 }
 .cm-s-easymde .cm-header-1,
 .cm-s-easymde .cm-header-2,