Merge pull request #3834 from MetaMask/3734

Address Add Token design feedback

app/_locales/en/messages.json

@@ -56,7 +56,7 @@
     "message": "Balance:"
   },
   "balances": {
-    "message": "Your balances"
+    "message": "Token balance(s)"
   },
   "balanceIsInsufficientGas": {
     "message": "Insufficient balance for current gas total"

test/integration/lib/add-token.js

@@ -75,7 +75,7 @@ async function runAddTokenFlowTest (assert, done) {
   // Confirm Add token
   assert.equal(
     $('.add-token__description')[0].textContent,
-    'Would you like to add these tokens?',
+    'Token balance(s)',
     'confirm add token rendered'
   )
   assert.ok($('button.btn-primary--lg')[0], 'confirm add token button found')

ui/app/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')),

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;
       }
     }