Add account subview

4 files changed, 194 insertions, 54 deletions

diff --git a/app/components/Account.css b/app/components/Account.css
new file mode 100644
index 0000000000..00b620fc7f
--- /dev/null
+++ b/app/components/Account.css
@@ -0,0 +1,91 @@
+.account {
+  background: #192E45;
+  height: 100%;
+}
+
+.account__container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.account__header {
+  flex: 0 0 auto;
+  padding: 40px 24px 24px;
+  position: relative; /* anchor for close button */
+}
+
+.account__close {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  top: 24px;
+  left: 12px;
+  z-index: 1; /* part of .account__container convers the button */
+
+}
+
+.account__close-icon {
+  opacity: 0.6;
+  margin-right: 8px;
+}
+
+.account__close-title {
+  font-family: "Open Sans";
+	font-size: 13px;
+	font-weight: 600;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.account__title {
+  font-family: DINPro;
+  font-size: 32px;
+  font-weight: 900;
+  line-height: 40px;
+  color: #FFFFFF;
+}
+
+.account__content {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.account__main {
+  margin-bottom: 24px;
+}
+
+.account__footer {
+  padding: 24px;
+}
+
+.account__row {
+  padding: 0 24px;
+}
+
+.account__row + .account__row {
+  margin-top: 24px;
+}
+
+.account__row-label {
+  font-family: "Open Sans";
+	font-size: 13px;
+	font-weight: 600;
+	color: rgba(255, 255, 255, 0.8);
+  margin-bottom: 8px;
+}
+
+.account__row-value {
+  font-family: "Open Sans";
+	font-size: 16px;
+	font-weight: 800;
+	color: rgba(255, 255, 255, 0.8);
+}
+
+.account__footer .button + .button {
+  margin-top: 24px;
+}
\ No newline at end of file
diff --git a/app/components/Account.js b/app/components/Account.js
new file mode 100644
index 0000000000..e724d314c5
--- /dev/null
+++ b/app/components/Account.js
@@ -0,0 +1,72 @@
+import React, { Component, PropTypes } from 'react';
+import { If, Then } from 'react-if';
+import { Layout, Container, Header } from './Layout';
+import { formatAccount } from '../lib/formatters';
+import { LoginState } from '../enums';
+
+export default class Account extends Component {
+
+  static propTypes = {
+    onLogout: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
+    onExternalLink: PropTypes.func.isRequired
+  }
+
+  onClose() {
+    this.props.onClose();
+  }
+
+  onExternalLink(type) {
+    this.props.onExternalLink(type);
+  }
+
+  onLogout() {
+    this.props.onLogout();
+  }
+
+  render() {
+    const isLoggedIn = this.props.user.status === LoginState.ok;
+    let formattedAccountId = formatAccount(this.props.user.account);
+
+    return (
+      <Layout>
+        <Header hidden={ true } style={ Header.Style.defaultDark } />
+        <Container>
+          <div className="account">
+            <div className="account__close" onClick={ ::this.onClose }>
+              <img className="account__close-icon" src="./assets/images/icon-back.svg" />
+              <span className="account__close-title">Settings</span>
+            </div>
+            <div className="account__container">
+            
+              <div className="account__header">
+                <h2 className="account__title">Account</h2>
+              </div> 
+
+              <div className="account__content">
+                <div className="account__main">
+                
+                  <div className="account__row">
+                    <div className="account__row-label">Account ID</div>
+                    <div className="account__row-value">{ formattedAccountId }</div>
+                  </div>
+
+                  <div className="account__row">
+                    <div className="account__row-label">Paid until</div>
+                    <div className="account__row-value">4:20pm, 12 November 2017</div>
+                  </div>
+
+                  <div className="account__footer">
+                    <button className="button button--positive" onClick={ this.onExternalLink.bind(this, 'purchase') }>Buy more time</button>
+                    <button className="button button--negative" onClick={ ::this.onLogout }>Logout</button>
+                  </div>
+
+                </div>
+              </div>
+            </div>
+          </div>
+        </Container>
+      </Layout>
+    );
+  }
+}
diff --git a/app/components/Settings.css b/app/components/Settings.css
index 4189a0908e..5485efd20e 100644
--- a/app/components/Settings.css
+++ b/app/components/Settings.css
@@ -46,35 +46,6 @@
   color: #FFFFFF;
 }
 
-.settings__account {
-  padding: 0 24px;
-}
-
-.settings__account-label {
-  display: inline-block;
-  vertical-align: baseline;
-  font-family: "Open Sans";
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 20px;
-  color: rgba(255,255,255,0.8);
-}
-
-.settings__account-id {
-  display: inline-block;
-  vertical-align: baseline;
-  font-family: "Open Sans";
-  font-size: 16px;
-  font-weight: 800;
-  line-height: 20px;
-  color: rgba(255,255,255,0.8);
-  margin-left: 8px;
-}
-
-.settings__main {
-  margin-bottom: 24px;
-}
-
 .settings__cell {
   background-color:rgba(41,71,115,1);
   padding: 15px 24px;
@@ -83,6 +54,15 @@
   align-items: center;
 }
 
+.settings__cell-disclosure {
+  display: block;
+  margin-left: 8px;
+}
+
+.settings__cell-spacer {
+  height: 24px;
+}
+
 .settings__cell--active:hover {
   background-color: rgba(41,71,115,0.9);
 }
@@ -111,6 +91,13 @@
   flex: 0 0 auto;
 }
 
