Merge branch 'master' of https://github.com/MetaMask/metamask-extension into cb-254

4 files changed, 45 insertions, 28 deletions

diff --git a/ui/app/components/pages/add-token.js b/ui/app/components/pages/add-token.js
index d387720e5..5627760eb 100644
--- a/ui/app/components/pages/add-token.js
+++ b/ui/app/components/pages/add-token.js
@@ -56,6 +56,7 @@ inherits(AddTokenScreen, Component)
 function AddTokenScreen () {
   this.state = {
     isShowingConfirmation: false,
+    isShowingInfoBox: true,
     customAddress: '',
     customSymbol: '',
     customDecimals: '',
@@ -310,9 +311,6 @@ AddTokenScreen.prototype.renderConfirmation = function () {
   return (
     h('div.add-token', [
       h('div.add-token__wrapper', [
-        h('div.add-token__title-container.add-token__confirmation-title', [
-          h('div.add-token__description', this.context.t('likeToAddTokens')),
-        ]),
         h('div.add-token__content-container.add-token__confirmation-content', [
           h('div.add-token__description.add-token__confirmation-description', this.context.t('balances')),
           h('div.add-token__confirmation-token-list',
@@ -347,18 +345,22 @@ AddTokenScreen.prototype.displayTab = function (selectedTab) {
 }
 
 AddTokenScreen.prototype.renderTabs = function () {
-  const { displayedTab, errors } = this.state
+  const { isShowingInfoBox, displayedTab, errors } = this.state
 
   return displayedTab === 'CUSTOM_TOKEN'
     ? this.renderCustomForm()
     : h('div', [
     h('div.add-token__wrapper', [
       h('div.add-token__content-container', [
-        h('div.add-token__info-box', [
-          h('div.add-token__info-box__close'),
+        isShowingInfoBox && h('div.add-token__info-box', [
+          h('div.add-token__info-box__close', {
+            onClick: () => this.setState({ isShowingInfoBox: false }),
+          }),
           h('div.add-token__info-box__title', this.context.t('whatsThis')),
           h('div.add-token__info-box__copy', this.context.t('keepTrackTokens')),
-          h('div.add-token__info-box__copy--blue', this.context.t('learnMore')),
+          h('a.add-token__info-box__copy--blue', {
+            href: 'http://metamask.helpscoutdocs.com/article/16-managing-erc20-tokens',
+          }, this.context.t('learnMore')),
         ]),
         h('div.add-token__input-container', [
           h('input.add-token__input', {
@@ -390,12 +392,13 @@ AddTokenScreen.prototype.render = function () {
         h('span', this.context.t('cancel')),
       ]),
       h('div.add-token__header__title', this.context.t('addTokens')),
+      isShowingConfirmation && h('div.add-token__header__subtitle', this.context.t('likeToAddTokens')),
       !isShowingConfirmation && h('div.add-token__header__tabs', [
 
         h('div.add-token__header__tabs__tab', {
           className: classnames('add-token__header__tabs__tab', {
             'add-token__header__tabs__selected': displayedTab === 'SEARCH',
-            'add-token__header__tabs__unselected cursor-pointer': displayedTab !== 'SEARCH',
+            'add-token__header__tabs__unselected': displayedTab !== 'SEARCH',
           }),
           onClick: () => this.displayTab('SEARCH'),
         }, this.context.t('search')),
@@ -403,7 +406,7 @@ AddTokenScreen.prototype.render = function () {
         h('div.add-token__header__tabs__tab', {
           className: classnames('add-token__header__tabs__tab', {
             'add-token__header__tabs__selected': displayedTab === 'CUSTOM_TOKEN',
-            'add-token__header__tabs__unselected cursor-pointer': displayedTab !== 'CUSTOM_TOKEN',
+            'add-token__header__tabs__unselected': displayedTab !== 'CUSTOM_TOKEN',
           }),
           onClick: () => this.displayTab('CUSTOM_TOKEN'),
         }, this.context.t('customToken')),
diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss
index f5c1de67c..2fdda6f43 100644
--- a/ui/app/css/itcss/components/add-token.scss
+++ b/ui/app/css/itcss/components/add-token.scss
@@ -8,6 +8,7 @@
   font-family: 'Roboto';
   background: white;
   border-radius: 8px;
+  box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.08);
 
   &__wrapper {
     background-color: $white;
@@ -20,7 +21,7 @@
   &__header {
     display: flex;
     flex-flow: column nowrap;
-    padding: 16px 16px 0px;
+    padding: 20px 20px 0px;
     border-bottom: 1px solid $geyser;
     flex: 0 0 auto;
 
@@ -31,7 +32,8 @@
 
       span {
         font-family: Roboto;
-        font-size: 16px; 
+        font-size: 16px;
+        font-weight: 400;
         line-height: 21px;
         margin-left: 8px;
       }
@@ -44,8 +46,13 @@
       margin-top: 4px;
     }
 
+    &__subtitle {
+      font-weight: 400;
+      margin-top: 15px;
+      margin-bottom: 21px;
+    }
+
     &__tabs {
-      margin-left: 22px;
       display: flex;
 
       &__tab {
@@ -54,6 +61,7 @@
         color: $dusty-gray;
         font-family: Roboto;
         font-size: 18px;
+        font-weight: 400;
         line-height: 24px;
         text-align: center;
       }
@@ -65,6 +73,7 @@
       &__unselected:hover {
         color: $black;
         border-bottom: none;
+        cursor: pointer;
       }
 
       &__selected {
@@ -76,7 +85,7 @@
 
   &__info-box {
     height: 96px;
-    margin: 20px 24px 0px;
+    margin: 20px 20px 0px;
     border-radius: 4px;
     background-color: $alabaster;
     position: relative;
@@ -98,6 +107,7 @@
       color: $mid-gray;
       font-family: Roboto;
       font-size: 14px;
+      font-weight: 400;
       margin-top: 15px;
       margin-bottom: 9px;
     }
@@ -107,6 +117,7 @@
       color: $mid-gray;
       font-family: Roboto;
       font-size: 12px;
+      font-weight: 400;
       line-height: 18px;
     }
 
@@ -124,7 +135,8 @@
   }
 
   &__confirmation-description {
-    margin: 12px 0;
+    font-weight: 400;
+    margin: 20px 0 40px 0;
   }
 
   &__content-container {
@@ -151,7 +163,7 @@
   &__input,
   &__add-custom-input {
     height: 54px;
-    padding: 21px 6px;
+    padding: 0px 20px;
     border: 1px solid $geyser;
     border-radius: 4px;
     margin: 22px 24px;
@@ -232,6 +244,7 @@
 
   &__add-custom-label {
     font-size: 16px;
+    font-weight: 400;
     line-height: 21px;
     margin-left: 22px;
     color: $scorpion;
@@ -274,9 +287,11 @@
     color: #5B5D67;
     font-family: Roboto;
     font-size: 18px;
+    font-weight: 400;
     line-height: 24px;
     margin-left: 24px;
     margin-top: 8px;
+    margin-bottom: 20px;
   }
 
   &__token-icons-container {
@@ -317,6 +332,7 @@
   }
 
   &__token-name {
+    font-weight: 400;
     font-size: 14px;
     line-height: 19px;
   }
@@ -368,6 +384,7 @@
       &__symbol {
         color: $scorpion;
         font-size: 16px;
+        font-weight: 400;
         line-height: 24px;
       }
     }
diff --git a/ui/app/store.js b/ui/app/store.js
index 3bafdee11..feebbabc0 100644
--- a/ui/app/store.js
+++ b/ui/app/store.js
@@ -4,7 +4,7 @@ const thunkMiddleware = require('redux-thunk').default
 const rootReducer = require('./reducers')
 const createLogger = require('redux-logger').createLogger
 
-global.METAMASK_DEBUG = 'GULP_METAMASK_DEBUG'
+global.METAMASK_DEBUG = process.env.METAMASK_DEBUG
 
 module.exports = configureStore
 
diff --git a/ui/i18n-helper.js b/ui/i18n-helper.js
index db2fd2dc4..3eee55ae9 100644
--- a/ui/i18n-helper.js
+++ b/ui/i18n-helper.js
@@ -25,18 +25,15 @@ const getMessage = (locale, key, substitutions) => {
   return phrase
 }
 
-function fetchLocale (localeName) {
-  return new Promise((resolve, reject) => {
-    return fetch(`./_locales/${localeName}/messages.json`)
-      .then(response => response.json())
-      .then(
-        locale => resolve(locale),
-        error => {
-          log.error(`failed to fetch ${localeName} locale because of ${error}`)
-          resolve({})
-        }
-      )
-  })
+async function fetchLocale (localeName) {
+  try {
+    const response = await fetch(`./_locales/${localeName}/messages.json`)
+    const locale = await response.json()
+    return locale
+  } catch (error) {
+    log.error(`failed to fetch ${localeName} locale because of ${error}`)
+    return {}
+  }
 }
 
 module.exports = {