Address Add Token design feedback

2 files changed, 11 insertions, 7 deletions

diff --git a/ui/app/add-token.js b/ui/app/add-token.js
index ebdd220aa..ea4f75835 100644
--- a/ui/app/add-token.js
+++ b/ui/app/add-token.js
@@ -310,9 +310,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',
@@ -390,12 +387,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 +401,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..53600d00e 100644
--- a/ui/app/css/itcss/components/add-token.scss
+++ b/ui/app/css/itcss/components/add-token.scss
@@ -31,7 +31,7 @@
 
       span {
         font-family: Roboto;
-        font-size: 16px; 
+        font-size: 16px;
         line-height: 21px;
         margin-left: 8px;
       }
@@ -44,6 +44,11 @@
       margin-top: 4px;
     }
 
+    &__subtitle {
+      margin-top: 15px;
+      margin-bottom: 21px;
+    }
+
     &__tabs {
       margin-left: 22px;
       display: flex;
@@ -65,6 +70,7 @@
       &__unselected:hover {
         color: $black;
         border-bottom: none;
+        cursor: pointer;
       }
 
       &__selected {
@@ -124,7 +130,7 @@
   }
 
   &__confirmation-description {
-    margin: 12px 0;
+    margin: 20px 0 40px 0;
   }
 
   &__content-container {