Add better style reset, more IdentityStore changes

internal_packages/onboarding/lib/onboarding-store.es6

@@ -16,7 +16,16 @@ class OnboardingStore extends NylasStore {
     this.listenTo(OnboardingActions.setAccountInfo, this._onSetAccountInfo);
     this.listenTo(OnboardingActions.setAccountType, this._onSetAccountType);
 
-    const {existingAccount} = NylasEnv.getWindowProps();
+    const {existingAccount, addingAccount} = NylasEnv.getWindowProps();
+
+    const identity = IdentityStore.identity();
+    if (identity) {
+      this._accountInfo = {
+        name: `${identity.firstname || ""} ${identity.lastname || ""}`,
+      };
+    } else {
+      this._accountInfo = {};
+    }
 
     if (existingAccount) {
       const accountType = accountTypeForProvider(existingAccount.provider);
@@ -26,16 +35,10 @@ class OnboardingStore extends NylasStore {
         email: existingAccount.emailAddress,
       };
       this._onSetAccountType(accountType);
+    } else if (addingAccount) {
+      this._pageStack = ['account-choose'];
     } else {
-      const identity = IdentityStore.identity();
       this._pageStack = ['welcome'];
-      if (identity) {
-        this._accountInfo = {
-          name: `${identity.firstname || ""} ${identity.lastname || ""}`,
-        };
-      } else {
-        this._accountInfo = {};
-      }
     }
   }
 

internal_packages/onboarding/lib/page-authenticate.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import classnames from 'classnames';
 import ReactDOM from 'react-dom';
+import {IdentityStore} from 'nylas-exports';
 import {RetinaImg} from 'nylas-component-kit';
 import OnboardingActions from './onboarding-actions';
 import networkErrors from 'chromium-net-errors';

internal_packages/onboarding/stylesheets/onboarding-reset.less

