Add settings pane

6 files changed, 104 insertions, 8 deletions

diff --git a/app/components/Connect.js b/app/components/Connect.js
index 27aaedd4ee..14315ccc5f 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -7,10 +7,14 @@ export default class Connect extends Component {
     logout: PropTypes.func.isRequired
   }
 
+  onSettings() {
+    this.props.router.push('/settings');
+  }
+
   render() {
     return (
       <Layout>
-        <Header />
+        <Header showSettings={ true } onSettings={ ::this.onSettings } />
         <Container>
           <div className="connect">
             <button style={{ width: '100px', display: 'block', margin: '10px auto' }} onClick={ this.props.logout }>Log out</button>
diff --git a/app/components/HeaderBar.css b/app/components/HeaderBar.css
index 140e64df55..d250cfd968 100644
--- a/app/components/HeaderBar.css
+++ b/app/components/HeaderBar.css
@@ -19,6 +19,10 @@
   background-repeat: no-repeat;
 }
 
+.headerbar--hidden { 
+  padding: 12px 0 0 0;
+}
+
 .headerbar--style-error {
   background-color: #D0021B;
 }
@@ -35,6 +39,12 @@
   background-image: url(../assets/images/app-triangle-success.svg);
 }
 
+.headerbar__container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
 .headerbar__title {
   font-family: DINPro;
   font-size: 24px;
@@ -50,4 +60,23 @@
   height: 50px;
   display: inline-block;
   vertical-align: middle;
+}
+
+.headerbar__left {
+  flex: 1 1 auto;
+}
+
+.headerbar__right {
+  flex: 0 0 auto;
+}
+
+.headerbar__settings {
+  display: block;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  width: 24px;
+  height: 24px;
+  background-color: transparent;
+  background-image: url(../assets/images/icon-settings.svg);
 }
\ No newline at end of file
diff --git a/app/components/HeaderBar.js b/app/components/HeaderBar.js
index ce5d039f1f..decf561f5d 100644
--- a/app/components/HeaderBar.js
+++ b/app/components/HeaderBar.js
@@ -1,4 +1,5 @@
 import React, { Component, PropTypes } from 'react';
+import { If } from 'react-if';
 import Enum from '../lib/enum';
 
 export default class HeaderBar extends Component {
@@ -7,7 +8,10 @@ export default class HeaderBar extends Component {
   static Style = Enum('default', 'error', 'success');
 
   static propTypes = {
-    style: PropTypes.string
+    style: PropTypes.string,
+    hidden: PropTypes.bool,
+    showSettings: PropTypes.bool,
+    onSettings: PropTypes.func
   };
 
   render() {
@@ -18,10 +22,25 @@ export default class HeaderBar extends Component {
       containerClass.push(`headerbar--style-${style}`);
     }
 
+    if(this.props.hidden) {
+      containerClass.push('headerbar--hidden');
+    }
+
     return (
       <div className={ containerClass.join(' ') }>
-        <img className="headerbar__logo" src="./assets/images/logo-icon.svg" />
-        <h2 className="headerbar__title">MULLVAD VPN</h2>
+        <If condition={ !this.props.hidden }>
+          <div className="headerbar__container">
+            <div className="headerbar__left">
+              <img className="headerbar__logo" src="./assets/images/logo-icon.svg" />
+              <h2 className="headerbar__title">MULLVAD VPN</h2>
+            </div>
+            <If condition={ !!this.props.showSettings }>
+              <div className="headerbar__right">
+                <button className="headerbar__settings" onClick={ this.props.onSettings } />
+              </div>
+            </If>
+          </div>
+        </If>
       </div>
     );
   }
diff --git a/app/components/Layout.js b/app/components/Layout.js
index 50f52e7dca..c4e66aed85 100644
--- a/app/components/Layout.js
+++ b/app/components/Layout.js
@@ -8,7 +8,7 @@ export class Header extends Component {
   render() {
     return (
       <div className="layout__header">
-        <HeaderBar {...this.props} />
+        <HeaderBar { ...this.props } />
       </div>
     );
   }
@@ -22,7 +22,7 @@ export class Container extends Component {
   render() {
     return (
       <div className="layout__container">
-        {this.props.children}
+        { this.props.children }
       </div>
     );
   }
@@ -30,12 +30,16 @@ export class Container extends Component {
 
 export class Layout extends Component {
   static propTypes = {
-    children: PropTypes.arrayOf(PropTypes.node).isRequired
+    children: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.element),
+      PropTypes.element,
+    ])
   };
+  
   render() {
     return (
       <div className="layout">
-        {this.props.children}
+        { this.props.children }
       </div>
     );
   }
diff --git a/app/components/Settings.css b/app/components/Settings.css
new file mode 100644
index 0000000000..2468e972f5
--- /dev/null
+++ b/app/components/Settings.css
@@ -0,0 +1,14 @@
+.settings {
+
+}
+
+.settings__close {
+  display: block;
+  border: 0;
+  padding: 0;
+  margin: 0 0 0 12px;
+  width: 24px;
+  height: 24px;
+  background-color: transparent;
+  background-image: url(../assets/images/icon-close.svg);
+}
diff --git a/app/components/Settings.js b/app/components/Settings.js
new file mode 100644
index 0000000000..6e077356c0
--- /dev/null
+++ b/app/components/Settings.js
@@ -0,0 +1,26 @@
+import React, { Component, PropTypes } from 'react';
+import { Layout, Container, Header } from './Layout';
+
+export default class Settings extends Component {
+
+  static propTypes = {
+    logout: PropTypes.func.isRequired
+  }
+
+  onClose() {
+    this.props.router.push('/connect');
+  }
+
+  render() {
+    return (
+      <Layout>
+        <Header hidden={ true } />
+        <Container>
+          <div className="settings">
+            <button className="settings__close" onClick={ ::this.onClose } />
+          </div>
+        </Container>
+      </Layout>
+    );
+  }
+}