add markdown styling

scm-ui-components/packages/ui-components/src/MarkdownView.js

@@ -1,11 +1,11 @@
 //@flow
 import React from "react";
-import SyntaxHighlighter from "./SyntaxHighlighter";
-import Markdown from "react-markdown/with-html";
-import {binder} from "@scm-manager/ui-extensions";
-import MarkdownHeadingRenderer from "./MarkdownHeadingRenderer";
 import { withRouter } from "react-router-dom";
-
+import injectSheet from "react-jss";
+import Markdown from "react-markdown/with-html";
+import { binder } from "@scm-manager/ui-extensions";
+import SyntaxHighlighter from "./SyntaxHighlighter";
+import MarkdownHeadingRenderer from "./MarkdownHeadingRenderer";
 
 type Props = {
   content: string,
@@ -14,11 +14,34 @@ type Props = {
   enableAnchorHeadings: boolean,
 
   // context props
+  classes: any,
   location: any
 };
 
-class MarkdownView extends React.Component<Props> {
+const styles = {
+  markdown: {
+    "& > .content": {
+      "& > h1, h2, h3, h4, h5, h6": {
+        margin: "0.5rem 0",
+        fontSize: "0.9rem"
+      },
+      "& > h1": {
+        fontWeight: "700"
+      },
+      "& > h2": {
+        fontWeight: "600"
+      },
+      "& > h3, h4, h5, h6": {
+        fontWeight: "500"
+      },
+      "& strong": {
+        fontWeight: "500"
+      }
+    }
+  }
+};
 
+class MarkdownView extends React.Component<Props> {
   static defaultProps = {
     enableAnchorHeadings: false
   };
@@ -45,16 +68,22 @@ class MarkdownView extends React.Component<Props> {
   }
 
   render() {
-    const {content, renderers, renderContext, enableAnchorHeadings} = this.props;
+    const {
+      content,
+      renderers,
+      renderContext,
+      enableAnchorHeadings,
+      classes
+    } = this.props;
 
     const rendererFactory = binder.getExtension("markdown-renderer-factory");
     let rendererList = renderers;
 
-    if (rendererFactory){
+    if (rendererFactory) {
       rendererList = rendererFactory(renderContext);
     }
 
-    if (!rendererList){
+    if (!rendererList) {
       rendererList = {};
     }
 
@@ -62,12 +91,12 @@ class MarkdownView extends React.Component<Props> {
       rendererList.heading = MarkdownHeadingRenderer;
     }
 
-    if (!rendererList.code){
+    if (!rendererList.code) {
       rendererList.code = SyntaxHighlighter;
     }
 
     return (
-      <div ref={el => (this.contentRef = el)}>
+      <div className={classes.markdown} ref={el => (this.contentRef = el)}>
         <Markdown
           className="content"
           skipHtml={true}
@@ -80,4 +109,4 @@ class MarkdownView extends React.Component<Props> {
   }
 }
 
-export default withRouter(MarkdownView);
+export default injectSheet(styles)(withRouter(MarkdownView));