diff --git a/CHANGELOG.md b/CHANGELOG.md index f78bae1aa..0ba9e01ac 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ ## Current Master +- [#69](https://github.com/poanetwork/metamask-extension/pull/69): Restyling: fix page headers, redesigned warnings, fix paddings, update some icons, redesigned page for buying, redesigned confirm screens, redesigned account menu +- [#67](https://github.com/poanetwork/metamask-extension/pull/67): Improve performance when big list of sent transactions from account +- [#66](https://github.com/poanetwork/metamask-extension/pull/66): Added possibility to remove custom RPC from the list of networks + ## 4.8.3 Fri Aug 03 2018 - [#59](https://github.com/poanetwork/metamask-extension/pull/59): Update e2e test of Terms of Use page 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/app/images/contract-small.svg b/app/images/contract-small.svg new file mode 100755 index 000000000..57295e2a1 --- /dev/null +++ b/app/images/contract-small.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/images/contract.svg b/app/images/contract.svg new file mode 100755 index 000000000..593bb3ad0 --- /dev/null +++ b/app/images/contract.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/images/icon-512.png b/app/images/icon-512.png index 0c157f430..27c6e445d 100644 Binary files a/app/images/icon-512.png and b/app/images/icon-512.png differ diff --git a/app/images/loading.svg b/app/images/loading.svg index 4c043ebd0..5f43d5d64 100644 --- a/app/images/loading.svg +++ b/app/images/loading.svg @@ -1,49 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/app/images/metamask-fox.svg b/app/images/metamask-fox.svg index d0e3ae971..8d2a17286 100644 --- a/app/images/metamask-fox.svg +++ b/app/images/metamask-fox.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/app/images/new-tx.svg b/app/images/new-tx.svg new file mode 100755 index 000000000..56d9eeb54 --- /dev/null +++ b/app/images/new-tx.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/images/warning.svg b/app/images/warning.svg index 5fe67840a..0a0f4c168 100644 --- a/app/images/warning.svg +++ b/app/images/warning.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/old-ui/app/account-detail.js b/old-ui/app/account-detail.js index 4a2dfcf85..601d8cb5b 100644 --- a/old-ui/app/account-detail.js +++ b/old-ui/app/account-detail.js @@ -56,16 +56,16 @@ AccountDetailScreen.prototype.render = function () { // identicon, label, balance, etc h('.account-data-subsection', { style: { - padding: '0 20px', + padding: '30px', flex: '1 0 auto', background: 'linear-gradient(rgb(84, 36, 147), rgb(104, 45, 182))', + width: '100%', }, }, [ // header - identicon + nav h('div', { style: { - paddingTop: '20px', display: 'flex', justifyContent: 'flex-start', alignItems: 'flex-start', @@ -82,7 +82,7 @@ AccountDetailScreen.prototype.render = function () { h('flex-column', { style: { lineHeight: '10px', - marginLeft: '15px', + marginLeft: '20px', width: '100%', }, }, [ @@ -134,7 +134,7 @@ AccountDetailScreen.prototype.render = function () { AccountDropdowns, { style: { - marginRight: '-7px', + marginRight: '10px', marginLeft: 'auto', cursor: 'pointer', }, @@ -191,7 +191,6 @@ AccountDetailScreen.prototype.render = function () { network, style: { lineHeight: '7px', - marginTop: '10px', }, }), @@ -204,10 +203,6 @@ AccountDetailScreen.prototype.render = function () { h('button', { onClick: () => props.dispatch(actions.showSendPage()), - style: { - marginBottom: '20px', - marginRight: '8px', - }, }, 'Send'), ]), diff --git a/old-ui/app/accounts/import/index.js b/old-ui/app/accounts/import/index.js index 89dada8b3..c59b53ef9 100644 --- a/old-ui/app/accounts/import/index.js +++ b/old-ui/app/accounts/import/index.js @@ -39,59 +39,74 @@ AccountImportSubview.prototype.render = function () { width: '100%', }, }, [ - h('.section-title.flex-row.flex-center', [ - h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { - onClick: (event) => { - props.dispatch(actions.goHome()) - }, - style: { - position: 'absolute', - left: '30px', - }, - }), - h('h2.page-subtitle', 'Import Accounts'), - ]), - h('.error', { - style: { - display: 'inline-block', - alignItems: 'center', - padding: '5px 30px 0px 30px', - }, - }, [ - h('span', 'Imported accounts will not be associated with your originally created Nifty Wallet account seedphrase.'), - ]), + h('.section-title', { style: { + height: '1px', + width: '100%', + }}), h('div', { style: { - padding: '10px 30px', + width: '100%', + paddingLeft: '30px', + paddingRight: '30px', }, }, [ - - h('h3', { style: { padding: '3px' } }, 'Select Type'), - - h('style', ` - .has-value.Select--single > .Select-control .Select-value .Select-value-label, .Select-value-label { - color: rgb(174,174,174); - } - `), - - h(Select, { - name: 'import-type-select', - clearable: false, - value: type || menuItems[0], - options: menuItems.map((type) => { - return { - value: type, - label: type, - } + h('.flex-row.flex-center', [ + h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { + onClick: (event) => { + props.dispatch(actions.goHome()) + }, + style: { + position: 'absolute', + left: '30px', + }, }), - onChange: (opt) => { - props.dispatch(actions.showImportPage()) - this.setState({ type: opt.value }) + h('h2.page-subtitle', { + style: { + fontFamily: 'Nunito SemiBold', + }, + }, 'Import Accounts'), + ]), + h('.error', { + style: { + display: 'inline-block', + alignItems: 'center', }, - }), - ]), + }, [ + h('span', 'Imported accounts will not be associated with your originally created Nifty Wallet account seedphrase.'), + ]), + h('div', { + style: { + padding: '10px 0', + }, + }, [ - this.renderImportView(), + h('h3', { style: { padding: '3px' } }, 'Select Type'), + + h('style', ` + .has-value.Select--single > .Select-control .Select-value .Select-value-label, .Select-value-label { + color: rgb(174,174,174); + } + `), + + h(Select, { + name: 'import-type-select', + clearable: false, + value: type || menuItems[0], + options: menuItems.map((type) => { + return { + value: type, + label: type, + } + }), + onChange: (opt) => { + props.dispatch(actions.showImportPage()) + this.setState({ type: opt.value }) + }, + }), + ]), + + this.renderImportView(), + ]), ]) ) } diff --git a/old-ui/app/accounts/import/json.js b/old-ui/app/accounts/import/json.js index fc6a3925a..60dd2bfd5 100644 --- a/old-ui/app/accounts/import/json.js +++ b/old-ui/app/accounts/import/json.js @@ -24,7 +24,7 @@ class JsonImportSubview extends Component { display: 'flex', flexDirection: 'column', alignItems: 'center', - padding: '5px 30px 0px 30px', + padding: '5px 0px 0px 0px', }, }, [ @@ -39,7 +39,7 @@ class JsonImportSubview extends Component { }, }), - h('input.large-input.letter-spacey', { + h('input.large-input', { type: 'password', placeholder: 'Enter password', id: 'json-password-box', diff --git a/old-ui/app/accounts/import/private-key.js b/old-ui/app/accounts/import/private-key.js index df8cf33a6..107144dc2 100644 --- a/old-ui/app/accounts/import/private-key.js +++ b/old-ui/app/accounts/import/private-key.js @@ -26,12 +26,12 @@ PrivateKeyImportView.prototype.render = function () { display: 'flex', flexDirection: 'column', alignItems: 'center', - padding: '5px 30px 0px 30px', + padding: '5px 0px 0px 0px', }, }, [ h('span', 'Paste your private key string here'), - h('input.large-input.letter-spacey', { + h('input.large-input', { type: 'password', id: 'private-key-box', onKeyPress: this.createKeyringOnEnter.bind(this), diff --git a/old-ui/app/add-token.js b/old-ui/app/add-token.js index a642a2624..68ebfedfd 100644 --- a/old-ui/app/add-token.js +++ b/old-ui/app/add-token.js @@ -54,13 +54,17 @@ AddTokenScreen.prototype.render = function () { h('h2.page-subtitle', 'Add Token'), ]), - h('.error', { + h('div', { style: { - display: warning ? 'block' : 'none', - padding: '0 20px', - textAlign: 'center', + margin: '0 30px', }, - }, warning), + }, [ + h('.error', { + style: { + display: warning ? 'block' : 'none', + }, + }, warning), + ]), // conf view h('.flex-column.flex-justify-center.flex-grow.select-none', [ diff --git a/old-ui/app/app.js b/old-ui/app/app.js index 00276694f..0229bfc39 100644 --- a/old-ui/app/app.js +++ b/old-ui/app/app.js @@ -196,6 +196,7 @@ App.prototype.renderAppBar = function () { h(NetworkIndicator, { network: this.props.network, provider: this.props.provider, + isUnlocked: this.props.isUnlocked, onClick: (event) => { event.preventDefault() event.stopPropagation() @@ -240,7 +241,7 @@ App.prototype.renderAppBar = function () { App.prototype.renderNetworkDropdown = function () { const props = this.props - const { provider: { type: providerType, rpcTarget: activeNetwork } } = props + const { provider: { type: providerType } } = props const rpcList = props.frequentRpcList const state = this.state || {} const isOpen = state.isNetworkMenuOpen @@ -384,10 +385,10 @@ App.prototype.renderNetworkDropdown = function () { style: { paddingLeft: '20px', fontSize: '16px', - color: activeNetwork === 'http://localhost:8545' ? 'white' : '', + color: providerType === 'localhost' ? 'white' : '', }, }, - [h(activeNetwork === 'http://localhost:8545' ? 'div.selected-network' : ''), + [h(providerType === 'localhost' ? 'div.selected-network' : ''), 'Localhost 8545', ] ), @@ -643,13 +644,7 @@ App.prototype.renderPrimary = function () { }, }, 'QR Code'), ]), - h('div', { - style: { - position: 'absolute', - left: '44px', - width: '285px', - }, - }, [ + h('div', [ h(QrView, {key: 'qr'}), ]), ]) diff --git a/old-ui/app/components/account-dropdowns.js b/old-ui/app/components/account-dropdowns.js index 21349a6f4..a102ef169 100644 --- a/old-ui/app/components/account-dropdowns.js +++ b/old-ui/app/components/account-dropdowns.js @@ -46,13 +46,14 @@ class AccountDropdowns extends Component { style: { marginTop: index === 0 ? '5px' : '', fontSize: '16px', + padding: '8px 0px', }, }, [ isSelected ? h('div', { style: { width: '4px', - height: '32px', + height: '26px', background: '#8fdc97', position: 'absolute', left: '-25px', @@ -63,24 +64,24 @@ class AccountDropdowns extends Component { { overflow: 'none', address: identity.address, - diameter: 32, + diameter: 24, style: { marginLeft: '10px', }, }, ), - this.indicateIfLoose(keyring), h('span', { style: { - marginLeft: '20px', + marginLeft: '10px', fontSize: '16px', - maxWidth: '145px', + maxWidth: '95px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', color: isSelected ? 'white' : '', }, }, identity.name || ''), + this.indicateIfLoose(keyring), ] ) }) @@ -103,12 +104,12 @@ class AccountDropdowns extends Component { { useCssTransition: true, // Hardcoded because account selector is temporarily in app-header style: { - marginLeft: '-168px', + marginLeft: '-198px', marginTop: '32px', minWidth: '180px', overflowY: 'auto', maxHeight: '300px', - width: '220px', + width: '250px', }, innerStyle: { padding: '8px 25px', @@ -127,6 +128,9 @@ class AccountDropdowns extends Component { h( DropdownMenuItem, { + style: { + padding: '8px 0px', + }, closeMenu: () => {}, onClick: () => actions.addNewAccount(), }, @@ -137,6 +141,9 @@ class AccountDropdowns extends Component { h( DropdownMenuItem, { + style: { + padding: '8px 0px', + }, closeMenu: () => {}, onClick: () => actions.showImportPage(), }, @@ -179,7 +186,7 @@ class AccountDropdowns extends Component { Dropdown, { style: { - marginLeft: '-237px', + marginLeft: '-233px', minWidth: '180px', marginTop: '30px', }, diff --git a/old-ui/app/components/account-export.js b/old-ui/app/components/account-export.js index bd17dfafd..ec40fe9c1 100644 --- a/old-ui/app/components/account-export.js +++ b/old-ui/app/components/account-export.js @@ -56,7 +56,6 @@ ExportAccountView.prototype.render = function () { color: '#333333', marginBottom: '0px', marginTop: '30px', - textAlign: 'center', }, }, warning), h('input#exportAccount.sizing-input', { @@ -90,11 +89,13 @@ ExportAccountView.prototype.render = function () { }, 'Submit'), ]), (this.props.warning) && ( - h('span.error', { - style: { - margin: '20px', - }, - }, this.props.warning.split('-')) + h('div', {style: { + margin: '0 30px', + }}, + [ + h('div.error', this.props.warning.split('-')), + ] + ) ), ]) ) @@ -113,10 +114,11 @@ ExportAccountView.prototype.render = function () { h('label', { style: { textAlign: 'center', + fontFamily: 'Nunito Semibold', }, }, 'Your private key'), h('div.flex-row', [ - h('p.error', { + h('p', { style: { paddingTop: '25px', textOverflow: 'ellipsis', diff --git a/old-ui/app/components/account-panel.js b/old-ui/app/components/account-panel.js index 53284772e..db3c901e9 100644 --- a/old-ui/app/components/account-panel.js +++ b/old-ui/app/components/account-panel.js @@ -25,7 +25,7 @@ AccountPanel.prototype.render = function () { identiconLabel: identity.name || '', attributes: [ { - key: 'ADDRESS', + key: 'Address', value: addressSummary(identity.address), }, balanceOrFaucetingIndication(account, isFauceting, state.network), @@ -37,7 +37,7 @@ AccountPanel.prototype.render = function () { h('.identity-panel.flex-row.flex-space-between', { style: { background: 'linear-gradient(rgb(84, 36, 147), rgb(104, 45, 182))', - padding: '20px 20px', + padding: '30px', flex: '1 0 auto', cursor: panelState.onClick ? 'pointer' : undefined, }, @@ -49,29 +49,34 @@ AccountPanel.prototype.render = function () { h(Identicon, { address: panelState.identiconKey, imageify: state.imageifyIdenticons, + diameter: 60, }), - h('span.font-small', { - style: { - color: '#ffffff', - }, - }, panelState.identiconLabel.substring(0, 7) + '...'), ]), // account address, balance h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', [ - - panelState.attributes.map((attr) => { + h('h2.font-medium', { + style: { + color: '#ffffff', + marginBottom: '20px', + lineHeight: '16px', + }, + }, panelState.identiconLabel), + panelState.attributes.map((attr, i) => { return h('.flex-row.flex-space-between', { key: '' + Math.round(Math.random() * 1000000), }, [ - h('label.font-small.no-select', { + h('label.font-pre-medium.no-select', { style: { color: '#ffffff', + marginBottom: i === 0 ? '10px' : '0px', + lineHeight: '14px', }, }, attr.key), - h('span.font-small', { + h('span.font-pre-medium', { style: { color: '#ffffff', + lineHeight: '14px', }, }, attr.value), ]) @@ -93,7 +98,7 @@ function balanceOrFaucetingIndication (account, isFauceting, network) { } } else { return { - key: 'BALANCE', + key: 'Balance', value: formatBalance(account.balance, undefined, undefined, network), } } diff --git a/old-ui/app/components/bn-as-decimal-input.js b/old-ui/app/components/bn-as-decimal-input.js index e55f81bb0..1fda15eff 100644 --- a/old-ui/app/components/bn-as-decimal-input.js +++ b/old-ui/app/components/bn-as-decimal-input.js @@ -95,19 +95,22 @@ BnAsDecimalInput.prototype.render = function () { }, suffix), ]), - state.invalid ? h('span.error', { + state.invalid ? h('div', { style: { + paddingLeft: '30px', + paddingRight: '30px', + background: 'rgba(255, 255, 255, 0.85)', position: 'absolute', - right: '0px', - textAlign: 'right', - transform: 'translateY(26px)', - padding: '3px', - background: 'rgba(255,255,255,0.85)', - zIndex: '1', - textTransform: 'capitalize', - border: '2px solid #E20202', + top: props.id === 'gas_limit' ? '180px' : '250px', + left: '0px', }, - }, state.invalid) : null, + }, [ + h('div.error', { + style: { + zIndex: props.id === 'gas_limit' ? '1' : '2', + }, + }, state.invalid), + ]) : null, ]) ) } diff --git a/old-ui/app/components/buy-button-subview.js b/old-ui/app/components/buy-button-subview.js index 199147ae9..2f6e7014a 100644 --- a/old-ui/app/components/buy-button-subview.js +++ b/old-ui/app/components/buy-button-subview.js @@ -58,31 +58,6 @@ BuyButtonSubview.prototype.headerSubview = function () { }, }, [ - // header bar (back button, label) - h('.flex-row', { - style: { - alignItems: 'center', - justifyContent: 'center', - }, - }, [ - h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { - onClick: this.backButtonContext.bind(this), - style: { - position: 'absolute', - left: '30px', - }, - }), - h('h2.flex-center', { - style: { - width: '100vw', - background: '#ffffff', - color: '#333333', - paddingTop: '4px', - paddingBottom: '4px', - }, - }, `Buy ${coinName}`), - ]), - // loading indication h('div', { style: { @@ -108,21 +83,46 @@ BuyButtonSubview.prototype.headerSubview = function () { }), ]), - h('.flex-row', { + // header bar (back button, label) + h('.flex-row.section-title', { style: { alignItems: 'center', justifyContent: 'center', }, }, [ - h('h3.flex-center', { + h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { + onClick: this.backButtonContext.bind(this), + style: { + position: 'absolute', + left: '30px', + }, + }), + h('h2.flex-center', { style: { - paddingLeft: '15px', width: '100vw', background: '#ffffff', color: '#333333', - paddingTop: '30px', + paddingTop: '4px', paddingBottom: '4px', }, + }, `Buy ${coinName}`), + ]), + + h('.flex-row', { + style: { + alignItems: 'center', + width: '100%', + }, + }, [ + h('h3.flex-center', { + style: { + width: '100%', + background: '#ffffff', + color: '#333333', + paddingLeft: '30px', + justifyContent: 'left', + fontFamily: 'Nunito Semibold', + }, }, 'Select Service'), ]), @@ -154,49 +154,39 @@ 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.exchanges.cursor-pointer', { onClick: () => this.props.dispatch(actions.buyEth({ network })), - style: { - marginTop: '15px', - }, - }, label) : null, - network === '99' ? h('button', { + }, + [h('span', {style: {marginRight: '10px', color: '#6729a8'}}, label)]) : null, + network === '99' ? h('p.exchanges.cursor-pointer', { 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')]) : null, + network === '99' ? h('p.exchanges.cursor-pointer', { 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')]) : null, + network === '99' ? h('p.exchanges.cursor-pointer', { 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')]) : null, // Kovan only: Dharma loans beta network === '42' ? ( - h('button', { + h('p.exchanges.cursor-pointer', { 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)')]) ) : null, ]) ) default: return ( - h('h2.error', 'Unknown network ID') + h('div', { + style: { + padding: '20px 30px', + }}, + h('h2.error', 'Unknown network ID') + ) ) } @@ -207,16 +197,12 @@ BuyButtonSubview.prototype.mainnetSubview = function () { return ( - h('.flex-column', { - style: { - alignItems: 'center', - }, - }, [ + h('.flex-column', [ h('.flex-row.selected-exchange', { style: { position: 'relative', - right: '35px', + marginLeft: '30px', marginTop: '20px', marginBottom: '20px', }, @@ -237,13 +223,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/coinbase-form.js b/old-ui/app/components/coinbase-form.js index f675e91aa..3609fe939 100644 --- a/old-ui/app/components/coinbase-form.js +++ b/old-ui/app/components/coinbase-form.js @@ -19,31 +19,21 @@ function CoinbaseForm () { } CoinbaseForm.prototype.render = function () { - var props = this.props return h('.flex-column', { style: { - marginTop: '30px', width: '100%', }, }, [ h('.flex-row', { style: { - justifyContent: 'space-around', - margin: '33px', + margin: '30px', marginTop: '0px', }, }, [ - h('button.btn-green', { + h('p.cursor-pointer', { onClick: this.toCoinbase.bind(this), - style: { - marginRight: '10px', - }, - }, 'Continue to Coinbase'), - - h('button.btn-red', { - onClick: () => props.dispatch(actions.goHome()), - }, 'Cancel'), + }, [h('span', {style: {marginRight: '10px', color: '#6729a8'}}, 'Continue to Coinbase'), h('i.arrow-right')]), ]), ]) } diff --git a/old-ui/app/components/copyButton.js b/old-ui/app/components/copyButton.js index 7e1fe2126..3d07afe93 100644 --- a/old-ui/app/components/copyButton.js +++ b/old-ui/app/components/copyButton.js @@ -37,7 +37,7 @@ CopyButton.prototype.render = function () { }, [ h('i.fa.fa-clipboard.cursor-pointer.color-violet', { style: { - margin: '5px', + marginLeft: '5px', }, onClick: (event) => { event.preventDefault() diff --git a/old-ui/app/components/custom-radio-list.js b/old-ui/app/components/custom-radio-list.js index a4c525396..6f5c772b6 100644 --- a/old-ui/app/components/custom-radio-list.js +++ b/old-ui/app/components/custom-radio-list.js @@ -30,11 +30,11 @@ RadioList.prototype.render = function () { marginRight: '5px', }, }, - labels.map((lable, i) => { + labels.map((label, i) => { let isSelcted = (this.state !== null) - isSelcted = isSelcted ? (this.state.selected === lable) : (defaultFocus === lable) + isSelcted = isSelcted ? (this.state.selected === label) : (defaultFocus === label) return h(isSelcted ? activeClass : inactiveClass, { - title: lable, + title: label, onClick: (event) => { this.setState({selected: event.target.title}) props.onClick(event) @@ -43,14 +43,14 @@ RadioList.prototype.render = function () { }) ), h('.text', {}, - labels.map((lable) => { + labels.map((label) => { if (props.subtext) { return h('.flex-row', {}, [ - h('.radio-titles', lable), - h('.radio-titles-subtext', `- ${props.subtext[lable]}`), + h('.radio-titles.font-pre-medium', label), + h('.radio-titles-subtext.font-pre-medium', ` - ${props.subtext[label]}`), ]) } else { - return h('.radio-titles', lable) + return h('.radio-titles.font-pre-medium', label) } }) ), diff --git a/old-ui/app/components/delete-rpc.js b/old-ui/app/components/delete-rpc.js index cefa1e16d..9f40d8049 100644 --- a/old-ui/app/components/delete-rpc.js +++ b/old-ui/app/components/delete-rpc.js @@ -39,19 +39,30 @@ DeleteRpc.prototype.render = function () { }), h('h2.page-subtitle', 'Delete Custom RPC'), ]), - h('h3', { + h('p.confirm-label', { style: { textAlign: 'center', - padding: '10px', + margin: '0px 30px 20px ', }, }, `Are you sure to delete ${this.props.url} ?`), - h('.flex-row.flex-center', [ - h('button', + h('.flex-row.flex-right', { + style: { + marginRight: '30px', + }, + }, [ + h('button.btn-violet', { style: { - margin: '20px', + marginRight: '10px', }, + onClick: () => { + this.props.dispatch(actions.showConfigPage()) + }, + }, + 'No'), + h('button', + { onClick: () => { this.props.dispatch(actions.removeCustomRPC(this.props.url, this.props.provider)) .then(() => { @@ -60,16 +71,6 @@ DeleteRpc.prototype.render = function () { }, }, 'Yes'), - h('button', - { - style: { - margin: '20px', - }, - onClick: () => { - this.props.dispatch(actions.showConfigPage()) - }, - }, - 'No'), ]), ]) } diff --git a/old-ui/app/components/dropdown.js b/old-ui/app/components/dropdown.js index 57e6c21f8..7a4b828ab 100644 --- a/old-ui/app/components/dropdown.js +++ b/old-ui/app/components/dropdown.js @@ -70,7 +70,7 @@ class DropdownMenuItem extends Component { }, style: Object.assign({ listStyle: 'none', - padding: '15px 0px 15px 0px', + padding: (style && style.padding) ? style.padding : '15px 0px', fontSize: '16px', fontStyle: 'normal', fontFamily: 'Nunito Regular', diff --git a/old-ui/app/components/editable-label.js b/old-ui/app/components/editable-label.js index 8a5c8954f..ee4a9e458 100644 --- a/old-ui/app/components/editable-label.js +++ b/old-ui/app/components/editable-label.js @@ -19,6 +19,9 @@ EditableLabel.prototype.render = function () { h('input.sizing-input', { defaultValue: props.textValue, maxLength: '20', + style: { + width: '146px', + }, onKeyPress: (event) => { this.saveIfEnter(event) }, diff --git a/old-ui/app/components/mini-account-panel.js b/old-ui/app/components/mini-account-panel.js index c18688753..a766d7bdc 100644 --- a/old-ui/app/components/mini-account-panel.js +++ b/old-ui/app/components/mini-account-panel.js @@ -50,7 +50,7 @@ AccountPanel.prototype.genIcon = function (seed, picOrder) { order: picOrder === 'left' ? 1 : 3, }, }, [ - h('i.fa.fa-file-text-o.fa-lg', { + h('i.contract', { style: { fontSize: '42px', transform: 'translate(0px, -16px)', diff --git a/old-ui/app/components/network.js b/old-ui/app/components/network.js index f2a635c58..c1a9f641c 100644 --- a/old-ui/app/components/network.js +++ b/old-ui/app/components/network.js @@ -75,73 +75,45 @@ Network.prototype.render = function () { (function () { switch (iconName) { case 'ethereum-network': - return h('.network-indicator', [ - h('.network-name', { - style: { - paddingLeft: '9px', - color: '#6729a8', - }}, + return h(props.isUnlocked ? '.network-indicator' : '.network-indicator.hidden', [ + h('.network-name', 'Main Network'), props.onClick && h('i.fa.fa-caret-down.fa-lg'), ]) case 'sokol-test-network': - return h('.network-indicator', [ - h('.network-name', { - style: { - paddingLeft: '9px', - color: '#6729a8', - }}, + return h(props.isUnlocked ? '.network-indicator' : '.network-indicator.hidden', [ + h('.network-name', 'Sokol Network'), props.onClick && h('i.fa.fa-caret-down.fa-lg'), ]) case 'ropsten-test-network': - return h('.network-indicator', [ - h('.network-name', { - style: { - paddingLeft: '9px', - color: '#6729a8', - }}, + return h(props.isUnlocked ? '.network-indicator' : '.network-indicator.hidden', [ + h('.network-name', 'Ropsten Test Net'), props.onClick && h('i.fa.fa-caret-down.fa-lg'), ]) case 'kovan-test-network': - return h('.network-indicator', [ - h('.network-name', { - style: { - paddingLeft: '9px', - color: '#6729a8', - }}, + return h(props.isUnlocked ? '.network-indicator' : '.network-indicator.hidden', [ + h('.network-name', 'Kovan Test Net'), props.onClick && h('i.fa.fa-caret-down.fa-lg'), ]) case 'rinkeby-test-network': - return h('.network-indicator', [ - h('.network-name', { - style: { - paddingLeft: '9px', - color: '#6729a8', - }}, + return h(props.isUnlocked ? '.network-indicator' : '.network-indicator.hidden', [ + h('.network-name', 'Rinkeby Test Net'), props.onClick && h('i.fa.fa-caret-down.fa-lg'), ]) case 'poa-network': - return h('.network-indicator', [ - h('.network-name', { - style: { - paddingLeft: '9px', - color: '#6729a8', - }}, + return h(props.isUnlocked ? '.network-indicator' : '.network-indicator.hidden', [ + h('.network-name', 'POA Network'), props.onClick && h('i.fa.fa-caret-down.fa-lg'), ]) default: - return h('.network-indicator', [ + return h(props.isUnlocked ? '.network-indicator' : '.network-indicator.hidden', [ - h('.network-name', { - style: { - paddingLeft: '9px', - color: '#6729a8', - }}, + h('.network-name', 'Private Network'), props.onClick && h('i.fa.fa-caret-down.fa-lg'), ]) diff --git a/old-ui/app/components/notice.js b/old-ui/app/components/notice.js index 559e88d07..9e447ec0e 100644 --- a/old-ui/app/components/notice.js +++ b/old-ui/app/components/notice.js @@ -93,7 +93,7 @@ Notice.prototype.render = function () { style: { background: '#542289', color: '#ffffff', - height: '310px', + height: '430px', width: '90%', overflowY: 'scroll', scroll: 'auto', 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/pending-tx.js b/old-ui/app/components/pending-tx.js index d3c22eedf..ce0453575 100644 --- a/old-ui/app/components/pending-tx.js +++ b/old-ui/app/components/pending-tx.js @@ -223,7 +223,6 @@ PendingTx.prototype.render = function () { currentCurrency, network, inline: true, - labelColor: '#F7861C', }), ]), ]), @@ -282,8 +281,9 @@ PendingTx.prototype.render = function () { position: 'absolute', top: '25px', background: 'rgba(255, 255, 255, 0.85)', - border: '2px solid rgb(226, 2, 2)', width: '100%', + paddingLeft: '30px', + paddingRight: '30px', }, }, [ txMeta.simulationFails ? @@ -303,7 +303,7 @@ PendingTx.prototype.render = function () { : null, insufficientBalance ? - h('span.error', { + h('.error', { style: { fontSize: '12px', }, @@ -311,7 +311,7 @@ PendingTx.prototype.render = function () { : null, (dangerousGasLimit && !gasLimitSpecified) ? - h('span.error', { + h('.error', { style: { fontSize: '12px', }, @@ -333,6 +333,7 @@ PendingTx.prototype.render = function () { h('.cell.value', { }, [ h(BNInput, { + id: 'gas_limit', name: 'Gas Limit', value: gasBn, precision: 0, @@ -343,6 +344,7 @@ PendingTx.prototype.render = function () { suffix: 'UNITS', style: { position: 'relative', + width: '91px', }, onChange: this.gasLimitChanged.bind(this), @@ -357,6 +359,7 @@ PendingTx.prototype.render = function () { h('.cell.value', { }, [ h(BNInput, { + id: 'gas_price', name: 'Gas Price', value: gasPriceBn, precision: 9, @@ -365,6 +368,7 @@ PendingTx.prototype.render = function () { min: forceGasMin || MIN_GAS_PRICE_BN, style: { position: 'relative', + width: '91px', }, onChange: this.gasPriceChanged.bind(this), ref: (hexInput) => { this.inputs.push(hexInput) }, @@ -636,7 +640,7 @@ function forwardCarrat () { h('img', { src: 'images/forward-carrat-light.svg', style: { - padding: '5px 30px 0px 30px', + padding: '0px 20px 0px', height: '62px', }, }) diff --git a/old-ui/app/components/qr-code.js b/old-ui/app/components/qr-code.js index 0c0ce6fd4..12a16cd2a 100644 --- a/old-ui/app/components/qr-code.js +++ b/old-ui/app/components/qr-code.js @@ -39,26 +39,19 @@ QrCodeView.prototype.render = function () { alignItems: 'center', }, }, [ - Array.isArray(Qr.message) ? h('.message-container', this.renderMultiMessage()) : h('.qr-header', Qr.message), - 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', { style: { marginTop: '15px', - marginBottom: '15px', }, dangerouslySetInnerHTML: { __html: qrImage.createTableTag(4), }, }), + Array.isArray(Qr.message) ? h('.message-container', this.renderMultiMessage()) : h('.qr-header', Qr.message), h('.flex-row', [ h('h3.ellip-address', { style: { diff --git a/old-ui/app/components/shapeshift-form.js b/old-ui/app/components/shapeshift-form.js index 97068db0a..9468f5a35 100644 --- a/old-ui/app/components/shapeshift-form.js +++ b/old-ui/app/components/shapeshift-form.js @@ -34,33 +34,32 @@ ShapeshiftForm.prototype.renderMain = function () { return h('.flex-column', { style: { position: 'relative', - padding: '25px', - paddingTop: '5px', - width: '90%', + padding: '30px', + paddingTop: '0px', minHeight: '215px', - alignItems: 'center', overflowY: 'auto', }, }, [ h('.flex-row', { style: { justifyContent: 'center', - alignItems: 'baseline', - height: '42px', + alignItems: 'center', + marginBottom: '20px', }, }, [ h('img', { src: coinOptions[coin].image, - width: '25px', - height: '25px', + width: '36px', + height: '36px', style: { marginRight: '5px', }, }), - h('.input-container', { + h('.input-container', { style: { position: 'relative', - }, [ + marginRight: '30px', + }}, [ h('input#fromCoin.buy-inputs.ex-coins', { type: 'text', list: 'coinList', @@ -80,7 +79,7 @@ ShapeshiftForm.prototype.renderMain = function () { h('i.fa.fa-pencil-square-o.edit-text', { style: { fontSize: '12px', - color: '#F7861C', + color: '#6729a8', position: 'absolute', }, }), @@ -97,18 +96,13 @@ ShapeshiftForm.prototype.renderMain = function () { // style: { // bottom: '5px', // left: '5px', - // color: '#F7861C', + // color: '#6729a8', // }, // onClick: this.updateCoin.bind(this), // }), - h('i.fa.fa-chevron-right.fa-4.orange', { - style: { - position: 'absolute', - bottom: '35%', - left: '0%', - color: '#F7861C', - }, + h('i.arrow-right.cursor-pointer', { onClick: this.updateCoin.bind(this), + style: {marginRight: '30px'}, }), ]), @@ -116,8 +110,8 @@ ShapeshiftForm.prototype.renderMain = function () { h('img', { src: coinOptions[marketinfo.pair.split('_')[1].toUpperCase()].image, - width: '25px', - height: '25px', + width: '36px', + height: '36px', style: { marginLeft: '5px', }, @@ -126,19 +120,12 @@ ShapeshiftForm.prototype.renderMain = function () { h('.flex-column', { style: { - marginTop: '1%', alignItems: 'flex-start', }, }, [ this.props.warning ? this.props.warning && - h('span.error.flex-center', { - style: { - textAlign: 'center', - width: '229px', - height: '82px', - }, - }, this.props.warning + '') + h('span.error.flex-center', this.props.warning + '') : this.renderInfo(), this.renderRefundAddressForCoin(coin), @@ -154,7 +141,11 @@ ShapeshiftForm.prototype.renderRefundAddressForCoin = function (coin) { }, }, [ - h('div', `${coin} Address:`), + h('div', { + style: { + marginTop: '10px', + }, + }, `${coin} Address:`), h('input#fromCoinAddress.buy-inputs', { type: 'text', @@ -174,7 +165,7 @@ ShapeshiftForm.prototype.renderRefundAddressForCoin = function (coin) { h('i.fa.fa-pencil-square-o.edit-text', { style: { fontSize: '12px', - color: '#F7861C', + color: '#6729a8', position: 'absolute', }, }), @@ -186,7 +177,7 @@ ShapeshiftForm.prototype.renderRefundAddressForCoin = function (coin) { h('button', { onClick: this.shift.bind(this), style: { - marginTop: '1%', + marginTop: '20px', }, }, 'Submit'), @@ -264,15 +255,16 @@ ShapeshiftForm.prototype.renderInfo = function () { style: { }, }, [ - h('h3.flex-row.text-transform-uppercase', { + h('h3.flex-row', { style: { - color: '#868686', - paddingTop: '4px', + color: '#333333', + paddingBottom: '20px', justifyContent: 'space-around', textAlign: 'center', - fontSize: '17px', + fontSize: '16px', + fontFamily: 'Nunito SemiBold', }, - }, `Market Info for ${marketinfo.pair.replace('_', ' to ').toUpperCase()}:`), + }, `Market Info for ${marketinfo.pair.replace('_', ' to ')}:`), h('.marketinfo', ['Status : ', `${coinOptions[coin].status}`]), h('.marketinfo', ['Exchange Rate: ', `${marketinfo.rate}`]), h('.marketinfo', ['Limit: ', `${marketinfo.limit}`]), diff --git a/old-ui/app/components/shift-list-item.js b/old-ui/app/components/shift-list-item.js index 9326e8067..763cb23f7 100644 --- a/old-ui/app/components/shift-list-item.js +++ b/old-ui/app/components/shift-list-item.js @@ -69,12 +69,24 @@ ShiftListItem.prototype.renderUtilComponents = function () { var props = this.props const { conversionRate, currentCurrency, network } = props + const valueStyle = { + fontFamily: 'Nunito Bold', + width: '100%', + textAlign: 'right', + fontSize: '14px', + color: '#333333', + } + + const dimStyle = { + fontFamily: 'Nunito Regular', + color: '#333333', + marginLeft: '5px', + fontSize: '14px', + } + switch (props.response.status) { case 'no_deposits': return h('.flex-row', [ - h(CopyButton, { - value: this.props.depositAddress, - }), h(Tooltip, { title: 'QR Code', }, [ @@ -85,7 +97,7 @@ ShiftListItem.prototype.renderUtilComponents = function () { marginLeft: '23px', marginRight: '12px', fontSize: '20px', - color: '#F7861C', + color: '#6729a8', }, }), ]), @@ -95,10 +107,9 @@ ShiftListItem.prototype.renderUtilComponents = function () { case 'complete': return h('.flex-row', [ - h(CopyButton, { - value: this.props.response.transaction, - }), h(EthBalance, { + valueStyle, + dimStyle, value: `${props.response.outgoingCoin}`, conversionRate, currentCurrency, @@ -123,52 +134,72 @@ ShiftListItem.prototype.renderUtilComponents = function () { ShiftListItem.prototype.renderInfo = function () { var props = this.props + switch (props.response.status) { case 'no_deposits': return h('.flex-column', { style: { - width: '200px', overflow: 'hidden', + paddingLeft: '29px', + textAlign: 'left', }, }, [ h('div', { style: { - fontSize: 'x-small', - color: '#ABA9AA', + fontSize: 'x-pre-medium', + color: '#333333', width: '100%', + display: 'inline-flex', }, - }, `${props.depositType} to ETH via ShapeShift`), - h('div', 'No deposits received'), + }, [ + `${props.depositType} to ETH via ShapeShift`, + h(CopyButton, { + value: this.props.depositAddress, + })]), h('div', { style: { fontSize: 'x-small', - color: '#ABA9AA', + color: '#777777', width: '100%', }, }, formatDate(props.time)), + h('div', { + style: { + fontSize: 'x-small', + color: '#777777', + width: '100%', + }, + }, 'No deposits received'), ]) case 'received': return h('.flex-column', { style: { - width: '200px', overflow: 'hidden', + paddingLeft: '29px', + textAlign: 'left', }, }, [ h('div', { style: { - fontSize: 'x-small', - color: '#ABA9AA', + fontSize: 'x-pre-medium', + color: '#333333', width: '100%', }, }, `${props.depositType} to ETH via ShapeShift`), - h('div', 'Conversion in progress'), h('div', { style: { fontSize: 'x-small', - color: '#ABA9AA', + color: '#777777', width: '100%', }, }, formatDate(props.time)), + h('div', { + style: { + fontSize: 'x-small', + color: '#777777', + width: '100%', + }, + }, 'Conversion in progress'), ]) case 'complete': var url = explorerLink(props.response.transaction, parseInt('1')) @@ -177,29 +208,50 @@ ShiftListItem.prototype.renderInfo = function () { style: { width: '200px', overflow: 'hidden', + paddingLeft: '29px', + textAlign: 'left', }, onClick: () => global.platform.openWindow({ url }), }, [ h('div', { style: { - fontSize: 'x-small', - color: '#ABA9AA', + fontSize: 'x-pre-medium', + color: '#333333', width: '100%', + display: 'inline-flex', }, - }, 'From ShapeShift'), - h('div', formatDate(props.time)), + }, [ + addressSummary(props.response.transaction), + h(CopyButton, { + value: this.props.response.transaction, + }), + ]), h('div', { style: { fontSize: 'x-small', - color: '#ABA9AA', + color: '#777777', + }, + }, formatDate(props.time)), + h('div', { + style: { + fontSize: 'x-small', + color: '#777777', width: '100%', }, - }, addressSummary(props.response.transaction)), + }, 'From ShapeShift'), ]) case 'failed': - return h('span.error', '(Failed)') + return h('span.error', { + style: { + marginLeft: '30px', + }, + }, '(Failed)') default: - return '' + return h('span.error', { + style: { + marginLeft: '30px', + }, + }, 'Transaction was not created') } } diff --git a/old-ui/app/components/tab-bar.js b/old-ui/app/components/tab-bar.js index 90e0c6522..2e9ebd653 100644 --- a/old-ui/app/components/tab-bar.js +++ b/old-ui/app/components/tab-bar.js @@ -26,7 +26,7 @@ TabBar.prototype.render = function () { }, }, tabs.map((tab) => { const { key, content } = tab - return h(subview === key ? '.activeForm' : '.inactiveForm.pointer', { + return h(subview === key ? subview === 'history' ? '.activeForm.left' : '.activeForm.right' : '.inactiveForm.pointer', { onClick: () => { this.setState({ subview: key }) tabSelected(key) diff --git a/old-ui/app/components/token-cell.js b/old-ui/app/components/token-cell.js index 600e9512e..57e5b6337 100644 --- a/old-ui/app/components/token-cell.js +++ b/old-ui/app/components/token-cell.js @@ -21,7 +21,7 @@ TokenCell.prototype.render = function () { cursor: network === '1' ? 'pointer' : 'default', borderBottom: props.isLastTokenCell ? 'none' : '1px solid #e2e2e2', padding: '20px 0', - margin: '0 20px', + margin: '0 30px', }, onClick: this.view.bind(this, address, userAddress, network), }, [ diff --git a/old-ui/app/components/token-list.js b/old-ui/app/components/token-list.js index 1c1204b56..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: () => { @@ -113,7 +113,7 @@ TokenList.prototype.renderTokenStatusBar = function () { justifyContent: 'space-between', alignItems: 'center', minHeight: '70px', - padding: '10px', + padding: '30px 30px 10px', }, }, [ h('span', msg), diff --git a/old-ui/app/components/transaction-list-item-icon.js b/old-ui/app/components/transaction-list-item-icon.js index 3a5b5d22f..08d2747a3 100644 --- a/old-ui/app/components/transaction-list-item-icon.js +++ b/old-ui/app/components/transaction-list-item-icon.js @@ -27,9 +27,9 @@ TransactionIcon.prototype.render = function () { title: 'Pending', position: 'right', }, [ - h('i.fa.fa-ellipsis-h', { + h('i.new-tx', { style: { - fontSize: '27px', + marginLeft: '10px', }, }), ]) @@ -49,9 +49,9 @@ TransactionIcon.prototype.render = function () { address: txParams.to || transaction.hash, }) } else { - return h('i.fa.fa-file-text-o.fa-lg', { + return h('i.contract-small', { style: { - width: '40px', + marginLeft: '11px', }, }) } diff --git a/old-ui/app/components/transaction-list-item.js b/old-ui/app/components/transaction-list-item.js index 4099b39d9..a45cb1af8 100644 --- a/old-ui/app/components/transaction-list-item.js +++ b/old-ui/app/components/transaction-list-item.js @@ -149,7 +149,6 @@ TransactionListItem.prototype.render = function () { h('.flex-column', { style: { - overflow: 'hidden', textAlign: 'left', }, }, [ @@ -176,27 +175,24 @@ TransactionListItem.prototype.render = function () { showFiat: false, network, style: { - margin: '0 auto', + margin: '0px auto 0px 5px', }, }) : h('.flex-column'), ]), - this.showRetryButton() && h('.transition-list-item__retry.grow-on-hover', { + this.showRetryButton() && h('.transition-list-item__retry.grow-on-hover.error', { onClick: event => { event.stopPropagation() this.resubmit() }, style: { height: '22px', - borderRadius: '22px', - color: '#F9881B', - padding: '0 20px', - backgroundColor: '#FFE3C9', display: 'flex', - justifyContent: 'center', alignItems: 'center', fontSize: '8px', cursor: 'pointer', + width: 'auto', + backgroundPosition: '10px center', }, }, [ h('div', { @@ -250,9 +246,9 @@ function recipientField (txParams, transaction, isTx, isMsg) { color: '#333333', }, }, [ - message, + h('span', (!txParams.to ? {style: {whiteSpace: 'nowrap'}} : null), message), // Places a copy button if tx is successful, else places a placeholder empty div. - transaction.hash ? h(CopyButton, { value: transaction.hash, display: 'inline-flex' }) : h('div', {style: { display: 'flex', alignItems: 'center', width: '26px' }}), + transaction.hash ? h(CopyButton, { value: transaction.hash, display: 'inline' }) : h('div', {style: { display: 'flex', alignItems: 'center', width: '26px' }}), renderErrorOrWarning(transaction), ]) } @@ -266,12 +262,12 @@ function renderErrorOrWarning (transaction) { // show dropped if (status === 'dropped') { - return h('div.dropped', ' (Dropped)') + return h('div', ' (Dropped)') } // show rejected if (status === 'rejected') { - return h('div.error', ' (Rejected)') + return h('div', ' (Rejected)') } // show error @@ -282,7 +278,7 @@ function renderErrorOrWarning (transaction) { title: message, position: 'bottom', }, [ - h(`div.error`, ` (Failed)`), + h(`div`, ` (Failed)`), ]) ) } @@ -294,7 +290,7 @@ function renderErrorOrWarning (transaction) { title: message, position: 'bottom', }, [ - h(`div.warning`, ` (Warning)`), + h(`div`, ` (Warning)`), ]) } } diff --git a/old-ui/app/components/transaction-list.js b/old-ui/app/components/transaction-list.js index 202b84371..8cd6e776d 100644 --- a/old-ui/app/components/transaction-list.js +++ b/old-ui/app/components/transaction-list.js @@ -44,7 +44,7 @@ TransactionList.prototype.render = function () { style: { overflowY: 'auto', height: '100%', - padding: '0 20px 0 20px', + padding: '0 30px', textAlign: 'center', }, }, [ diff --git a/old-ui/app/config.js b/old-ui/app/config.js index 08dd4be85..4a46de669 100644 --- a/old-ui/app/config.js +++ b/old-ui/app/config.js @@ -50,16 +50,20 @@ ConfigScreen.prototype.render = function () { left: '30px', }, }), - h('h2.page-subtitle', 'Settings'), + h('h2', 'Settings'), ]), - h('.error', { + h('div', { style: { - display: warning ? 'block' : 'none', - padding: '0 20px', - textAlign: 'center', + margin: '0 30px', }, - }, warning), + }, [ + h('.error', { + style: { + display: warning ? 'block' : 'none', + }, + }, warning), + ]), // conf view h('.flex-column.flex-justify-center.flex-grow.select-none', [ diff --git a/old-ui/app/css/index.css b/old-ui/app/css/index.css index 457c5f645..7919efc9e 100644 --- a/old-ui/app/css/index.css +++ b/old-ui/app/css/index.css @@ -28,6 +28,19 @@ html { min-height: 500px; } +.account-detail-section::-webkit-scrollbar { + width: 0; +} + +.account-detail-section::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); +} + +.account-detail-section::-webkit-scrollbar-thumb { + background-color: darkgrey; + outline: 1px solid slategrey; +} + .app-root { overflow: hidden; position: relative @@ -138,16 +151,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; @@ -221,6 +224,8 @@ textarea.twelve-word-phrase { width: 5.2em; line-height: 9px; text-rendering: geometricPrecision; + padding-left: 9px; + color: #6729a8; } .check { @@ -239,7 +244,7 @@ app sections .initialize-screen hr { width: 60px; margin: 12px; - border-color: #F7861C; + border-color: #6729a8; border-style: solid; } @@ -258,16 +263,33 @@ app sections /* unlock */ .error { - color: #db60a4; margin-bottom: 9px; + border: 1px solid #ff1345 !important; + color: #ff1345 !important; + font-size: 12px; + background: rgba(255,19,69, 0.1); + border-radius: 3px; + text-align: left; + padding: 10px 10px 10px 34px; + background-image: url('../images/warning.svg'); + background-position: 10px 10px; + background-repeat: no-repeat; + width: 100%; + line-height: 14px; } .warning { color: #8fdc97; } -.dropped { - color: #6195ED; +p.exchanges { + margin-bottom: 10px; +} + +.new-tx { + background-image: url('../images/new-tx.svg'); + width: 21px; + height: 5px; } .lock { @@ -309,6 +331,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; @@ -370,6 +398,8 @@ app sections .section-title { border-top: 1px solid #e2e2e2; + height: 80px; + font-family: 'Nunito Semibold'; } .trash { @@ -585,12 +615,13 @@ input.large-input { background: rgb(47, 174, 244); border-color: #AEAEAE; border-radius: 13px; + margin-left: 10px; } .tx-warning { - width: 60px; - height: 60px; - border-radius: 30px; + width: 40px; + height: 40px; + border-radius: 20px; background: #6729a8; background-image: url('../images/invalid-name.svg'); background-size: 2px 18px; @@ -618,7 +649,6 @@ input.large-input { display: flex; justify-content: flex-start; margin-left: 50px; - margin-bottom: 2px; font-size: 11px; text-rendering: geometricPrecision; color: #60db97; @@ -669,7 +699,6 @@ input.large-input { font-family: 'Nunito Regular'; padding-bottom: 10px; display: inline-block; - padding-left: 5px; } /* buy eth warning screen */ @@ -680,13 +709,13 @@ input.large-input { .custom-radio-selected { - width: 17px; - height: 17px; + width: 18px; + height: 18px; border: solid; border-style: double; - border-radius: 15px; + border-radius: 6px; border-width: 5px; - background: #8fdc97; + background: #6729a8; border-color: #F7F7F7; } @@ -695,16 +724,17 @@ input.large-input { height: 14px; border: solid; border-width: 1px; - border-radius: 24px; - border-color: #AEAEAE; + border-radius: 4px; + border-color: #e2e2e2; } .radio-titles { - color: #8fdc97; + color: #6729a8; } .radio-titles-subtext { - + color: #777777; + font-family: 'Nunito SemiBold'; } .selected-exchange { @@ -742,14 +772,14 @@ input.large-input { .input-container:hover .buy-inputs{ box-sizing: inherit; border: solid; - border-color: #F7861C; + border-color: #6729a8; border-width: 0.5px; border-radius: 2px; } .buy-inputs:focus{ border: solid; - border-color: #F7861C; + border-color: #6729a8; border-width: 0.5px; border-radius: 2px; } @@ -763,6 +793,14 @@ input.large-input { text-align: center; } +.activeForm.left { + border-radius: 0px 8px 0px 0px; +} + +.activeForm.right { + border-radius: 8px 0px 0px 0px; +} + .inactiveForm { background: #60269c; color: #ffffff; @@ -773,20 +811,18 @@ input.large-input { } .ex-coins { - font-family: 'Nunito Regular'; - text-transform: uppercase; + font-family: 'Nunito SemiBold'; text-align: center; - font-size: 33px; - width: 118px; - height: 42px; + font-size: 16px; + width: 70px; padding: 1px; - color: #4D4D4D; + color: #333333; } .marketinfo{ - font-family: 'Nunito light'; - color: #AEAEAE; - font-size: 15px; + font-family: 'Nunito SemiBold'; + color: #777777; + font-size: 14px; line-height: 17px; } @@ -834,12 +870,12 @@ input.large-input { .qr-header { font-family: "Nunito SemiBold"; font-size: 16px; - margin-top: 30px; + margin-bottom: 30px; } .qr-message { font-size: 12px; - color: #F7861C; + color: #6729a8; } div.message-container > div:first-child { @@ -944,4 +980,28 @@ div.message-container > div:first-child { .notification-modal__link { color: #2f9ae0; +} + +.confirm-label { + padding: 20px 50px; + color: #6729a8; + border: solid 1px #6729a8; + border-radius: 5px; + background-color: rgba(103,41,168, 0.2); +} + +.contract { + content: url('../images/contract.svg'); + width: 36px; + height: 42px; +} + +.contract-small { + content: url('../images/contract-small.svg'); + width: 19px; + height: 22px; +} + +.hidden { + visibility: hidden; } \ No newline at end of file diff --git a/old-ui/app/css/lib.css b/old-ui/app/css/lib.css index 65e4d24eb..8b359a3b2 100644 --- a/old-ui/app/css/lib.css +++ b/old-ui/app/css/lib.css @@ -1,9 +1,5 @@ /* color */ -.color-orange { - color: #F7861C; -} - .color-green { color: #8fdc97; } @@ -235,18 +231,17 @@ hr.horizontal-line { .keyring-label { z-index: 1; font-size: 11px; - background: rgba(255,0,0,0.8); + background: #8fdc97; color: white; - bottom: 0px; - left: -18px; - border-radius: 10px; + border-radius: 3px; height: 20px; min-width: 20px; - position: absolute; display: flex; align-items: center; justify-content: center; padding: 4px; + position: absolute; + right: 0; } .ether-balance { diff --git a/old-ui/app/first-time/init-menu.js b/old-ui/app/first-time/init-menu.js index d6bc4b110..6ad190f31 100644 --- a/old-ui/app/first-time/init-menu.js +++ b/old-ui/app/first-time/init-menu.js @@ -85,10 +85,17 @@ InitializeMenuScreen.prototype.renderMenu = function (state) { ]), ]), - h('span.in-progress-notification', state.warning), + state.warning ? h('div', { + style: { + width: '260px', + padding: '20px 0 0', + }, + }, [ + h('div.error', state.warning), + ]) : null, // password - h('input.large-input.letter-spacey', { + h('input.large-input', { type: 'password', id: 'password-box', placeholder: 'New Password (min 8 chars)', @@ -101,7 +108,7 @@ InitializeMenuScreen.prototype.renderMenu = function (state) { }), // confirm password - h('input.large-input.letter-spacey', { + h('input.large-input', { type: 'password', id: 'password-box-confirm', placeholder: 'Confirm Password', @@ -128,7 +135,6 @@ InitializeMenuScreen.prototype.renderMenu = function (state) { style: { fontSize: '0.8em', color: '#8fdc97', - textDecoration: 'underline', }, }, 'Import Existing DEN'), ]), diff --git a/old-ui/app/info.js b/old-ui/app/info.js index 195b6ca75..21e66bfdb 100644 --- a/old-ui/app/info.js +++ b/old-ui/app/info.js @@ -37,14 +37,14 @@ InfoScreen.prototype.render = function () { left: '30px', }, }), - h('h2.page-subtitle', 'Info'), + h('h2', 'Info'), ]), // main view h('.flex-column.flex-justify-center.flex-grow.select-none', [ h('.flex-space-around', { style: { - padding: '30px', + padding: '0 30px', }, }, [ // current version number diff --git a/old-ui/app/keychains/hd/create-vault-complete.js b/old-ui/app/keychains/hd/create-vault-complete.js index f387fab67..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', }, }, [ @@ -52,7 +51,7 @@ CreateVaultCompleteScreen.prototype.render = function () { textAlign: 'center', }, }, [ - h('span.error', 'These 12 words are the only way to restore your Nifty Wallet accounts.\nSave them somewhere safe and secret.'), + h('div.error', 'These 12 words are the only way to restore your Nifty Wallet accounts.\nSave them somewhere safe and secret.'), ]), h('textarea.twelve-word-phrase', { diff --git a/old-ui/app/keychains/hd/recover-seed/confirmation.js b/old-ui/app/keychains/hd/recover-seed/confirmation.js index 2a68a8b03..f7a23bb7c 100644 --- a/old-ui/app/keychains/hd/recover-seed/confirmation.js +++ b/old-ui/app/keychains/hd/recover-seed/confirmation.js @@ -49,10 +49,10 @@ RevealSeedConfirmation.prototype.render = function () { }, }, [ - h('h4', 'Do not recover your seed words in a public place! These words can be used to steal all your accounts.'), + h('.error', 'Do not recover your seed words in a public place! These words can be used to steal all your accounts.'), // confirmation - h('input.large-input.letter-spacey', { + h('input.large-input', { type: 'password', id: 'password-box', placeholder: 'Enter your password to confirm', @@ -65,7 +65,7 @@ RevealSeedConfirmation.prototype.render = function () { (props.warning) && ( h('span.error', { style: { - margin: '20px', + margin: '20px 0', }, }, props.warning.split('-')) ), diff --git a/old-ui/app/keychains/hd/restore-vault.js b/old-ui/app/keychains/hd/restore-vault.js index ba5030599..9e4c75210 100644 --- a/old-ui/app/keychains/hd/restore-vault.js +++ b/old-ui/app/keychains/hd/restore-vault.js @@ -24,95 +24,113 @@ RestoreVaultScreen.prototype.render = function () { return ( - h('.initialize-screen.flex-column.flex-center.flex-grow', [ - - h('h3.flex-center.section-title', { + h('div', { + style: { + width: '100%', + }, + }, [ + h('.section-title', { style: { + height: '1px', + width: '100%', + }}), + h('.initialize-screen.flex-column.flex-center.flex-grow', { style: { - fontFamily: 'Nunito SemiBold', - background: '#ffffff', - color: '#333333', - marginBottom: 24, - width: '100%', - fontSize: '16px', - padding: 6, + paddingLeft: '30px', + paddingRight: '30px', }, }, [ - h('.page-subtitle', 'Restore Vault'), - ]), - - // wallet seed entry - h('h3.flex-left', { - style: { - width: '100%', - marginBottom: '20px', - marginLeft: '60px', - }, - }, 'Wallet Seed'), - h('textarea.twelve-word-phrase.letter-spacey', { - placeholder: 'Enter your secret twelve word phrase here to restore your vault.', - }), - - // password - h('input.large-input.letter-spacey', { - type: 'password', - id: 'password-box', - placeholder: 'New Password (min 8 chars)', - dataset: { - persistentFormId: 'password', - }, - style: { - width: 300, - marginTop: 20, - border: '1px solid #e2e2e2', - }, - }), - - // confirm password - h('input.large-input.letter-spacey', { - type: 'password', - id: 'password-box-confirm', - placeholder: 'Confirm Password', - onKeyPress: this.createOnEnter.bind(this), - dataset: { - persistentFormId: 'password-confirmation', - }, - style: { - width: 300, - marginTop: 20, - border: '1px solid #e2e2e2', - }, - }), - - (state.warning) && ( - h('span.error.in-progress-notification', state.warning) - ), - - // submit - - h('.flex-row.flex-space-between.flex-right', { - style: { - marginTop: 20, - width: '100%', - marginRight: '60px', - }, - }, [ - - // cancel - h('button.btn-violet', { - onClick: this.showInitializeMenu.bind(this), + h('h3.flex-center', { style: { - marginRight: '10px', + fontFamily: 'Nunito SemiBold', + background: '#ffffff', + color: '#333333', + width: '100%', + fontSize: '16px', + padding: 30, }, - }, 'Cancel'), + }, [ + h('.page-subtitle', 'Restore Vault'), + ]), + + // wallet seed entry + h('h3.flex-left', { + style: { + width: '100%', + marginBottom: '20px', + fontFamily: 'Nunito SemiBold', + }, + }, 'Wallet Seed'), + h('textarea.twelve-word-phrase', { + placeholder: 'Enter your secret twelve word phrase here to restore your vault.', + }), + + // password + h('input.large-input', { + type: 'password', + id: 'password-box', + placeholder: 'New Password (min 8 chars)', + dataset: { + persistentFormId: 'password', + }, + style: { + width: '100%', + marginTop: 20, + border: '1px solid #e2e2e2', + }, + }), + + // confirm password + h('input.large-input', { + type: 'password', + id: 'password-box-confirm', + placeholder: 'Confirm Password', + onKeyPress: this.createOnEnter.bind(this), + dataset: { + persistentFormId: 'password-confirmation', + }, + style: { + width: '100%', + marginTop: 20, + border: '1px solid #e2e2e2', + }, + }), + + (state.warning) && ( + h('div', { + style: { + padding: '20px 0 0', + width: '100%', + }, + }, [ + h('div.error.in-progress-notification', state.warning), + ]) + ), // submit - h('button', { - onClick: this.createNewVaultAndRestore.bind(this), - }, 'Ok'), + h('.flex-row.flex-space-between.flex-right', { + style: { + marginTop: 20, + width: '100%', + }, + }, [ + + // cancel + h('button.btn-violet', { + onClick: this.showInitializeMenu.bind(this), + style: { + marginRight: '10px', + }, + }, 'Cancel'), + + // submit + h('button', { + onClick: this.createNewVaultAndRestore.bind(this), + }, 'Ok'), + + ]), ]), ]) - ) } diff --git a/old-ui/app/remove-token.js b/old-ui/app/remove-token.js index 35470ceb1..fa3842414 100644 --- a/old-ui/app/remove-token.js +++ b/old-ui/app/remove-token.js @@ -42,17 +42,28 @@ RemoveTokenScreen.prototype.render = function () { style: { display: 'inline-block', textAlign: 'center', + padding: '0 30px', }, }, [ - h('p.error', warning), + h('p.confirm-label', warning), ]), h('.flex-column.flex-justify-center.flex-grow.select-none', [ h('.flex-space-around.flex-right', { style: { - padding: '30px', + padding: '20px 30px', }, }, [ + h('button.btn-violet', + { + style: { + marginRight: '10px', + }, + onClick: () => { + this.props.dispatch(actions.goHome()) + }, + }, + 'No'), h('button', { style: { alignSelf: 'center', @@ -63,7 +74,7 @@ RemoveTokenScreen.prototype.render = function () { this.props.dispatch(actions.goHome()) }) }, - }, 'Remove'), + }, 'Yes'), ]), ]), ]) diff --git a/old-ui/app/send.js b/old-ui/app/send.js index d08046f3b..9d4bc3b92 100644 --- a/old-ui/app/send.js +++ b/old-ui/app/send.js @@ -65,7 +65,7 @@ SendTransactionScreen.prototype.render = function () { h('.account-data-subsection.flex-row.flex-grow', { style: { background: 'linear-gradient(rgb(84, 36, 147), rgb(104, 45, 182))', - padding: '20px 20px', + padding: '30px', }, }, [ @@ -162,7 +162,12 @@ SendTransactionScreen.prototype.render = function () { ]), // error message - props.error && h('span.error.flex-center', props.error), + props.error && h('div', {style: { + marginLeft: '30px', + marginRight: '30px', + }}, [ + h('div.error.flex-center', props.error), + ]), // 'to' field h('section.flex-row.flex-center', [ 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/old-ui/app/unlock.js b/old-ui/app/unlock.js index f9d5bf70e..d14a9371c 100644 --- a/old-ui/app/unlock.js +++ b/old-ui/app/unlock.js @@ -70,8 +70,6 @@ UnlockScreen.prototype.render = function () { h('.error', { style: { display: warning ? 'block' : 'none', - padding: '0 20px', - textAlign: 'center', }, }, warning), ]), diff --git a/old-ui/design/chromeStorePics/screen_dao_accounts.png b/old-ui/design/chromeStorePics/screen_dao_accounts.png index 0404f2aa4..cd7091712 100644 Binary files a/old-ui/design/chromeStorePics/screen_dao_accounts.png and b/old-ui/design/chromeStorePics/screen_dao_accounts.png differ diff --git a/package-lock.json b/package-lock.json index ce8277c53..4dd0ae869 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8490,13 +8490,12 @@ "resolved": "https://registry.npmjs.org/eth-sig-util/-/eth-sig-util-2.0.1.tgz", "integrity": "sha512-lxHZOQspexk3DaGj4RBbWy4C/qNOWRnxpaJzNnYD3WEmC8shcJ4tHs7Xv878rzvILfJnSFSCCiKQhng1m80oBQ==", "requires": { - "ethereumjs-abi": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7", "ethereumjs-util": "^5.1.1" }, "dependencies": { "ethereumjs-abi": { "version": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7", - "from": "git+https://github.com/ethereumjs/ethereumjs-abi.git", + "from": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7", "requires": { "bn.js": "^4.10.0", "ethereumjs-util": "^5.0.0" @@ -8774,13 +8773,12 @@ "resolved": "https://registry.npmjs.org/eth-sig-util/-/eth-sig-util-1.4.2.tgz", "integrity": "sha1-jZWCAsftuq6Dlwf7pvCf8ydgYhA=", "requires": { - "ethereumjs-abi": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7", "ethereumjs-util": "^5.1.1" }, "dependencies": { "ethereumjs-abi": { "version": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7", - "from": "git+https://github.com/ethereumjs/ethereumjs-abi.git", + "from": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7", "requires": { "bn.js": "^4.10.0", "ethereumjs-util": "^5.0.0" @@ -8822,14 +8820,12 @@ "integrity": "sha512-lxHZOQspexk3DaGj4RBbWy4C/qNOWRnxpaJzNnYD3WEmC8shcJ4tHs7Xv878rzvILfJnSFSCCiKQhng1m80oBQ==", "dev": true, "requires": { - "ethereumjs-abi": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7", "ethereumjs-util": "^5.1.1" }, "dependencies": { "ethereumjs-abi": { "version": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7", - "from": "git+https://github.com/ethereumjs/ethereumjs-abi.git", - "dev": true, + "from": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7", "requires": { "bn.js": "^4.10.0", "ethereumjs-util": "^5.0.0" @@ -8841,7 +8837,6 @@ "version": "5.2.0", "resolved": "https://registry.npmjs.org/ethereumjs-util/-/ethereumjs-util-5.2.0.tgz", "integrity": "sha512-CJAKdI0wgMbQFLlLRtZKGcy/L6pzVRgelIZqRqNbuVFM3K9VEnyfbcvz0ncWMRNCe4kaHWjwRYQcYMucmwsnWA==", - "dev": true, "requires": { "bn.js": "^4.11.0", "create-hash": "^1.1.2", @@ -31026,7 +31021,6 @@ "version": "3.1.5", "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz", "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==", - "dev": true, "requires": { "is-typedarray": "^1.0.0" } @@ -32050,7 +32044,6 @@ "resolved": "https://registry.npmjs.org/web3/-/web3-0.20.3.tgz", "integrity": "sha1-yqRDc9yIFayHZ73ba6cwc5ZMqos=", "requires": { - "bignumber.js": "git+https://github.com/frozeman/bignumber.js-nolookahead.git#57692b3ecfc98bbdd6b3a516cb2353652ea49934", "crypto-js": "^3.1.4", "utf8": "^2.1.1", "xhr2": "*", @@ -32059,7 +32052,7 @@ "dependencies": { "bignumber.js": { "version": "git+https://github.com/frozeman/bignumber.js-nolookahead.git#57692b3ecfc98bbdd6b3a516cb2353652ea49934", - "from": "git+https://github.com/frozeman/bignumber.js-nolookahead.git" + "from": "git+https://github.com/frozeman/bignumber.js-nolookahead.git#57692b3ecfc98bbdd6b3a516cb2353652ea49934" } } }, @@ -32558,8 +32551,7 @@ "dev": true, "requires": { "underscore": "1.8.3", - "web3-core-helpers": "1.0.0-beta.34", - "websocket": "git://github.com/frozeman/WebSocket-Node.git#6c72925e3f8aaaea8dc8450f97627e85263999f2" + "web3-core-helpers": "1.0.0-beta.34" }, "dependencies": { "underscore": { @@ -32570,8 +32562,7 @@ }, "websocket": { "version": "git://github.com/frozeman/WebSocket-Node.git#6c72925e3f8aaaea8dc8450f97627e85263999f2", - "from": "git://github.com/frozeman/WebSocket-Node.git#browserifyCompatible", - "dev": true, + "from": "git://github.com/frozeman/WebSocket-Node.git#6c72925e3f8aaaea8dc8450f97627e85263999f2", "requires": { "debug": "^2.2.0", "nan": "^2.3.3", @@ -33927,8 +33918,7 @@ "yaeti": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/yaeti/-/yaeti-0.0.6.tgz", - "integrity": "sha1-8m9ITXJoTPQr7ft2lwqhYI+/lXc=", - "dev": true + "integrity": "sha1-8m9ITXJoTPQr7ft2lwqhYI+/lXc=" }, "yallist": { "version": "2.1.2", diff --git a/test/e2e/metamask.spec.js b/test/e2e/metamask.spec.js index ebd39b820..01b20b074 100644 --- a/test/e2e/metamask.spec.js +++ b/test/e2e/metamask.spec.js @@ -176,12 +176,12 @@ describe('Metamask popup page', function () { it('adds seed phrase', async function () { const testSeedPhrase = 'phrase upgrade clock rough situate wedding elder clever doctor stamp excess tent' - const seedTextArea = await driver.findElement(By.css('#app-content > div > div.app-primary.from-left > div > textarea')) + const seedTextArea = await driver.findElement(By.css('#app-content > div > div.app-primary.from-left > div > div.initialize-screen.flex-column.flex-center.flex-grow > textarea')) await seedTextArea.sendKeys(testSeedPhrase) await driver.findElement(By.id('password-box')).sendKeys('123456789') await driver.findElement(By.id('password-box-confirm')).sendKeys('123456789') - await driver.findElement(By.css('#app-content > div > div.app-primary.from-left > div > div > button:nth-child(2)')).click() + await driver.findElement(By.css('#app-content > div > div.app-primary.from-left > div > div.initialize-screen.flex-column.flex-center.flex-grow > div > button:nth-child(2)')).click() await delay(500) }) @@ -343,8 +343,8 @@ describe('Metamask popup page', function () { assert.equal(await removeTokenTitle.getText(), 'Remove Token') // Confirm the removal - const confirmRemoveTokenButton = 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 > button')) - assert.equal(await confirmRemoveTokenButton.getText(), 'Remove') + const confirmRemoveTokenButton = 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 > button:nth-child(2)')) + assert.equal(await confirmRemoveTokenButton.getText(), 'Yes') await confirmRemoveTokenButton.click() await delay(300) @@ -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') { @@ -382,7 +382,7 @@ describe('Metamask popup page', function () { await delay(300) const titleConfirmPage = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div.section-title.flex-row.flex-center > h2')) assert.equal(await titleConfirmPage.getText(), 'Delete Custom RPC') - const yesButton = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div:nth-child(3) > button:nth-child(1)')) + const yesButton = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div.flex-row.flex-right > button:nth-child(2)')) assert.equal(await yesButton.getText(), 'Yes') await yesButton.click() await delay(300) diff --git a/ui/design/chromeStorePics/screen_dao_accounts.png b/ui/design/chromeStorePics/screen_dao_accounts.png index e34567985..cd7091712 100644 Binary files a/ui/design/chromeStorePics/screen_dao_accounts.png and b/ui/design/chromeStorePics/screen_dao_accounts.png differ