Merge pull request #152 from ShMcK/fix/alignment

Fix/alignment

Author: ShMcK

web-app/src/containers/Overview/OverviewPage.tsx

@@ -27,7 +27,7 @@ const styles = {
     cursor: 'pointer',
   },
   content: {
-    paddingBottom: '3rem',
+    paddingBottom: '5rem',
   },
   header: {
     color: 'white',
@@ -40,6 +40,11 @@ const styles = {
   description: {
     fontSize: '1rem',
   },
+  meta: {
+    display: 'flex' as 'flex',
+    flexDirection: 'row' as 'row',
+    flexWrap: 'wrap' as 'wrap',
+  },
   levelList: {
     padding: '0rem 1rem',
   },
@@ -88,10 +93,10 @@ const Summary = (props: Props) => (
         </div>
         <h1 css={styles.title}>{props.title}</h1>
         <h3>{props.description}</h3>
-        <h4>
-          <span css={{ marginRight: '2rem' }}>Created by {props.createdBy.name}</span>
-          <span>Last updated {moment(props.updatedAt).format('M/YYYY')}</span>
-        </h4>
+        <h5 css={styles.meta}>
+          <div css={{ marginRight: '2rem' }}>Created by {props.createdBy.name}</div>
+          <div>Last updated {moment(props.updatedAt).format('M/YYYY')}</div>
+        </h5>
       </div>
       <div>
         <div css={styles.levelList}>
@@ -110,8 +115,6 @@ const Summary = (props: Props) => (
       </div>
     </div>
 
-    <div css={{ height: '3rem ' }} />
-
     <div css={styles.footer}>
       {/* TODO Add back button */}
       <Button type="primary" onClick={props.onNext}>

web-app/src/containers/Start/index.tsx

@@ -29,6 +29,7 @@ const styles = {
   },
   subtitle: {
     fontSize: '1.3rem',
+    textAlign: 'center' as 'center',
   },
   options: {
     flex: 1,
@@ -54,11 +55,10 @@ export const StartPage = (props: Props) => (
       <BetaBadge>
         <span css={styles.title}>CodeRoad</span>
       </BetaBadge>
-      <h3 css={styles.subtitle}>Play Interactive Coding Tutorials in VSCode</h3>
-      <p>Learn by coding in a real environment.</p>
+      <h3 css={styles.subtitle}>Play Tutorials in VSCode</h3>
+      <p>Learn in a real environment.</p>
       <p>Instant feedback on save.</p>
-      <p>Progress saves to Git.</p>
-      <p>Build your portfolio as you learn.</p>
+      <p>Build your portfolio and Git timeline.</p>
     </div>
 
     <div css={styles.options}>