From fcd890ef0179d87fada8e0bcd5529f3796636f13 Mon Sep 17 00:00:00 2001 From: Victor Baranov Date: Wed, 8 Aug 2018 13:33:56 +0300 Subject: [PATCH] Buy page customization for tests networks, header for Mainnet, header customization for all white pages --- app/images/arrow-right.svg | 4 +- old-ui/app/accounts/import/index.js | 6 +- old-ui/app/components/account-export.js | 1 + old-ui/app/components/buy-button-subview.js | 66 +++++++++---------- old-ui/app/components/custom-radio-list.js | 2 +- old-ui/app/components/pending-msg.js | 9 --- old-ui/app/components/qr-code.js | 8 +-- old-ui/app/components/token-list.js | 4 +- old-ui/app/config.js | 2 +- old-ui/app/css/index.css | 20 +++--- old-ui/app/info.js | 2 +- .../app/keychains/hd/create-vault-complete.js | 1 - old-ui/app/keychains/hd/restore-vault.js | 4 +- old-ui/app/settings.js | 2 +- test/e2e/metamask.spec.js | 2 +- 15 files changed, 58 insertions(+), 75 deletions(-) diff --git a/app/images/arrow-right.svg b/app/images/arrow-right.svg index a235d07da..d03192321 100644 --- a/app/images/arrow-right.svg +++ b/app/images/arrow-right.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/old-ui/app/accounts/import/index.js b/old-ui/app/accounts/import/index.js index ee3ec5a6d..c59b53ef9 100644 --- a/old-ui/app/accounts/import/index.js +++ b/old-ui/app/accounts/import/index.js @@ -60,7 +60,11 @@ AccountImportSubview.prototype.render = function () { left: '30px', }, }), - h('h2.page-subtitle', 'Import Accounts'), + h('h2.page-subtitle', { + style: { + fontFamily: 'Nunito SemiBold', + }, + }, 'Import Accounts'), ]), h('.error', { style: { diff --git a/old-ui/app/components/account-export.js b/old-ui/app/components/account-export.js index 3fc725c9e..ec40fe9c1 100644 --- a/old-ui/app/components/account-export.js +++ b/old-ui/app/components/account-export.js @@ -114,6 +114,7 @@ ExportAccountView.prototype.render = function () { h('label', { style: { textAlign: 'center', + fontFamily: 'Nunito Semibold', }, }, 'Your private key'), h('div.flex-row', [ diff --git a/old-ui/app/components/buy-button-subview.js b/old-ui/app/components/buy-button-subview.js index 3c540b774..3c3f9ca13 100644 --- a/old-ui/app/components/buy-button-subview.js +++ b/old-ui/app/components/buy-button-subview.js @@ -119,9 +119,9 @@ BuyButtonSubview.prototype.headerSubview = function () { width: '100%', background: '#ffffff', color: '#333333', - paddingBottom: '4px', paddingLeft: '30px', justifyContent: 'left', + fontFamily: 'Nunito Semibold', }, }, 'Select Service'), ]), @@ -154,49 +154,44 @@ BuyButtonSubview.prototype.primarySubview = function () { return ( h('div.flex-column', { style: { - alignItems: 'center', - margin: '20px 50px', + margin: '20px 30px', }, }, [ - network !== '99' ? h('button', { + network !== '99' ? h('p.cursor-pointer', { + style: {marginBottom: '10px'}, onClick: () => this.props.dispatch(actions.buyEth({ network })), - style: { - marginTop: '15px', - }, - }, label) : null, - network === '99' ? h('button', { + }, + [h('span', {style: {marginRight: '10px', color: '#6729a8'}}, label), h('i.arrow-right')]) : null, + network === '99' ? h('p.cursor-pointer', { + style: {marginBottom: '10px'}, onClick: () => this.props.dispatch(actions.buyEth({ network, exchange: 'binance' })), - style: { - marginTop: '15px', - }, - }, 'Binance') : null, - network === '99' ? h('button', { + }, [h('span', {style: {marginRight: '10px', color: '#6729a8'}}, 'Binance'), h('i.arrow-right')]) : null, + network === '99' ? h('p.cursor-pointer', { + style: {marginBottom: '10px'}, onClick: () => this.props.dispatch(actions.buyEth({ network, exchange: 'bibox' })), - style: { - marginTop: '15px', - }, - }, 'BiBox') : null, - network === '99' ? h('button', { + }, [h('span', {style: {marginRight: '10px', color: '#6729a8'}}, 'BiBox'), h('i.arrow-right')]) : null, + network === '99' ? h('p.cursor-pointer', { + style: {marginBottom: '10px'}, onClick: () => this.props.dispatch(actions.buyEth({ network, exchange: 'cex.plus' })), - style: { - marginTop: '15px', - }, - }, 'CEX Plus') : null, + }, [h('span', {style: {marginRight: '10px', color: '#6729a8'}}, 'CEX Plus'), h('i.arrow-right')]) : null, // Kovan only: Dharma loans beta network === '42' ? ( - h('button', { + h('p.cursor-pointer', { + style: {marginBottom: '10px'}, onClick: () => this.navigateTo('https://borrow.dharma.io/'), - style: { - marginTop: '15px', - }, - }, 'Borrow With Dharma (Beta)') + }, [h('span', {style: {marginRight: '10px', color: '#6729a8'}}, 'Borrow With Dharma (Beta)'), h('i.arrow-right')]) ) : null, ]) ) default: return ( - h('h2.error', 'Unknown network ID') + h('div', { + style: { + padding: '20px 30px', + }}, + h('h2.error', 'Unknown network ID') + ) ) } @@ -233,13 +228,12 @@ BuyButtonSubview.prototype.mainnetSubview = function () { h('h3', { style: { - paddingLeft: '15px', - fontFamily: 'Nunito Light', - width: '100vw', - background: '#6729a8', - color: '#ffffff', - paddingTop: '4px', - paddingBottom: '4px', + padding: '20px 30px', + fontFamily: 'Nunito Semibold', + color: '#333333', + paddingTop: '20px', + paddingBottom: '20px', + borderTop: '1px solid #e2e2e2', }, }, props.buyView.subview), diff --git a/old-ui/app/components/custom-radio-list.js b/old-ui/app/components/custom-radio-list.js index 9863323ed..6f5c772b6 100644 --- a/old-ui/app/components/custom-radio-list.js +++ b/old-ui/app/components/custom-radio-list.js @@ -47,7 +47,7 @@ RadioList.prototype.render = function () { if (props.subtext) { return h('.flex-row', {}, [ h('.radio-titles.font-pre-medium', label), - h('.radio-titles-subtext', `- ${props.subtext[label]}`), + h('.radio-titles-subtext.font-pre-medium', ` - ${props.subtext[label]}`), ]) } else { return h('.radio-titles.font-pre-medium', label) diff --git a/old-ui/app/components/pending-msg.js b/old-ui/app/components/pending-msg.js index 834719c53..df2481c97 100644 --- a/old-ui/app/components/pending-msg.js +++ b/old-ui/app/components/pending-msg.js @@ -40,15 +40,6 @@ PendingMsg.prototype.render = function () { dangerous side effects. Only sign messages from sites you fully trust with your entire account. This dangerous method will be removed in a future version. `, - h('a', { - href: 'https://medium.com/metamask/the-new-secure-way-to-sign-data-in-your-browser-6af9dd2a1527', - style: { color: 'rgb(247, 134, 28)' }, - onClick: (event) => { - event.preventDefault() - const url = 'https://medium.com/metamask/the-new-secure-way-to-sign-data-in-your-browser-6af9dd2a1527' - global.platform.openWindow({ url }) - }, - }, 'Read more here.'), ]), // message details diff --git a/old-ui/app/components/qr-code.js b/old-ui/app/components/qr-code.js index 63d7fe4e7..12a16cd2a 100644 --- a/old-ui/app/components/qr-code.js +++ b/old-ui/app/components/qr-code.js @@ -40,13 +40,7 @@ QrCodeView.prototype.render = function () { }, }, [ - this.props.warning ? this.props.warning && h('span.error.flex-center', { - style: { - textAlign: 'center', - width: '229px', - height: '82px', - }, - }, + this.props.warning ? this.props.warning && h('span.error.flex-center', this.props.warning) : null, h('#qr-container.flex-column', { diff --git a/old-ui/app/components/token-list.js b/old-ui/app/components/token-list.js index ad1ed6789..572a0e1c9 100644 --- a/old-ui/app/components/token-list.js +++ b/old-ui/app/components/token-list.js @@ -30,13 +30,13 @@ TokenList.prototype.render = function () { log.error(error) return h('.hotFix', { style: { - padding: '80px', + padding: '30px', }, }, [ 'We had trouble loading your token balances. You can view them ', h('span.hotFix', { style: { - color: 'rgba(247, 134, 28, 1)', + color: '#8fdc97', cursor: 'pointer', }, onClick: () => { diff --git a/old-ui/app/config.js b/old-ui/app/config.js index a97c40e84..4a46de669 100644 --- a/old-ui/app/config.js +++ b/old-ui/app/config.js @@ -50,7 +50,7 @@ ConfigScreen.prototype.render = function () { left: '30px', }, }), - h('h2.page-subtitle', 'Settings'), + h('h2', 'Settings'), ]), h('div', { diff --git a/old-ui/app/css/index.css b/old-ui/app/css/index.css index e5be28f08..bd2533bf1 100644 --- a/old-ui/app/css/index.css +++ b/old-ui/app/css/index.css @@ -138,16 +138,6 @@ app color: #909090; } -button.primary { - padding: 8px 12px; - background: #F7861C; - box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36); - color: white; - font-size: 1.1em; - font-family: 'Nunito Regular'; - text-transform: none; -} - button.btn-thin { border: 1px solid; border-color: #4D4D4D; @@ -322,6 +312,12 @@ app sections height: 14px; } +.arrow-right { + content: url('../images/arrow-right.svg'); + width: 14px; + height: 14px; +} + .fa-clipboard { content: url('../images/copy.svg'); width: 14px; @@ -384,6 +380,7 @@ app sections .section-title { border-top: 1px solid #e2e2e2; height: 80px; + font-family: 'Nunito Semibold'; } .trash { @@ -716,7 +713,8 @@ input.large-input { } .radio-titles-subtext { - + color: #777777; + font-family: 'Nunito SemiBold'; } .selected-exchange { diff --git a/old-ui/app/info.js b/old-ui/app/info.js index 2382bfef9..21e66bfdb 100644 --- a/old-ui/app/info.js +++ b/old-ui/app/info.js @@ -37,7 +37,7 @@ InfoScreen.prototype.render = function () { left: '30px', }, }), - h('h2.page-subtitle', 'Info'), + h('h2', 'Info'), ]), // main view diff --git a/old-ui/app/keychains/hd/create-vault-complete.js b/old-ui/app/keychains/hd/create-vault-complete.js index e2594df7e..743436d57 100644 --- a/old-ui/app/keychains/hd/create-vault-complete.js +++ b/old-ui/app/keychains/hd/create-vault-complete.js @@ -38,7 +38,6 @@ CreateVaultCompleteScreen.prototype.render = function () { color: '#333333', marginBottom: 8, width: '100%', - fontSize: '20px', padding: '30px 6px 6px 6px', }, }, [ diff --git a/old-ui/app/keychains/hd/restore-vault.js b/old-ui/app/keychains/hd/restore-vault.js index e3db750d8..9e4c75210 100644 --- a/old-ui/app/keychains/hd/restore-vault.js +++ b/old-ui/app/keychains/hd/restore-vault.js @@ -44,10 +44,9 @@ RestoreVaultScreen.prototype.render = function () { fontFamily: 'Nunito SemiBold', background: '#ffffff', color: '#333333', - marginBottom: 24, width: '100%', fontSize: '16px', - padding: 6, + padding: 30, }, }, [ h('.page-subtitle', 'Restore Vault'), @@ -58,6 +57,7 @@ RestoreVaultScreen.prototype.render = function () { style: { width: '100%', marginBottom: '20px', + fontFamily: 'Nunito SemiBold', }, }, 'Wallet Seed'), h('textarea.twelve-word-phrase', { diff --git a/old-ui/app/settings.js b/old-ui/app/settings.js index a29073c75..b119ea4d6 100644 --- a/old-ui/app/settings.js +++ b/old-ui/app/settings.js @@ -29,7 +29,7 @@ AppSettingsPage.prototype.render = function () { left: '30px', }, }), - h('h2.page-subtitle', 'Settings'), + h('h2', 'Settings'), ]), h('label', { diff --git a/test/e2e/metamask.spec.js b/test/e2e/metamask.spec.js index 6a47d53d3..01b20b074 100644 --- a/test/e2e/metamask.spec.js +++ b/test/e2e/metamask.spec.js @@ -366,7 +366,7 @@ describe('Metamask popup page', function () { it('add custom rpc', async function () { const customUrl = 'http://test.com' - const input = await driver.findElement(By.id('new_rpc')) + const input = await driver.findElement(By.css('#new_rpc')) input.sendKeys(customUrl) await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div.flex-column.flex-justify-center.flex-grow.select-none > div > div:nth-child(2) > button')).click() if (process.env.SELENIUM_BROWSER === 'firefox') {