+.settings__account-paid-until-label {
+  font-family: "Open Sans";
+	font-size: 13px;
+	font-weight: 800;
+  color: rgba(255, 255, 255, 0.8);
+}
+
 .settings__cell-footer {
   padding: 8px 24px 24px;
   font-family: "Open Sans";
diff --git a/app/components/Settings.js b/app/components/Settings.js
index 153627b646..4275ef77fe 100644
--- a/app/components/Settings.js
+++ b/app/components/Settings.js
@@ -3,14 +3,15 @@ import { If, Then } from 'react-if';
 import { Layout, Container, Header } from './Layout';
 import Switch from './Switch';
 import CustomScrollbars from './CustomScrollbars';
-import { formatAccount } from '../lib/formatters';
 import { LoginState } from '../enums';
 
 export default class Settings extends Component {
 
   static propTypes = {
+    onQuit: PropTypes.func.isRequired,
     onLogout: PropTypes.func.isRequired,
     onClose: PropTypes.func.isRequired,
+    onViewAccount: PropTypes.func.isRequired,
     onExternalLink: PropTypes.func.isRequired,
     onUpdateSettings: PropTypes.func.isRequired
   }
@@ -33,10 +34,6 @@ export default class Settings extends Component {
 
   render() {
     const isLoggedIn = this.props.user.status === LoginState.ok;
-    let formattedAccountId;
-    if(isLoggedIn) {
-      formattedAccountId = formatAccount(this.props.user.account);
-    }
 
     return (
       <Layout>
@@ -56,6 +53,16 @@ export default class Settings extends Component {
                     <If condition={ isLoggedIn }>
                       <Then>
                         <div>
+
+                          <div className="settings__cell settings__cell--disclosure" onClick={ this.props.onViewAccount }>
+                            <div className="settings__cell-label">Account</div>
+                            <div className="settings__cell-value">
+                              <span className="settings__account-paid-until-label">12 DAYS LEFT</span>
+                            </div>
+                            <img className="settings__cell-disclosure" src="assets/images/icon-chevron.svg" />
+                          </div>
+                          <div className="settings__cell-spacer"></div>
+
                           <div className="settings__cell">
                             <div className="settings__cell-label">Auto-secure</div>
                             <div className="settings__cell-value">
@@ -81,26 +88,9 @@ export default class Settings extends Component {
                     </div>
                   </div>
 
-                  { /* show account details when logged in */ } 
-                  <If condition={ isLoggedIn }>
-                    <div>
-                      <div className="settings__account">
-                        <div className="settings__account-row">
-                          <div className="settings__account-label">Account ID</div>
-                          <div className="settings__account-id">{ formattedAccountId }</div>
-                        </div>
-                        <div className="settings__account-row">
-                          <div className="settings__account-label">Time remaining</div>
-                          <div className="settings__account-id">12 days</div>
-                        </div>
-                      </div>
-
-                      <div className="settings__footer">
-                        <button className="button button--neutral" onClick={ this.onExternalLink.bind(this, 'purchase') }>Buy more time</button>
-                        <button className="button button--negative" onClick={ ::this.onLogout }>Logout</button>
-                      </div>
-                    </div>
-                  </If>
+                  <div className="settings__footer">
+                    <button className="button button--negative" onClick={ this.props.onQuit }>Quit app</button>
+                  </div>
 
                 </div>
               </CustomScrollbars>