From 0ab227d8a267c63109d671fd34509e7a417b9114 Mon Sep 17 00:00:00 2001 From: David Yoo Date: Mon, 2 Apr 2018 17:04:27 -0700 Subject: [PATCH 1/3] Address Add Token design feedback --- app/_locales/en/messages.json | 2 +- ui/app/add-token.js | 8 +++----- ui/app/css/itcss/components/add-token.scss | 10 ++++++++-- 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 34575b4dd..b372326ee 100644 --- a/app/_locales/en/messages.json +++ b/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" 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 { From 3d2b32167b72e026a50929ba4007e67b5442b425 Mon Sep 17 00:00:00 2001 From: David Yoo Date: Mon, 2 Apr 2018 17:21:30 -0700 Subject: [PATCH 2/3] Fix tests --- test/integration/lib/add-token.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/integration/lib/add-token.js b/test/integration/lib/add-token.js index cc04beb21..1840bdd39 100644 --- a/test/integration/lib/add-token.js +++ b/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') From 4ddf5d2516acc2f2ffac3a36a7114b42d95ce4be Mon Sep 17 00:00:00 2001 From: David Yoo Date: Tue, 3 Apr 2018 09:38:27 -0700 Subject: [PATCH 3/3] Address feedback --- ui/app/add-token.js | 13 +++++++++---- ui/app/css/itcss/components/add-token.scss | 19 +++++++++++++++---- 2 files changed, 24 insertions(+), 8 deletions(-) diff --git a/ui/app/add-token.js b/ui/app/add-token.js index ea4f75835..a73874320 100644 --- a/ui/app/add-token.js +++ b/ui/app/add-token.js @@ -56,6 +56,7 @@ inherits(AddTokenScreen, Component) function AddTokenScreen () { this.state = { isShowingConfirmation: false, + isShowingInfoBox: true, customAddress: '', customSymbol: '', customDecimals: '', @@ -344,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', { diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss index 53600d00e..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; @@ -32,6 +33,7 @@ span { font-family: Roboto; font-size: 16px; + font-weight: 400; line-height: 21px; margin-left: 8px; } @@ -45,12 +47,12 @@ } &__subtitle { + font-weight: 400; margin-top: 15px; margin-bottom: 21px; } &__tabs { - margin-left: 22px; display: flex; &__tab { @@ -59,6 +61,7 @@ color: $dusty-gray; font-family: Roboto; font-size: 18px; + font-weight: 400; line-height: 24px; text-align: center; } @@ -82,7 +85,7 @@ &__info-box { height: 96px; - margin: 20px 24px 0px; + margin: 20px 20px 0px; border-radius: 4px; background-color: $alabaster; position: relative; @@ -104,6 +107,7 @@ color: $mid-gray; font-family: Roboto; font-size: 14px; + font-weight: 400; margin-top: 15px; margin-bottom: 9px; } @@ -113,6 +117,7 @@ color: $mid-gray; font-family: Roboto; font-size: 12px; + font-weight: 400; line-height: 18px; } @@ -130,6 +135,7 @@ } &__confirmation-description { + font-weight: 400; margin: 20px 0 40px 0; } @@ -157,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; @@ -238,6 +244,7 @@ &__add-custom-label { font-size: 16px; + font-weight: 400; line-height: 21px; margin-left: 22px; color: $scorpion; @@ -280,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 { @@ -323,6 +332,7 @@ } &__token-name { + font-weight: 400; font-size: 14px; line-height: 19px; } @@ -374,6 +384,7 @@ &__symbol { color: $scorpion; font-size: 16px; + font-weight: 400; line-height: 24px; } }