@@ -0,0 +1,184 @@
+/* The Onboarding window should never adopt theme styles. This re-assigns UI
+variables and resets commonly overridden styles to ensure the onboarding window
+always looks good. Previously we tried to make the theme just not load in the
+window, but it uses a hot window which makes that difficult now. */
+
+@black:        #231f20;
+@gray-base:    #0a0b0c;
+@gray-darker:  lighten(@gray-base, 13.5%); // #222
+@gray-dark:    lighten(@gray-base, 20%);   // #333
+@gray:         lighten(@gray-base, 33.5%); // #555
+@gray-light:   lighten(@gray-base, 46.7%); // #777
+@gray-lighter: lighten(@gray-base, 92.5%); // #eee
+@white:        #ffffff;
+
+@blue-dark:    #3187e1;
+@blue:         #419bf9;
+
+//== Color Descriptors
+@accent-primary:      @blue;
+@accent-primary-dark: @blue-dark;
+
+@background-primary:     @white;
+@background-off-primary: #fdfdfd;
+@background-secondary:   #f6f6f6;
+@background-tertiary:    #6d7987;
+
+@text-color:                     @black;
+@text-color-subtle:              fadeout(@text-color, 20%);
+@text-color-very-subtle:         fadeout(@text-color, 50%);
+@text-color-inverse:             @white;
+@text-color-inverse-subtle:      fadeout(@text-color-inverse, 20%);
+@text-color-inverse-very-subtle: fadeout(@text-color-inverse, 50%);
+
+@text-color-heading: #434648;
+@font-family-sans-serif:  "Nylas-Pro", "Helvetica", sans-serif;
+@font-family-serif:       Georgia, "Times New Roman", Times, serif;
+@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
+
+@font-family:             @font-family-sans-serif;
+@font-family-heading:     @font-family-sans-serif;
+
+@line-height-base:         1.5; // 22.5/15
+@line-height-computed:     floor((@font-size-base * @line-height-base)); // ~20px
+@line-height-heading:      1.1;
+
+@component-active-color: @accent-primary-dark;
+@component-active-bg:    @background-primary;
+
+@input-bg:                       @white;
+@input-bg-disabled:              @gray-lighter;
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: @font-family-heading;
+  line-height: @line-height-heading;
+  color: @text-color-heading;
+
+  small,
+  .small {
+    line-height: 1;
+  }
+}
+
+h1 {
+  font-size:   @font-size-h1;
+  font-weight: @font-weight-semi-bold;
+}
+h2 {
+  font-size:   @font-size-h2;
+  font-weight: @font-weight-blond;
+}
+h3 {
+  font-size:   @font-size-h3;
+  font-weight: @font-weight-blond;
+}
+h4 { font-size: @font-size-h4; }
+h5 { font-size: @font-size-h5; }
+h6 { font-size: @font-size-h6; }
+
+h1, h2, h3{
+  margin-top: @line-height-computed;
+  margin-bottom: (@line-height-computed / 2);
+
+  small,
+  .small {
+    font-size: 65%;
+  }
+}
+h4, h5, h6 {
+  margin-top: (@line-height-computed / 2);
+  margin-bottom: (@line-height-computed / 2);
+
+  small,
+  .small {
+    font-size: 75%;
+  }
+}
+
+
+.btn {
+  padding: 0 0.8em;
+  border-radius: @border-radius-base;
+  border: 0;
+  cursor: default;
+  display:inline-block;
+  color: @btn-default-text-color;
+  background: @background-primary;
+
+  img.content-mask { background-color: @btn-default-text-color; }
+
+  // Use 4 box shadows to create a 0.5px hairline around the button, and another
+  // for the actual shadow. Pending https://code.google.com/p/chromium/issues/detail?id=236371
+  // Yes, 1px border looks really bad on retina.
+  box-shadow: 0 0.5px 0 rgba(0,0,0,0.15), 0 -0.5px 0 rgba(0,0,0,0.15), 0.5px 0 0 rgba(0,0,0,0.15), -0.5px 0 0 rgba(0,0,0,0.15), 0 0.5px 1px rgba(0, 0, 0, 0.15);
+
+  height: 1.9em;
+  line-height: 1.9em;
+
+  .text {
+    margin-left: 6px;
+  }
+
+  &:active {
+    cursor: default;
+    background: darken(@btn-default-bg-color, 9%);
+  }
+  &:focus {
+    outline: none
+  }
+
+  font-size: @font-size-small;
+
+  &.btn-small {
+    font-size: @font-size-smaller;
+  }
+  &.btn-large {
+    font-size: @font-size-base;
+    padding: 0 1.3em;
+    line-height: 2.2em;
+    height: 2.3em;
+  }
+  &.btn-larger {
+    font-size: @font-size-large;
+    padding: 0 1.6em;
+  }
+
+  &.btn-disabled {
+    color:      fadeout(@btn-default-text-color, 40%);
+    background: fadeout(@btn-default-bg-color, 15%);
+    &:active {
+      background: fadeout(@btn-default-bg-color, 15%);
+    }
+  }
+
+  &.btn-emphasis {
+    position: relative;
+    color: @btn-emphasis-text-color;
+    font-weight: @font-weight-medium;
+
+    img.content-mask { background-color:@btn-emphasis-text-color; }
+
+    background: linear-gradient(to bottom, #6bb1f9 0%, #0a80ff 100%);
+    box-shadow: none;
+    border: 1px solid darken(@btn-emphasis-bg-color, 7%);
+
+    &.btn-disabled {
+      opacity: 0.4;
+    }
+
+    &:before {
+      content: ' ';
+      width: calc(~"100% + 2px");
+      height: calc(~"100% + 2px");
+      border-radius: @border-radius-base + 1;
+      top: -1px;
+      left: -1px;
+      position: absolute;
+      z-index: -1;
+      background: linear-gradient(to bottom, #4ca2f9 0%, #015cff 100%);
+    }
+    &:active {
+      background: -webkit-gradient(linear, left top, left bottom, from(darken(@btn-emphasis-bg-color,10%)), to(darken(@btn-emphasis-bg-color, 4%)));
+    }
+  }
+}

internal_packages/onboarding/stylesheets/onboarding.less

@@ -1,4 +1,4 @@
-@import "ui-variables";
+@import "onboarding-reset";
 
 @-webkit-keyframes fadein {
   from { opacity: 0; }

src/browser/application.es6

@@ -313,10 +313,16 @@ export default class Application extends EventEmitter {
     });
 
     this.on('application:add-account', ({existingAccount} = {}) => {
-      this.windowManager.ensureWindow(WindowManager.ONBOARDING_WINDOW, {
-        title: "Add an Account",
-        windowProps: { existingAccount },
-      })
+      const onboarding = this.windowManager.get(WindowManager.ONBOARDING_WINDOW);
+      if (onboarding) {
+        onboarding.show();
+        onboarding.focus();
+      } else {
+        this.windowManager.ensureWindow(WindowManager.ONBOARDING_WINDOW, {
+          title: "Add an Account",
+          windowProps: { addingAccount: true, existingAccount },
+        });
+      }
     });
 
     this.on('application:new-message', () => {

src/flux/nylas-api-request.es6

@@ -3,6 +3,7 @@ import Utils from './models/utils'
 import Actions from './actions'
 import {APIError} from './errors'
 import PriorityUICoordinator from '../priority-ui-coordinator'
+import IdentityStore from './stores/identity-store'
 import NylasAPI from './nylas-api'
 
 export default class NylasAPIRequest {
@@ -24,30 +25,35 @@ export default class NylasAPIRequest {
     }
   }
 
+  constructAuthHeader() {
+    if (!this.options.accountId) {
+      throw new Error("Cannot make Nylas request without specifying `auth` or an `accountId`.");
+    }
+
+    const identity = IdentityStore.identity();
+    if (!identity || !identity.token) {
+      throw new Error("Identity is missing or identity token is not present.");
+    }
+
+    const accountToken = this.api.accessTokenForAccountId(this.options.accountId);
+    if (!accountToken) {
+      throw new Error(`Cannot make Nylas request for account ${this.options.accountId} auth token.`);
+    }
+
+    return {
+      user: accountToken,
+      pass: identity.token,
+      sendImmediately: true,
+    };
+  }
+
   run() {
     if (!this.options.auth) {
-      if (!this.options.accountId) {
-        const err = new APIError({
-          statusCode: 400,
-          body: "Cannot make Nylas request without specifying `auth` or an `accountId`.",
-        });
-        return Promise.reject(err);
+      try {
+        this.options.auth = this.constructAuthHeader();
+      } catch (err) {
+        return Promise.reject(new APIError({body: err.message, statusCode: 400}));
       }
-
-      const token = this.api.accessTokenForAccountId(this.options.accountId);
-      if (!token) {
-        const err = new APIError({
-          statusCode: 400,
-          body: `Cannot make Nylas request for account ${this.options.accountId} auth token.`,
-        });
-        return Promise.reject(err);
-      }
-
-      this.options.auth = {
-        user: token,
-        pass: '',
-        sendImmediately: true,
-      };
     }
 
     const requestId = Utils.generateTempId();

src/theme-manager.coffee

@@ -125,11 +125,6 @@ class ThemeManager
         console.warn("Enabled theme '#{themeName}' is not installed.")
       false
 
-    # Do not load user themes into the onboarding window, because it uses
-    # a wide range of hard-coded colors and assets and should always be on-brand.
-    if NylasEnv.getWindowType() is 'onboarding'
-      themeNames = []
-
     # Use a built-in theme any time the configured themes are not
     # available.
     if themeNames.length is 0