Split up Layout on Container and Header for better control over Headerbar from components

3 files changed, 87 insertions, 59 deletions

diff --git a/app/components/Connect.js b/app/components/Connect.js
index d51e4829c8..dc32594067 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -1,13 +1,16 @@
 import React, { Component } from 'react';
-import Layout from './Layout';
+import { Layout, Container, Header } from './Layout';
 
 export default class Connect extends Component {
   render() {
     return (
       <Layout>
-        <div className="connect">
-          
-        </div>
+        <Header />
+        <Container>
+          <div className="connect">
+            
+          </div>
+        </Container>
       </Layout>
     );
   }
diff --git a/app/components/Layout.js b/app/components/Layout.js
index 7619f3df4f..b0cc0a8420 100644
--- a/app/components/Layout.js
+++ b/app/components/Layout.js
@@ -1,19 +1,41 @@
 import React, { PropTypes, Component } from 'react';
 import HeaderBar from './HeaderBar';
 
-export default class Layout extends Component {
+export class Header extends Component {
+
+  static Style = HeaderBar.Style
+
+  render() {
+    return (
+      <div className="layout__header">
+        <HeaderBar {...this.props} />
+      </div>
+    )
+  }
+}
+
+export class Container extends Component {
   static propTypes = {
     children: PropTypes.element.isRequired
   };
+
+  render() {
+    return (
+      <div className="layout__container">
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+export class Layout extends Component {
+  static propTypes = {
+    children: PropTypes.arrayOf(PropTypes.node).isRequired
+  };
   render() {
     return (
       <div className="layout">
-        <div className="layout__header">
-          <HeaderBar />
-        </div>
-        <div className="layout__container">
-          {this.props.children}
-        </div>
+        {this.props.children}
       </div>
     );
   }
diff --git a/app/components/Login.js b/app/components/Login.js
index 062510be00..13dd42aad1 100644
--- a/app/components/Login.js
+++ b/app/components/Login.js
@@ -1,7 +1,7 @@
 import { shell } from 'electron';
 import React, { Component, PropTypes } from 'react';
 import { If, Then, Else } from 'react-if';
-import Layout from './Layout';
+import { Layout, Container, Header } from './Layout';
 import { createAccountURL, LoginState } from '../constants';
 
 export default class Login extends Component {
@@ -150,61 +150,64 @@ export default class Login extends Component {
 
     return (
       <Layout>
-        <div className="login">
-          <div className="login-form">
-            <div>
+        <Header />
+        <Container>
+          <div className="login">
+            <div className="login-form">
+              <div>
 
-              { /* show spinner when connecting */ }
-              <If condition={ isConnecting }>
-                <Then>
-                  <div className="login-form__status-icon">
-                    <img src="./assets/images/icon-spinner.svg" alt="" />
-                  </div>
-                </Then>
-              </If>
+                { /* show spinner when connecting */ }
+                <If condition={ isConnecting }>
+                  <Then>
+                    <div className="login-form__status-icon">
+                      <img src="./assets/images/icon-spinner.svg" alt="" />
+                    </div>
+                  </Then>
+                </If>
 
-              { /* show error icon when failed */ }
-              <If condition={ isFailed }>
-                <Then>
-                  <div className="login-form__status-icon">
-                    <img src="./assets/images/icon-fail.svg" alt="" />
-                  </div>
-                </Then>
-              </If>
+                { /* show error icon when failed */ }
+                <If condition={ isFailed }>
+                  <Then>
+                    <div className="login-form__status-icon">
+                      <img src="./assets/images/icon-fail.svg" alt="" />
+                    </div>
+                  </Then>
+                </If>
 
-              { /* show tick when logged in */ }
-              <If condition={ isLoggedIn }>
-                <Then>
-                  <div className="login-form__status-icon">
-                    <img src="./assets/images/icon-success.svg" alt="" />
-                  </div>
-                </Then>
-              </If>
+                { /* show tick when logged in */ }
+                <If condition={ isLoggedIn }>
+                  <Then>
+                    <div className="login-form__status-icon">
+                      <img src="./assets/images/icon-success.svg" alt="" />
+                    </div>
+                  </Then>
+                </If>
 
-              <div className="login-form__title">{ title }</div>
-              <div className={ 'login-form__fields' + (isLoggedIn ? ' login-form__fields--invisible' : '') }>
-                <div className="login-form__subtitle">{ subtitle }</div>
-                <div className={ inputWrapClass }>
-                  <input className={ inputClass } 
-                        type="text" 
-                        placeholder="e.g 0000 0000 0000" 
-                        onChange={ ::this.handleInputChange }
-                        onKeyUp={ ::this.handleInputKeyUp }
-                        value={ displayAccount }
-                        disabled={ isConnecting }
-                        autoFocus={ true } 
-                        ref={ autoFocusRef } />
-                    <button className={ submitClass } onClick={ ::this.handleLogin }></button>
+                <div className="login-form__title">{ title }</div>
+                <div className={ 'login-form__fields' + (isLoggedIn ? ' login-form__fields--invisible' : '') }>
+                  <div className="login-form__subtitle">{ subtitle }</div>
+                  <div className={ inputWrapClass }>
+                    <input className={ inputClass } 
+                          type="text" 
+                          placeholder="e.g 0000 0000 0000" 
+                          onChange={ ::this.handleInputChange }
+                          onKeyUp={ ::this.handleInputKeyUp }
+                          value={ displayAccount }
+                          disabled={ isConnecting }
+                          autoFocus={ true } 
+                          ref={ autoFocusRef } />
+                      <button className={ submitClass } onClick={ ::this.handleLogin }></button>
+                  </div>
                 </div>
-              </div>
 
+              </div>
+            </div>
+            <div className={footerClass}>
+              <div className="login-footer__prompt">Don't have an account number?</div>
+              <button className="login-footer__button" onClick={ ::this.handleCreateAccount }>Create account</button>
             </div>
           </div>
-          <div className={footerClass}>
-            <div className="login-footer__prompt">Don't have an account number?</div>
-            <button className="login-footer__button" onClick={ ::this.handleCreateAccount }>Create account</button>
-          </div>
-        </div>
+        </Container>
       </Layout>
     );
   }