From fa72c47f9db9bb8bffb07574ce5c1742155e7cd5 Mon Sep 17 00:00:00 2001
From: robin <robin@rnode.me>
Date: Tue, 11 Oct 2022 10:27:57 +0800
Subject: [PATCH] refactor: update style

---
 ui/src/components/Editor/ToolBars/heading.tsx | 21 ++++++++++--
 ui/src/i18n/locales/en.json                   | 11 ++++---
 ui/src/index.scss                             | 32 ++++++++++++++++++-
 3 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/ui/src/components/Editor/ToolBars/heading.tsx b/ui/src/components/Editor/ToolBars/heading.tsx
index 2d04b75c..27a244c6 100644
--- a/ui/src/components/Editor/ToolBars/heading.tsx
+++ b/ui/src/components/Editor/ToolBars/heading.tsx
@@ -9,17 +9,32 @@ const Heading: FC<IEditorContext> = (context) => {
   const { t } = useTranslation('translation', { keyPrefix: 'editor' });
   const headerList = [
     {
-      text: `<h4 class="mb-0">${t('heading.options.h4')}</h4>`,
+      text: `<h1 class="mb-0 h3">${t('heading.options.h1')}</h1>`,
+      level: 1,
+      label: t('heading.options.h1'),
+    },
+    {
+      text: `<h2 class="mb-0 h4">${t('heading.options.h2')}</h2>`,
+      level: 2,
+      label: t('heading.options.h2'),
+    },
+    {
+      text: `<h3 class="mb-0 h5">${t('heading.options.h3')}</h3>`,
+      level: 3,
+      label: t('heading.options.h3'),
+    },
+    {
+      text: `<h4 class="mb-0 h6">${t('heading.options.h4')}</h4>`,
       level: 4,
       label: t('heading.options.h4'),
     },
     {
-      text: `<h5 class="mb-0">${t('heading.options.h5')}</h5>`,
+      text: `<h5 class="mb-0 fs-14">${t('heading.options.h5')}</h5>`,
       level: 5,
       label: t('heading.options.h5'),
     },
     {
-      text: `<h6 class="mb-0">${t('heading.options.h6')}</h6>`,
+      text: `<h6 class="mb-0 fs-12">${t('heading.options.h6')}</h6>`,
       level: 6,
       label: t('heading.options.h6'),
     },
diff --git a/ui/src/i18n/locales/en.json b/ui/src/i18n/locales/en.json
index 297cbdbc..5c3b95fc 100644
--- a/ui/src/i18n/locales/en.json
+++ b/ui/src/i18n/locales/en.json
@@ -90,9 +90,12 @@
     "heading": {
       "text": "Heading",
       "options": {
-        "h4": "Heading 2",
-        "h5": "Heading 3",
-        "h6": "Heading 4"
+        "h1": "Heading 1",
+        "h2": "Heading 2",
+        "h3": "Heading 3",
+        "h4": "Heading 4",
+        "h5": "Heading 5",
+        "h6": "Heading 6"
       }
     },
     "help": {
@@ -847,4 +850,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/ui/src/index.scss b/ui/src/index.scss
index c4235479..d18ee9af 100644
--- a/ui/src/index.scss
+++ b/ui/src/index.scss
@@ -28,7 +28,10 @@ a {
 }
 
 .fs-14 {
-  font-size: 14px;
+  font-size: 0.875rem;
+}
+.fs-12 {
+  font-size: 0.75rem;
 }
 
 .pic-auth-modal {
@@ -141,6 +144,30 @@ a {
 }
 .fmt {
   width: 100%;
+  h1 {
+    @extend .fs-3;
+    margin-top: 2rem;
+  }
+  h2 {
+    @extend .fs-4;
+    margin-top: 2rem;
+  }
+  h3 {
+    @extend .fs-5;
+    margin-top: 2rem;
+  }
+  h4 {
+    @extend .fs-6;
+    margin-top: 2rem;
+  }
+  h5 {
+    @extend .fs-14;
+    margin-top: 2rem;
+  }
+  h6 {
+    @extend .fs-12;
+    margin-top: 2rem;
+  }
   img {
     max-width: 100%;
   }
@@ -163,6 +190,9 @@ a {
     padding: 1rem;
     color: #6c757d;
     background-color: #e9ecef;
+    p {
+      color: $body-color;
+    }
     > p:last-child {
       margin-bottom: 0;
     }