Add hero text toggle

components/Header.js

@@ -1,31 +1,30 @@
 import React from 'react'
 import Logo from './svg/Logo'
 
-const Header = (props) => (
+const Header = ({ enableHeroText }) => (
-  <div className="header">
+  <div className="header mt3 mb4">
     <div className="header-content">
-      <a href="/"><Logo /></a>
+      <a className="mb3" href="/"><Logo /></a>
-      <h2>The easiest way to create images from source code. Start typing, or drag a file into the text area to get started.</h2>
+      { enableHeroText ? (<h2>The easiest way to create images from source code.<br/> Start typing, or drag a file into the text area to get started.</h2>) : null }
     </div>
     <style jsx>{`
       .header {
-        margin: 36px 0 72px;
         width: 632px;
       }
 
       .header-content {
         display: flex;
-        justify-content: space-between;
+        flex-direction: column;
         align-items: center;
       }
 
       .header-content a {
-        height: 128px;
+        height: 64px;
       }
 
       h2 {
+        text-align: center;
         margin-top: 0;
-        max-width: 456px;
       }
     `}</style>
   </div>

components/Page.js

@@ -3,10 +3,10 @@ import Meta from './Meta'
 import Header from './Header'
 import Footer from './Footer'
 
-export default ({ children }) => (
+export default ({ children, enableHeroText }) => (
   <div className="main">
     <Meta />
-    <Header />
+    <Header enableHeroText={enableHeroText} />
     <div className="page">
       { children }
     </div>

pages/editor.js

@@ -59,7 +59,7 @@ class Editor extends React.Component {
 
   render () {
     return (
-        <Page>
+        <Page enableHeroText>
           {/* TODO this doesn't update the render */}
           <ReadFileDropContainer
             onDrop={(droppedContent) => {