Add styling to Subscription tab in prefs

internal_packages/preferences/lib/tabs/preferences-accounts.jsx

@@ -7,7 +7,6 @@ import PreferencesAccountDetails from './preferences-account-details';
 
 
 class PreferencesAccounts extends React.Component {
-
   static displayName = 'PreferencesAccounts';
 
   constructor() {

internal_packages/preferences/lib/tabs/preferences-identity.jsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import {shell} from 'electron';
+import {Actions, IdentityStore} from 'nylas-exports';
 import {RetinaImg} from 'nylas-component-kit';
-import {IdentityStore} from 'nylas-exports';
 import request from 'request';
 
 class OpenIdentityPageButton extends React.Component {
   static propTypes = {
     destination: React.PropTypes.string,
     label: React.PropTypes.string,
+    img: React.PropTypes.string,
   }
 
   constructor(props) {
@@ -58,6 +59,14 @@ class OpenIdentityPageButton extends React.Component {
         </div>
       );
     }
+    if (this.props.img) {
+      return (
+        <div className="btn">
+          <RetinaImg name={this.props.img} mode={RetinaImg.Mode.ContentPreserve} />
+          &nbsp;&nbsp;{this.props.label}
+        </div>
+      )
+    }
     return (
       <div className="btn" onClick={this._onClick}>{this.props.label}</div>
     );
@@ -65,7 +74,6 @@ class OpenIdentityPageButton extends React.Component {
 }
 
 class PreferencesIdentity extends React.Component {
-
   static displayName = 'PreferencesIdentity';
 
   constructor() {
@@ -86,20 +94,45 @@ class PreferencesIdentity extends React.Component {
   getStateFromStores() {
     return {
       identity: IdentityStore.identity(),
+      trialDaysRemaining: IdentityStore.trialDaysRemaining(),
     };
   }
 
   render() {
+    const {identity, trialDaysRemaining} = this.state
+    const {firstname, lastname, email} = identity
     return (
       <div className="container-identity">
-        <div className="identity-content">
-          {JSON.stringify(this.state.identity)}
-          <OpenIdentityPageButton label="Go to web" destination="/billing" />
+        <div className="id-header">Nylas ID:</div>
+        <div className="identity-content-box">
+          <div className="row info-row">
+            <div className="logo">
+              <RetinaImg
+                name="prefs-identity-nylas-logo.png"
+                mode={RetinaImg.Mode.ContentPreserve}
+              />
+            </div>
+            <div className="identity-info">
+              <div className="name">{firstname} {lastname}</div>
+              <div className="email">{email}</div>
+              <div className="identity-actions">
+                <OpenIdentityPageButton label="Account Details" destination="/billing" />
+                <div className="btn" onClick={() => Actions.logoutNylasIdentity()}>Sign Out</div>
+              </div>
+            </div>
+          </div>
+          <div className="row trial-row">
+            <div>There are {trialDaysRemaining} days remaining in your trial of Nylas N1</div>
+            <OpenIdentityPageButton
+              img="ic-upgrade.png"
+              label="Upgrade to Nylas Pro"
+              destination="/billing"
+            />
+          </div>
         </div>
       </div>
     );
   }
-
 }
 
 export default PreferencesIdentity;

internal_packages/preferences/stylesheets/preferences-identity.less

@@ -0,0 +1,63 @@
+@import "ui-variables";
+
+.container-identity {
+  width: 50%;
+  margin: auto;
+  padding-top: @padding-base-vertical * 2;
+
+  .id-header {
+    color: @text-color-very-subtle;
+    margin-bottom: @padding-base-vertical * 2;
+  }
+
+  .identity-content-box {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    color: @text-color-subtle;
+    border-radius: @border-radius-large;
+    border: 1px solid @border-color-primary;
+    background-color: @background-secondary;
+
+    .row {
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+
+    .trial-row {
+      flex-direction: column;
+      align-items: flex-start;
+      border-top: 1px solid @border-color-primary;
+      padding: 20px;
+      padding-left: 137px;
+      &>div:first-child {
+        margin-bottom: @padding-base-vertical * 2;
+      }
+    }
+
+    .info-row {
+      padding: 30px;
+      .logo {
+        margin-right: 30px;
+      }
+      .identity-info {
+        line-height: 1.9em;
+        .name {
+          font-size: 1.2em;
+        }
+        .identity-actions {
+          margin-top: @padding-small-vertical + 1;
+          .btn {
+            width: 150px;
+            text-align: center;
+            &+.btn {
+              margin-left: @padding-base-horizontal;
+            }
+          }
+        }
+      }
+    }
+  }
+
+}

src/flux/stores/identity-store.es6

@@ -14,6 +14,9 @@ class IdentityStore extends NylasStore {
 
     this.URLRoot = "https://billing-staging.nylas.com";
 
+    // TODO
+    this._trialDaysRemaining = 14
+
     this.listenTo(Actions.setNylasIdentity, this._onSetNylasIdentity);
     this.listenTo(Actions.logoutNylasIdentity, this._onLogoutNylasIdentity);
 
@@ -35,6 +38,10 @@ class IdentityStore extends NylasStore {
     return this._identity;
   }
 
+  trialDaysRemaining() {
+    return this._trialDaysRemaining;
+  }
+
   _onLogoutNylasIdentity = () => {
     keytar.deletePassword(keytarServiceName, keytarIdentityKey);
     NylasEnv.config.unset(configIdentityKey);