Display post preview before submitting support request

Summary:
The Markdown component wasn't rendering a single component, so I put it in a container.
Also added a margin bottom so it didn't look out of place. There's probably a nicer way to do that.

Reviewed By: mweststrate

Differential Revision: D18749381

fbshipit-source-id: ea7827dc7e6141fb0dbd5886356736da4b50f5dc

src/ui/components/Markdown.tsx

@@ -7,13 +7,15 @@
  * @format
  */
 
-import React, {PureComponent, RefObject} from 'react';
+import React, {PureComponent} from 'react';
 import styled from 'react-emotion';
 import ReactMarkdown from 'react-markdown';
-import ReactDOM from 'react-dom';
 import {colors} from './colors';
 import {shell} from 'electron';
 
+const Container = styled('div')({
+  padding: 10,
+});
 const Row = styled('div')({
   marginTop: 5,
   marginBottom: 5,
@@ -75,20 +77,22 @@ class LinkReference extends PureComponent<{href: string}> {
 
 export function Markdown(props: {source: string}) {
   return (
-    <ReactMarkdown
+    <Container>
-      source={props.source}
+      <ReactMarkdown
-      renderers={{
+        source={props.source}
-        heading: Heading,
+        renderers={{
-        listItem: ListItem,
+          heading: Heading,
-        paragraph: Row,
+          listItem: ListItem,
-        strong: Strong,
+          paragraph: Row,
-        emphasis: Emphasis,
+          strong: Strong,
-        inlineCode: Code,
+          emphasis: Emphasis,
-        code: CodeBlock,
+          inlineCode: Code,
-        blockquote: Quote,
+          code: CodeBlock,
-        link: LinkReference,
+          blockquote: Quote,
-        linkReference: LinkReference,
+          link: LinkReference,
-      }}
+          linkReference: LinkReference,
-    />
+        }}
+      />
+    </Container>
   );
 }