fix headings size

src/renderer/component/markdownPreview/view.jsx

@@ -13,25 +13,12 @@ schema.protocols.href[3] = 'lbry';
 
 type MarkdownProps = { content: string };
 
-type TitleProps = { children: React.Node };
-
-const MarkdownTitle = (props: TitleProps) => {
-  const { children } = props;
-  return <div className="markdown-preview__title">{children}</div>;
-};
-
 const MarkdownPreview = (props: MarkdownProps) => {
   const { content } = props;
   const remarkOptions = {
     sanitize: schema,
     remarkReactComponents: {
       a: ExternalLink,
-      h1: MarkdownTitle,
-      h2: MarkdownTitle,
-      h3: MarkdownTitle,
-      h4: MarkdownTitle,
-      h5: MarkdownTitle,
-      h6: MarkdownTitle,
     },
   };
   return (

src/renderer/scss/component/_markdown-preview.scss

@@ -1,11 +1,42 @@
 .markdown-preview {
   margin: 0;
-}
 
-.markdown-preview__title {
-  font-family: 'metropolis-semibold';
-  font-size: 1.35em;
-  margin: 16px 0;
+  /* Headings: title */
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: 'metropolis-semibold';
+    margin: 16px 0;
+  }
+
+  h1 {
+    font-size: 1.22em;
+  }
+
+  h2 {
+    font-size: 1.14em;
+  }
+
+  h3 {
+    font-size: 1.06em;
+  }
+
+  h4 {
+    font-size: 0.92em;
+  }
+
+  h5 {
+    font-size: 0.84em;
+  }
+
+  h6 {
+    font-size: 1em;
+    color: var(--color-help);
+  }
 }
 
 .markdown-preview table {