refactor level content

Signed-off-by: shmck <[email protected]>

web-app/src/containers/Tutorial/components/Content.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react'
+import Markdown from '../../../components/Markdown'
+
+const styles = {
+  text: {
+    padding: '0rem 1rem',
+    paddingBottom: '1rem',
+  },
+  title: {
+    fontSize: '1.2rem',
+    fontWeight: 'bold' as 'bold',
+    lineHeight: '1.2rem',
+  },
+}
+
+interface Props {
+  title: string
+  content: string
+}
+
+const Content = (props: Props) => {
+  if (!props.content.length) {
+    return null
+  }
+  return (
+    <div css={styles.text}>
+      <h2 css={styles.title}>{props.title}</h2>
+      <Markdown>{props.content || ''}</Markdown>
+    </div>
+  )
+}
+
+export default Content

web-app/src/containers/Tutorial/components/Level.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import * as T from 'typings'
 import * as TT from 'typings/tutorial'
 import { css, jsx } from '@emotion/core'
-import Markdown from '../../../components/Markdown'
+import Content from './Content'
 import Step from './Step'
 
 const styles = {
@@ -90,12 +90,7 @@ const Level = ({ level, progress, position, onLoadSolution, currentStep, testSta
   return (
     <div css={styles.page}>
       <div css={styles.content}>
-        {level.content.length ? (
-          <div css={styles.text}>
-            <h2 css={styles.title}>{level.title}</h2>
-            <Markdown>{level.content || ''}</Markdown>
-          </div>
-        ) : null}
+        <Content title={level.title} content={level.content} />
 
         {level.content.length && steps.length ? <div css={styles.separator} /> : null}