diff options
41 files changed, 886 insertions, 377 deletions
diff --git a/app/images/metamask-fox.svg b/app/images/metamask-fox.svg new file mode 100644 index 000000000..f3c24f79e --- /dev/null +++ b/app/images/metamask-fox.svg @@ -0,0 +1,128 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<svg version="1.1" id="Layer_1" xmlns:ev="http://www.w3.org/2001/xml-events" + xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 318.6 318.6" + style="enable-background:new 0 0 318.6 318.6;" xml:space="preserve"> +<style type="text/css"> + .st0{fill:#161616;stroke:#161616;} + .st1{fill:#E4761B;stroke:#E4761B;stroke-linecap:round;stroke-linejoin:round;} + .st2{fill:#763D16;stroke:#763D16;stroke-linecap:round;stroke-linejoin:round;} + .st3{fill:#F6851B;stroke:#F6851B;stroke-linecap:round;stroke-linejoin:round;} + .st4{fill:#E2761B;stroke:#E2761B;stroke-linecap:round;stroke-linejoin:round;} + .st5{fill:#CD6116;stroke:#CD6116;stroke-linecap:round;stroke-linejoin:round;} + .st6{fill:#C0AD9E;stroke:#C0AD9E;stroke-linecap:round;stroke-linejoin:round;} + .st7{fill:#D7C1B3;stroke:#D7C1B3;stroke-linecap:round;stroke-linejoin:round;} + .st8{fill:#E4751F;stroke:#E4751F;stroke-linecap:round;stroke-linejoin:round;} + .st9{fill:#233447;stroke:#233447;stroke-linecap:round;stroke-linejoin:round;} + .st10{fill:#161616;stroke:#161616;stroke-linecap:round;stroke-linejoin:round;} +</style> +<polygon class="st0" points="277.3,145.6 272.3,142 280.3,134.7 274.2,129.9 282.2,123.8 276.9,119.8 285.3,79 272.7,41.1 + 191.6,71.4 124.1,71.4 43,41.1 30.4,79 38.9,119.8 33.5,123.8 41.5,129.9 35.4,134.7 43.4,142 38.4,145.6 49.9,159.1 32.5,213.3 + 48.6,268.6 105.3,253 116.3,262 138.7,277.5 177,277.5 199.4,262 210.4,253 267.1,268.6 283.3,213.3 265.8,159.1 "/> +<g> + <polygon class="st1" points="105.3,253 48.6,268.6 32.5,213.3 "/> + <polygon class="st1" points="283.3,213.3 267.1,268.6 210.4,253 "/> + <polygon class="st2" points="265.8,159.1 213.5,143.8 231.8,139 "/> + <polygon class="st2" points="49.9,159.1 84,139 102.2,143.8 "/> + <polygon class="st2" points="43.4,142 41.5,129.9 84,139 "/> + <polygon class="st2" points="272.3,142 231.8,139 274.2,129.9 "/> + <polygon class="st2" points="272.3,142 265.8,159.1 231.8,139 "/> + <polygon class="st2" points="43.4,142 84,139 49.9,159.1 "/> + <polygon class="st2" points="231.8,139 276.9,119.8 274.2,129.9 "/> + <polygon class="st2" points="84,139 41.5,129.9 38.9,119.8 "/> + <polygon class="st3" points="124.1,71.4 191.6,71.4 176.5,112.5 "/> + <polygon class="st3" points="176.5,112.5 139.2,112.5 124.1,71.4 "/> + <polygon class="st2" points="276.9,119.8 231.8,139 231,87.4 "/> + <polygon class="st2" points="102.2,143.8 84,139 84.7,87.4 "/> + <polygon class="st2" points="84.7,87.4 84,139 38.9,119.8 "/> + <polygon class="st2" points="231,87.4 231.8,139 213.5,143.8 "/> + <polygon class="st1" points="139.2,112.5 43,41.1 124.1,71.4 "/> + <polygon class="st4" points="272.7,41.1 176.5,112.5 191.6,71.4 "/> + <polygon class="st1" points="210.4,253 236.9,213.3 283.3,213.3 "/> + <polygon class="st1" points="32.5,213.3 78.9,213.3 105.3,253 "/> + <polygon class="st3" points="229.3,167.7 283.3,213.3 236.9,213.3 "/> + <polygon class="st3" points="86.4,167.7 32.5,213.3 49.9,159.1 "/> + <polygon class="st3" points="78.9,213.3 32.5,213.3 86.4,167.7 "/> + <polygon class="st3" points="229.3,167.7 265.8,159.1 283.3,213.3 "/> + <polygon class="st2" points="84.7,87.4 139.2,112.5 102.2,143.8 "/> + <polygon class="st2" points="213.5,143.8 176.5,112.5 231,87.4 "/> + <polygon class="st2" points="265.8,159.1 272.3,142 277.3,145.6 "/> + <polygon class="st2" points="49.9,159.1 38.4,145.6 43.4,142 "/> + <polygon class="st2" points="272.3,142 274.2,129.9 280.3,134.7 "/> + <polygon class="st2" points="43.4,142 35.4,134.7 41.5,129.9 "/> + <polygon class="st2" points="33.5,123.8 38.9,119.8 41.5,129.9 "/> + <polygon class="st2" points="282.2,123.8 274.2,129.9 276.9,119.8 "/> + <polygon class="st3" points="49.9,159.1 102.2,143.8 86.4,167.7 "/> + <polygon class="st3" points="265.8,159.1 229.3,167.7 213.5,143.8 "/> + <polygon class="st2" points="38.9,119.8 30.4,79 84.7,87.4 "/> + <polygon class="st2" points="231,87.4 285.3,79 276.9,119.8 "/> + <polygon class="st1" points="102.2,143.8 139.2,112.5 142.6,170.2 "/> + <polygon class="st1" points="213.5,143.8 229.3,167.7 173.1,170.2 "/> + <polygon class="st1" points="173.1,170.2 176.5,112.5 213.5,143.8 "/> + <polygon class="st1" points="142.6,170.2 86.4,167.7 102.2,143.8 "/> + <polygon class="st2" points="272.7,41.1 285.3,79 231,87.4 "/> + <polygon class="st2" points="43,41.1 139.2,112.5 84.7,87.4 "/> + <polygon class="st2" points="231,87.4 176.5,112.5 272.7,41.1 "/> + <polygon class="st2" points="84.7,87.4 30.4,79 43,41.1 "/> + <polygon class="st5" points="105.3,253 78.9,213.3 110,213.7 "/> + <polygon class="st5" points="210.4,253 205.7,213.7 236.9,213.3 "/> + <polygon class="st3" points="173.1,170.2 142.6,170.2 139.2,112.5 "/> + <polygon class="st3" points="139.2,112.5 176.5,112.5 173.1,170.2 "/> + <polygon class="st6" points="116.3,262 105.3,253 136.8,267.9 "/> + <polygon class="st6" points="178.9,267.9 210.4,253 199.4,262 "/> + <polygon class="st7" points="136.6,258.6 136.8,267.9 105.3,253 "/> + <polygon class="st7" points="179.2,258.6 210.4,253 178.9,267.9 "/> + <polygon class="st3" points="86.4,167.7 110,213.7 78.9,213.3 "/> + <polygon class="st3" points="236.9,213.3 205.7,213.7 229.3,167.7 "/> + <polygon class="st8" points="86.4,167.7 109.2,190.8 110,213.7 "/> + <polygon class="st8" points="229.3,167.7 205.7,213.7 206.6,190.8 "/> + <polygon class="st7" points="105.3,253 139.2,236.5 136.6,258.6 "/> + <polygon class="st7" points="210.4,253 179.2,258.6 176.5,236.5 "/> + <polygon class="st1" points="139.2,236.5 105.3,253 110,213.7 "/> + <polygon class="st1" points="176.5,236.5 205.7,213.7 210.4,253 "/> + <polygon class="st5" points="173.1,170.2 229.3,167.7 206.6,190.8 "/> + <polygon class="st5" points="109.2,190.8 86.4,167.7 142.6,170.2 "/> + <polygon class="st5" points="142.6,170.2 129.1,181.7 109.2,190.8 "/> + <polygon class="st5" points="206.6,190.8 186.6,181.7 173.1,170.2 "/> + <polygon class="st3" points="205.7,213.7 178.3,199.1 206.6,190.8 "/> + <polygon class="st3" points="110,213.7 109.2,190.8 137.4,199.1 "/> + <polygon class="st9" points="137.4,199.1 109.2,190.8 129.1,181.7 "/> + <polygon class="st9" points="178.3,199.1 186.6,181.7 206.6,190.8 "/> + <polygon class="st5" points="186.6,181.7 178.3,199.1 173.1,170.2 "/> + <polygon class="st5" points="129.1,181.7 142.6,170.2 137.4,199.1 "/> + <polygon class="st6" points="199.4,262 177,277.5 178.9,267.9 "/> + <polygon class="st6" points="136.8,267.9 138.7,277.5 116.3,262 "/> + <polygon class="st4" points="178.3,199.1 171.8,188.4 173.1,170.2 "/> + <polygon class="st8" points="137.4,199.1 142.6,170.2 143.9,188.4 "/> + <polygon class="st3" points="173.1,170.2 171.8,188.4 143.9,188.4 "/> + <polygon class="st3" points="143.9,188.4 142.6,170.2 173.1,170.2 "/> + <polygon class="st3" points="178.3,199.1 205.7,213.7 176.5,236.5 "/> + <polygon class="st3" points="139.2,236.5 110,213.7 137.4,199.1 "/> + <polygon class="st3" points="137.4,199.1 144,233.2 139.2,236.5 "/> + <polygon class="st3" points="176.5,236.5 171.7,233.2 178.3,199.1 "/> + <polygon class="st8" points="171.8,188.4 178.3,199.1 171.7,233.2 "/> + <polygon class="st8" points="143.9,188.4 144,233.2 137.4,199.1 "/> + <polygon class="st3" points="143.9,188.4 171.8,188.4 171.7,233.2 "/> + <polygon class="st3" points="171.7,233.2 144,233.2 143.9,188.4 "/> + <polygon class="st6" points="179.2,258.6 178.9,267.9 177,277.5 "/> + <polygon class="st6" points="138.7,277.5 136.8,267.9 136.6,258.6 "/> + <polygon class="st6" points="136.6,258.6 139,256.4 138.7,277.5 "/> + <polygon class="st6" points="177,277.5 176.7,256.4 179.2,258.6 "/> + <polygon class="st6" points="138.7,277.5 139,256.4 176.7,256.4 "/> + <polygon class="st6" points="176.7,256.4 177,277.5 138.7,277.5 "/> + <polygon class="st10" points="176.5,236.5 179.2,258.6 176.7,256.4 "/> + <polygon class="st10" points="139,256.4 136.6,258.6 139.2,236.5 "/> + <polygon class="st10" points="139.2,236.5 140.7,241.2 139,256.4 "/> + <polygon class="st10" points="176.7,256.4 175,241.2 176.5,236.5 "/> + <polygon class="st10" points="143.7,237.7 140.7,241.2 139.2,236.5 "/> + <polygon class="st10" points="176.5,236.5 175,241.2 172,237.7 "/> + <polygon class="st10" points="172,237.7 171.7,233.2 176.5,236.5 "/> + <polygon class="st10" points="139.2,236.5 144,233.2 143.7,237.7 "/> + <polygon class="st10" points="171.7,233.2 172,237.7 143.7,237.7 "/> + <polygon class="st10" points="143.7,237.7 144,233.2 171.7,233.2 "/> + <polygon class="st10" points="140.7,241.2 175,241.2 176.7,256.4 "/> + <polygon class="st10" points="176.7,256.4 139,256.4 140.7,241.2 "/> + <polygon class="st10" points="140.7,241.2 143.7,237.7 172,237.7 "/> + <polygon class="st10" points="172,237.7 175,241.2 140.7,241.2 "/> +</g> +</svg> diff --git a/app/scripts/popup.js b/app/scripts/popup.js index d0952af6a..1a2e425dc 100644 --- a/app/scripts/popup.js +++ b/app/scripts/popup.js @@ -26,8 +26,17 @@ const container = document.getElementById('app-content') startPopup({ container, connectionStream }, (err, store) => { if (err) return displayCriticalError(err) - let betaUIState = store.getState().metamask.featureFlags.betaUI - let css = betaUIState ? NewMetaMaskUiCss() : OldMetaMaskUiCss() + // Code commented out until we begin auto adding users to NewUI + // const { isMascara, identities = {}, featureFlags = {} } = store.getState().metamask + // const firstTime = Object.keys(identities).length === 0 + const { isMascara, featureFlags = {} } = store.getState().metamask + let betaUIState = featureFlags.betaUI + + // Code commented out until we begin auto adding users to NewUI + // const useBetaCss = isMascara || firstTime || betaUIState + const useBetaCss = isMascara || betaUIState + + let css = useBetaCss ? NewMetaMaskUiCss() : OldMetaMaskUiCss() let deleteInjectedCss = injectCss(css) let newBetaUIState diff --git a/ui/app/accounts/import/index.js b/ui/app/accounts/import/index.js index b7d9a9537..0c901c09b 100644 --- a/ui/app/accounts/import/index.js +++ b/ui/app/accounts/import/index.js @@ -2,7 +2,6 @@ const inherits = require('util').inherits const Component = require('react').Component const h = require('react-hyperscript') const connect = require('react-redux').connect -const actions = require('../../actions') import Select from 'react-select' // Subviews @@ -34,37 +33,14 @@ AccountImportSubview.prototype.render = function () { const { type } = state return ( - h('div.flex-center', { - style: { - flexDirection: 'column', - marginTop: '32px', - }, - }, [ - h('.section-title.flex-row.flex-center', [ - h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { - onClick: (event) => { - props.dispatch(actions.goHome()) - }, - }), - h('h2.page-subtitle', 'Import Accounts'), - ]), - h('div', { - style: { - padding: '10px 0', - width: '260px', - color: 'rgb(174, 174, 174)', - }, - }, [ + h('div.new-account-import-form', [ - h('h3', { style: { padding: '3px' } }, 'SELECT TYPE'), + h('div.new-account-import-form__select-section', [ - h('style', ` - .has-value.Select--single > .Select-control .Select-value .Select-value-label, .Select-value-label { - color: rgb(174,174,174); - } - `), + h('div.new-account-import-form__select-label', 'SELECT TYPE'), h(Select, { + className: 'new-account-import-form__select', name: 'import-type-select', clearable: false, value: type || menuItems[0], @@ -75,10 +51,10 @@ AccountImportSubview.prototype.render = function () { } }), onChange: (opt) => { - props.dispatch(actions.showImportPage()) this.setState({ type: opt.value }) }, }), + ]), this.renderImportView(), diff --git a/ui/app/accounts/import/json.js b/ui/app/accounts/import/json.js index 486ed8886..9cefcfa77 100644 --- a/ui/app/accounts/import/json.js +++ b/ui/app/accounts/import/json.js @@ -24,14 +24,7 @@ JsonImportSubview.prototype.render = function () { const { error } = this.props return ( - h('div', { - style: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - padding: '5px 15px 0px 15px', - }, - }, [ + h('div.new-account-import-form__json', [ h('p', 'Used by a variety of different clients'), h('a.warning', { href: HELP_LINK, target: '_blank' }, 'File import not working? Click here!'), @@ -40,28 +33,35 @@ JsonImportSubview.prototype.render = function () { readAs: 'text', onLoad: this.onLoad.bind(this), style: { - margin: '20px 0px 12px 20px', + margin: '20px 0px 12px 34%', fontSize: '15px', + display: 'flex', + justifyContent: 'center', }, }), - h('input.large-input.letter-spacey', { + h('input.new-account-import-form__input-password', { type: 'password', placeholder: 'Enter password', id: 'json-password-box', onKeyPress: this.createKeyringOnEnter.bind(this), - style: { - width: 260, - marginTop: 12, - }, }), - h('button.primary', { - onClick: this.createNewKeychain.bind(this), - style: { - margin: 12, - }, - }, 'Import'), + h('div.new-account-create-form__buttons', {}, [ + + h('button.new-account-create-form__button-cancel', { + onClick: () => this.props.goHome(), + }, [ + 'CANCEL', + ]), + + h('button.new-account-create-form__button-create', { + onClick: () => this.createNewKeychain.bind(this), + }, [ + 'IMPORT', + ]), + + ]), error ? h('span.error', error) : null, ]) diff --git a/ui/app/accounts/import/private-key.js b/ui/app/accounts/import/private-key.js index e214bcbbe..43afbca87 100644 --- a/ui/app/accounts/import/private-key.js +++ b/ui/app/accounts/import/private-key.js @@ -4,7 +4,7 @@ const h = require('react-hyperscript') const connect = require('react-redux').connect const actions = require('../../actions') -module.exports = connect(mapStateToProps)(PrivateKeyImportView) +module.exports = connect(mapStateToProps, mapDispatchToProps)(PrivateKeyImportView) function mapStateToProps (state) { return { @@ -12,45 +12,49 @@ function mapStateToProps (state) { } } +function mapDispatchToProps (dispatch) { + return { + goHome: () => dispatch(actions.goHome()), + importNewAccount: (strategy, [ privateKey ]) => { + dispatch(actions.importNewAccount(strategy, [ privateKey ])) + }, + displayWarning: () => dispatch(actions.displayWarning(null)), + } +} + inherits(PrivateKeyImportView, Component) function PrivateKeyImportView () { Component.call(this) } -PrivateKeyImportView.prototype.componentWillUnmount = function () { - this.props.dispatch(actions.displayWarning(null)) -} - PrivateKeyImportView.prototype.render = function () { - const { error } = this.props + const { error, goHome } = this.props return ( - h('div', { - style: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - padding: '5px 15px 0px 15px', - }, - }, [ - h('span', 'Paste your private key string here'), + h('div.new-account-import-form__private-key', [ + h('span.new-account-create-form__instruction', 'Paste your private key string here:'), - h('input.large-input.letter-spacey', { + h('input.new-account-import-form__input-password', { type: 'password', id: 'private-key-box', - onKeyPress: this.createKeyringOnEnter.bind(this), - style: { - width: 260, - marginTop: 12, - }, + onKeyPress: () => this.createKeyringOnEnter(), }), - h('button.primary', { - onClick: this.createNewKeychain.bind(this), - style: { - margin: 12, - }, - }, 'Import'), + h('div.new-account-create-form__buttons', {}, [ + + h('button.new-account-create-form__button-cancel', { + onClick: () => goHome(), + }, [ + 'CANCEL', + ]), + + h('button.new-account-create-form__button-create', { + onClick: () => this.createNewKeychain(), + }, [ + 'IMPORT', + ]), + + ]), error ? h('span.error', error) : null, ]) @@ -67,5 +71,6 @@ PrivateKeyImportView.prototype.createKeyringOnEnter = function (event) { PrivateKeyImportView.prototype.createNewKeychain = function () { const input = document.getElementById('private-key-box') const privateKey = input.value - this.props.dispatch(actions.importNewAccount('Private Key', [ privateKey ])) + + this.props.importNewAccount('Private Key', [ privateKey ]) } diff --git a/ui/app/accounts/new-account/create-form.js b/ui/app/accounts/new-account/create-form.js new file mode 100644 index 000000000..494726ae4 --- /dev/null +++ b/ui/app/accounts/new-account/create-form.js @@ -0,0 +1,96 @@ +const { Component } = require('react') +const PropTypes = require('prop-types') +const h = require('react-hyperscript') +const { connect } = require('react-redux') +const actions = require('../../actions') + +class NewAccountCreateForm extends Component { + constructor (props) { + super(props) + const { numberOfExistingAccounts = 0 } = props + const newAccountNumber = numberOfExistingAccounts + 1 + + this.state = { + newAccountName: `Account ${newAccountNumber}`, + } + } + + render () { + const { newAccountName } = this.state + + return h('div.new-account-create-form', [ + + h('div.new-account-create-form__input-label', {}, [ + 'Account Name', + ]), + + h('div.new-account-create-form__input-wrapper', {}, [ + h('input.new-account-create-form__input', { + value: this.state.newAccountName, + placeholder: 'E.g. My new account', + onChange: event => this.setState({ newAccountName: event.target.value }), + }, []), + ]), + + h('div.new-account-create-form__buttons', {}, [ + + h('button.new-account-create-form__button-cancel', { + onClick: () => this.props.goHome(), + }, [ + 'CANCEL', + ]), + + h('button.new-account-create-form__button-create', { + onClick: () => this.props.createAccount(newAccountName), + }, [ + 'CREATE', + ]), + + ]), + + ]) + } +} + +NewAccountCreateForm.propTypes = { + hideModal: PropTypes.func, + showImportPage: PropTypes.func, + createAccount: PropTypes.func, + goHome: PropTypes.func, + numberOfExistingAccounts: PropTypes.number, +} + +const mapStateToProps = state => { + const { metamask: { network, selectedAddress, identities = {} } } = state + const numberOfExistingAccounts = Object.keys(identities).length + + return { + network, + address: selectedAddress, + numberOfExistingAccounts, + } +} + +const mapDispatchToProps = dispatch => { + return { + toCoinbase: (address) => { + dispatch(actions.buyEth({ network: '1', address, amount: 0 })) + }, + hideModal: () => { + dispatch(actions.hideModal()) + }, + createAccount: (newAccountName) => { + dispatch(actions.addNewAccount()) + .then((newAccountAddress) => { + if (newAccountName) { + dispatch(actions.saveAccountLabel(newAccountAddress, newAccountName)) + } + dispatch(actions.goHome()) + }) + }, + showImportPage: () => dispatch(actions.showImportPage()), + goHome: () => dispatch(actions.goHome()), + } +} + +module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountCreateForm) diff --git a/ui/app/accounts/new-account/index.js b/ui/app/accounts/new-account/index.js new file mode 100644 index 000000000..acf0dc6e4 --- /dev/null +++ b/ui/app/accounts/new-account/index.js @@ -0,0 +1,81 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const connect = require('react-redux').connect +const actions = require('../../actions') +const { getCurrentViewContext } = require('../../selectors') +const classnames = require('classnames') + +const NewAccountCreateForm = require('./create-form') +const NewAccountImportForm = require('../import') + +function mapStateToProps (state) { + return { + displayedForm: getCurrentViewContext(state), + } +} + +function mapDispatchToProps (dispatch) { + return { + displayForm: form => dispatch(actions.setNewAccountForm(form)), + showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)), + showExportPrivateKeyModal: () => { + dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' })) + }, + hideModal: () => dispatch(actions.hideModal()), + saveAccountLabel: (address, label) => dispatch(actions.saveAccountLabel(address, label)), + } +} + +inherits(AccountDetailsModal, Component) +function AccountDetailsModal (props) { + Component.call(this) + + this.state = { + displayedForm: props.displayedForm, + } +} + +module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal) + +AccountDetailsModal.prototype.render = function () { + const { displayedForm, displayForm } = this.props + + return h('div.new-account', {}, [ + + h('div.new-account__header', [ + + h('div.new-account__title', 'New Account'), + + h('div.new-account__tabs', [ + + h('div.new-account__tabs__tab', { + className: classnames('new-account__tabs__tab', { + 'new-account__tabs__selected': displayedForm === 'CREATE', + 'new-account__tabs__unselected cursor-pointer': displayedForm !== 'CREATE', + }), + onClick: () => displayForm('CREATE'), + }, 'Create'), + + h('div.new-account__tabs__tab', { + className: classnames('new-account__tabs__tab', { + 'new-account__tabs__selected': displayedForm === 'IMPORT', + 'new-account__tabs__unselected cursor-pointer': displayedForm !== 'IMPORT', + }), + onClick: () => displayForm('IMPORT'), + }, 'Import'), + + ]), + + ]), + + h('div.new-account__form', [ + + displayedForm === 'CREATE' + ? h(NewAccountCreateForm) + : h(NewAccountImportForm), + + ]), + + ]) +} diff --git a/ui/app/actions.js b/ui/app/actions.js index 0d96d2b59..192a73f76 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -50,12 +50,16 @@ var actions = { SHOW_NEW_VAULT_SEED: 'SHOW_NEW_VAULT_SEED', SHOW_INFO_PAGE: 'SHOW_INFO_PAGE', SHOW_IMPORT_PAGE: 'SHOW_IMPORT_PAGE', + SHOW_NEW_ACCOUNT_PAGE: 'SHOW_NEW_ACCOUNT_PAGE', + SET_NEW_ACCOUNT_FORM: 'SET_NEW_ACCOUNT_FORM', unlockMetamask: unlockMetamask, unlockFailed: unlockFailed, showCreateVault: showCreateVault, showRestoreVault: showRestoreVault, showInitializeMenu: showInitializeMenu, showImportPage, + showNewAccountPage, + setNewAccountForm, createNewVaultAndKeychain: createNewVaultAndKeychain, createNewVaultAndRestore: createNewVaultAndRestore, createNewVaultInProgress: createNewVaultInProgress, @@ -829,6 +833,20 @@ function showImportPage () { } } +function showNewAccountPage (formToSelect) { + return { + type: actions.SHOW_NEW_ACCOUNT_PAGE, + formToSelect, + } +} + +function setNewAccountForm (formToSelect) { + return { + type: actions.SET_NEW_ACCOUNT_FORM, + formToSelect, + } +} + function createNewVaultInProgress () { return { type: actions.CREATE_NEW_VAULT_IN_PROGRESS, diff --git a/ui/app/add-token.js b/ui/app/add-token.js index 10aaae103..bb34f5d00 100644 --- a/ui/app/add-token.js +++ b/ui/app/add-token.js @@ -295,12 +295,12 @@ AddTokenScreen.prototype.renderConfirmation = function () { ]), ]), h('div.add-token__buttons', [ - h('button.btn-secondary', { - onClick: () => addTokens(tokens).then(goHome), - }, 'Add Tokens'), - h('button.btn-tertiary', { + h('button.btn-cancel.add-token__button', { onClick: () => this.setState({ isShowingConfirmation: false }), }, 'Back'), + h('button.btn-clear.add-token__button', { + onClick: () => addTokens(tokens).then(goHome), + }, 'Add Tokens'), ]), ]) ) @@ -345,12 +345,12 @@ AddTokenScreen.prototype.render = function () { ]), ]), h('div.add-token__buttons', [ - h('button.btn-secondary', { - onClick: this.onNext, - }, 'Next'), - h('button.btn-tertiary', { + h('button.btn-cancel.add-token__button', { onClick: goHome, }, 'Cancel'), + h('button.btn-clear.add-token__button', { + onClick: this.onNext, + }, 'Next'), ]), ]) ) diff --git a/ui/app/app.js b/ui/app/app.js index c6fce0e47..866801dd5 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -3,6 +3,8 @@ const Component = require('react').Component const connect = require('react-redux').connect const h = require('react-hyperscript') const actions = require('./actions') +const classnames = require('classnames') + // mascara const MascaraFirstTime = require('../../mascara/src/app/first-time').default const MascaraBuyEtherScreen = require('../../mascara/src/app/first-time/buy-ether-screen').default @@ -24,6 +26,7 @@ const WalletView = require('./components/wallet-view') const Settings = require('./settings') const AddTokenScreen = require('./add-token') const Import = require('./accounts/import') +const NewAccount = require('./accounts/new-account') const Loading = require('./components/loading') const NetworkIndicator = require('./components/network') const Identicon = require('./components/identicon') @@ -243,7 +246,9 @@ App.prototype.renderAppBar = function () { }, [ h('.app-header.flex-row.flex-space-between', { - style: {}, + className: classnames({ + 'app-header--initialized': !isOnboarding, + }), }, [ h('div.app-header-contents', {}, [ h('div.left-menu-wrapper', { @@ -253,19 +258,13 @@ App.prototype.renderAppBar = function () { }, [ // mini logo h('img.metafox-icon', { - height: 29, - width: 29, - src: '/images/icon-128.png', + height: 42, + width: 42, + src: '/images/metamask-fox.svg', }), // metamask name - h('h1', { - style: { - position: 'relative', - paddingLeft: '9px', - color: '#5B5D67', - }, - }, 'MetaMask'), + h('h1', 'MetaMask'), ]), @@ -437,6 +436,10 @@ App.prototype.renderPrimary = function () { log.debug('rendering import screen') return h(Import, {key: 'import-menu'}) + case 'new-account-page': + log.debug('rendering new account screen') + return h(NewAccount, {key: 'new-account'}) + case 'reveal-seed-conf': log.debug('rendering reveal seed confirmation screen') return h(RevealSeedConfirmation, {key: 'reveal-seed-conf'}) diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js index 1b62b42fb..aeb8a0b38 100644 --- a/ui/app/components/account-menu/index.js +++ b/ui/app/components/account-menu/index.js @@ -42,13 +42,8 @@ function mapDispatchToProps (dispatch) { dispatch(actions.hideSidebar()) dispatch(actions.toggleAccountMenu()) }, - showNewAccountModal: () => { - dispatch(actions.showModal({ name: 'NEW_ACCOUNT' })) - dispatch(actions.hideSidebar()) - dispatch(actions.toggleAccountMenu()) - }, - showImportPage: () => { - dispatch(actions.showImportPage()) + showNewAccountPage: (formToSelect) => { + dispatch(actions.showNewAccountPage(formToSelect)) dispatch(actions.hideSidebar()) dispatch(actions.toggleAccountMenu()) }, @@ -64,8 +59,7 @@ AccountMenu.prototype.render = function () { const { isAccountMenuOpen, toggleAccountMenu, - showNewAccountModal, - showImportPage, + showNewAccountPage, lockMetamask, showConfigPage, showInfoPage, @@ -85,12 +79,12 @@ AccountMenu.prototype.render = function () { h('div.account-menu__accounts', this.renderAccounts()), h(Divider), h(Item, { - onClick: showNewAccountModal, + onClick: () => showNewAccountPage('CREATE'), icon: h('img', { src: 'images/plus-btn-white.svg' }), text: 'Create Account', }), h(Item, { - onClick: showImportPage, + onClick: () => showNewAccountPage('IMPORT'), icon: h('img', { src: 'images/import-account.svg' }), text: 'Import Account', }), diff --git a/ui/app/components/balance-component.js b/ui/app/components/balance-component.js index 50007ce14..d591ab455 100644 --- a/ui/app/components/balance-component.js +++ b/ui/app/components/balance-component.js @@ -40,7 +40,7 @@ BalanceComponent.prototype.render = function () { // style: {}, // }), h(Identicon, { - diameter: 45, + diameter: 50, address: token && token.address, network, }), diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index 58326b13c..f97ac0691 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -199,7 +199,7 @@ class AccountDropdowns extends Component { {}, menuItemStyles, ), - onClick: () => actions.showNewAccountModal(), + onClick: () => actions.showNewAccountPageCreateForm(), }, [ h( @@ -228,7 +228,7 @@ class AccountDropdowns extends Component { actions.hideSidebar() } }, - onClick: () => actions.showImportPage(), + onClick: () => actions.showNewAccountPageImportForm(), style: Object.assign( {}, menuItemStyles, @@ -457,9 +457,7 @@ const mapDispatchToProps = (dispatch) => { identity, })) }, - showNewAccountModal: () => { - dispatch(actions.showModal({ name: 'NEW_ACCOUNT' })) - }, + showNewAccountPageCreateForm: () => dispatch(actions.showNewAccountPage({ form: 'CREATE' })), showExportPrivateKeyModal: () => { dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' })) }, @@ -467,7 +465,7 @@ const mapDispatchToProps = (dispatch) => { dispatch(actions.showAddTokenPage()) }, addNewAccount: () => dispatch(actions.addNewAccount()), - showImportPage: () => dispatch(actions.showImportPage()), + showNewAccountPageImportForm: () => dispatch(actions.showNewAccountPage({ form: 'IMPORT' })), showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)), }, } diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js index 4bf671834..c1f7a3236 100644 --- a/ui/app/components/modals/account-details-modal.js +++ b/ui/app/components/modals/account-details-modal.js @@ -62,12 +62,12 @@ AccountDetailsModal.prototype.render = function () { h('div.account-modal-divider'), - h('button.btn-clear', { + h('button.btn-clear.account-modal__button', { onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }), }, 'View account on Etherscan'), // Holding on redesign for Export Private Key functionality - h('button.btn-clear', { + h('button.btn-clear.account-modal__button', { onClick: () => showExportPrivateKeyModal(), }, 'Export private key'), diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js index 193755df5..422f23f44 100644 --- a/ui/app/components/modals/export-private-key-modal.js +++ b/ui/app/components/modals/export-private-key-modal.js @@ -79,11 +79,15 @@ ExportPrivateKeyModal.prototype.renderButton = function (className, onClick, lab ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address, hideModal) { return h('div.export-private-key-buttons', {}, [ - !privateKey && this.renderButton('btn-clear btn-cancel', () => hideModal(), 'Cancel'), + !privateKey && this.renderButton( + 'btn-cancel export-private-key__button export-private-key__button--cancel', + () => hideModal(), + 'Cancel' + ), (privateKey - ? this.renderButton('btn-clear', () => hideModal(), 'Done') - : this.renderButton('btn-clear', () => this.exportAccountAndGetPrivateKey(this.state.password, address), 'Show') + ? this.renderButton('btn-clear export-private-key__button', () => hideModal(), 'Done') + : this.renderButton('btn-clear export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), 'Confirm') ), ]) diff --git a/ui/app/components/network.js b/ui/app/components/network.js index 5a8d0763d..3f147159b 100644 --- a/ui/app/components/network.js +++ b/ui/app/components/network.js @@ -39,7 +39,6 @@ Network.prototype.render = function () { }, src: 'images/loading.svg', }), - h('i.fa.fa-caret-down.network-caret'), ]) } else if (providerName === 'mainnet') { hoverText = 'Main Ethereum Network' @@ -85,12 +84,8 @@ Network.prototype.render = function () { backgroundColor: '#038789', // $blue-lagoon nonSelectBackgroundColor: '#15afb2', }), - h('.network-name', { - style: { - color: '#039396', - }}, - 'Main Network'), - h('i.fa.fa-caret-down.fa-lg.network-caret'), + h('.network-name', 'Main Network'), + h('i.fa.fa-chevron-down.fa-lg.network-caret'), ]) case 'ropsten-test-network': return h('.network-indicator', [ @@ -98,12 +93,8 @@ Network.prototype.render = function () { backgroundColor: '#e91550', // $crimson nonSelectBackgroundColor: '#ec2c50', }), - h('.network-name', { - style: { - color: '#ff6666', - }}, - 'Ropsten Test Net'), - h('i.fa.fa-caret-down.fa-lg.network-caret'), + h('.network-name', 'Ropsten Test Net'), + h('i.fa.fa-chevron-down.fa-lg.network-caret'), ]) case 'kovan-test-network': return h('.network-indicator', [ @@ -111,12 +102,8 @@ Network.prototype.render = function () { backgroundColor: '#690496', // $purple nonSelectBackgroundColor: '#b039f3', }), - h('.network-name', { - style: { - color: '#690496', - }}, - 'Kovan Test Net'), - h('i.fa.fa-caret-down.fa-lg.network-caret'), + h('.network-name', 'Kovan Test Net'), + h('i.fa.fa-chevron-down.fa-lg.network-caret'), ]) case 'rinkeby-test-network': return h('.network-indicator', [ @@ -124,12 +111,8 @@ Network.prototype.render = function () { backgroundColor: '#ebb33f', // $tulip-tree nonSelectBackgroundColor: '#ecb23e', }), - h('.network-name', { - style: { - color: '#e7a218', - }}, - 'Rinkeby Test Net'), - h('i.fa.fa-caret-down.fa-lg.network-caret'), + h('.network-name', 'Rinkeby Test Net'), + h('i.fa.fa-chevron-down.fa-lg.network-caret'), ]) default: return h('.network-indicator', [ @@ -140,12 +123,8 @@ Network.prototype.render = function () { }, }), - h('.network-name', { - style: { - color: '#AEAEAE', - }}, - 'Private Network'), - h('i.fa.fa-caret-down.fa-lg.network-caret'), + h('.network-name', 'Private Network'), + h('i.fa.fa-chevron-down.fa-lg.network-caret'), ]) } })(), diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 566224864..652300c94 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -219,7 +219,7 @@ ConfirmSendEther.prototype.render = function () { // Main Send token Card h('div.confirm-screen-wrapper.flex-column.flex-grow', [ h('h3.flex-center.confirm-screen-header', [ - h('button.confirm-screen-back-button', { + h('button.btn-clear.confirm-screen-back-button', { onClick: () => editTransaction(txMeta), }, 'EDIT'), h('div.confirm-screen-title', 'Confirm Transaction'), @@ -422,7 +422,7 @@ ConfirmSendEther.prototype.onSubmit = function (event) { ConfirmSendEther.prototype.cancel = function (event, txMeta) { event.preventDefault() const { cancelTransaction } = this.props - + cancelTransaction(txMeta) } diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index aa4f29fb0..ad489c3e9 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -314,7 +314,7 @@ ConfirmSendToken.prototype.render = function () { // Main Send token Card h('div.confirm-screen-wrapper.flex-column.flex-grow', [ h('h3.flex-center.confirm-screen-header', [ - h('button.confirm-screen-back-button', { + h('button.btn-clear.confirm-screen-back-button', { onClick: () => editTransaction(txMeta), }, 'EDIT'), h('div.confirm-screen-title', 'Confirm Transaction'), @@ -415,7 +415,7 @@ ConfirmSendToken.prototype.onSubmit = function (event) { ConfirmSendToken.prototype.cancel = function (event, txMeta) { event.preventDefault() const { cancelTransaction } = this.props - + cancelTransaction(txMeta) } diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js index 677b66830..59552f4a0 100644 --- a/ui/app/components/token-cell.js +++ b/ui/app/components/token-cell.js @@ -106,7 +106,7 @@ TokenCell.prototype.render = function () { h(Identicon, { className: 'token-list-item__identicon', - diameter: 45, + diameter: 50, address, network, }), diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 949d91f6f..0148b32a5 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -68,18 +68,14 @@ TxView.prototype.renderButtons = function () { return !selectedToken ? ( h('div.flex-row.flex-center.hero-balance-buttons', [ - h('button.btn-clear', { - style: { - textAlign: 'center', - }, + h('button.btn-clear.hero-balance-button', { onClick: () => showModal({ name: 'DEPOSIT_ETHER', }), }, 'DEPOSIT'), - h('button.btn-clear', { + h('button.btn-clear.hero-balance-button', { style: { - textAlign: 'center', marginLeft: '0.8em', }, onClick: showSendPage, @@ -88,11 +84,7 @@ TxView.prototype.renderButtons = function () { ) : ( h('div.flex-row.flex-center.hero-balance-buttons', [ - h('button.btn-clear', { - style: { - textAlign: 'center', - marginLeft: '0.8em', - }, + h('button.btn-clear.hero-balance-button', { onClick: showSendTokenPage, }, 'SEND'), ]) diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 3cb7a8b76..b1ef83cee 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -130,7 +130,7 @@ WalletView.prototype.render = function () { selectedIdentity.name, ]), - h('button.wallet-view__details-button', 'DETAILS'), + h('button.btn-clear.wallet-view__details-button', 'DETAILS'), ]), ]), @@ -151,7 +151,7 @@ WalletView.prototype.render = function () { h(TokenList), - h('button.wallet-view__add-token-button', { + h('button.btn-clear.wallet-view__add-token-button', { onClick: () => { showAddTokenPage() hideSidebar() diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss index 5f6d0fcff..13020f62f 100644 --- a/ui/app/css/itcss/components/add-token.scss +++ b/ui/app/css/itcss/components/add-token.scss @@ -94,6 +94,7 @@ padding: 12px 0; font-weight: 600; cursor: pointer; + position: relative; &:hover { background-color: rgba(0, 0, 0, .05); @@ -164,9 +165,18 @@ &__buttons { display: flex; - flex-flow: column nowrap; + flex-flow: row nowrap; margin: 30px 0 51px; flex: 0 0 auto; + align-items: center; + justify-content: center; + } + + &__button { + flex: 1 0 141px; + margin: 0 12px; + padding: 10px 22px; + height: 54px; } &__token-icons-container { @@ -324,18 +334,10 @@ } &__buttons { - flex-flow: row nowrap; - width: 100%; - align-items: center; - justify-content: center; padding: 12px 0; margin: 0; border-top: 1px solid $gallery; - - button { - flex: 1 0 auto; - margin: 0 12px; - } + width: 100%; } } } diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss index 8ba084b4a..1450b71cc 100644 --- a/ui/app/css/itcss/components/buttons.scss +++ b/ui/app/css/itcss/components/buttons.scss @@ -6,9 +6,43 @@ background-color: #02c9b1; // TODO: reusable color in colors.css } -button.btn-clear { +.btn-clear { background: $white; - border: 1px solid; + text-align: center; + padding: .8rem 1rem; + color: $curious-blue; + border: 2px solid $spindle; + border-radius: 4px; + font-size: .85rem; + font-weight: 400; + transition: border-color .3s ease; + + &:hover { + border-color: $curious-blue; + } + + &--disabled, + &[disabled] { + cursor: auto; + opacity: .5; + pointer-events: none; + } +} + +.btn-cancel { + background: $white; + text-align: center; + padding: .9rem 1rem; + color: $scorpion; + border: 2px solid $dusty-gray; + border-radius: 4px; + font-size: .85rem; + font-weight: 400; + transition: border-color .3s ease; + + &:hover { + border-color: $scorpion; + } } // No longer used in flat design, remove when modal buttons done diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index 4a8232e39..e75a827f9 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -102,15 +102,10 @@ .confirm-screen-back-button { background: transparent; - border: 1px solid $curious-blue; left: 24px; position: absolute; - text-align: center; - color: $curious-blue; - padding: 6px 13px 7px 12px; - border-radius: 2px; - height: 30px; - width: 54px; + padding: 6px 12px; + font-size: .7rem; @media screen and (max-width: $break-small) { margin-right: 12px; diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss index a6332f819..ac2cecf7e 100644 --- a/ui/app/css/itcss/components/header.scss +++ b/ui/app/css/itcss/components/header.scss @@ -17,7 +17,16 @@ @media screen and (min-width: 576px) { height: 75px; justify-content: center; + } + + .metafox-icon { + cursor: pointer; + } +} + +.app-header--initialized { + @media screen and (min-width: 576px) { &::after { content: ''; position: absolute; @@ -27,10 +36,6 @@ bottom: -32px; } } - - .metafox-icon { - cursor: pointer; - } } .app-header-contents { @@ -53,7 +58,7 @@ } @media screen and (min-width: 1281px) { - width: 65vw; + width: 62vw; } } @@ -61,8 +66,10 @@ font-family: Roboto; text-transform: uppercase; font-weight: 400; - color: #22232c; // $shark - line-height: 29px; + font-size: 1.1rem; + position: relative; + padding-left: 15px; + color: #5b5d67; @media screen and (max-width: 575px) { display: none; diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index bdbdd2645..99fd2a96d 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -16,7 +16,7 @@ flex-direction: row; justify-content: flex-start; align-items: center; - margin: 2.8em 2.37em .8em; + margin: 2.3em 2.37em .8em; } .balance-container { @@ -37,13 +37,16 @@ } .balance-display { + .token-amount { + color: $black; + } @media screen and (max-width: $break-small) { text-align: center; .token-amount { - font-size: 175%; - margin-top: 12.5%; + font-size: 1.75rem; + margin-top: 1rem; } .fiat-amount { @@ -54,12 +57,12 @@ } @media screen and (min-width: $break-large) { - margin-left: 3%; + margin-left: .8em; justify-content: flex-start; align-items: flex-start; .token-amount { - font-size: 135%; + font-size: 1.5rem; } .fiat-amount { @@ -69,13 +72,6 @@ } } - .balance-icon { - border-radius: 25px; - width: 45px; - height: 45px; - border: 1px solid $alto; - } - .hero-balance-buttons { @media screen and (max-width: $break-small) { @@ -89,26 +85,9 @@ flex-grow: 2; justify-content: flex-end; } - - button.btn-clear { - background: $white; - border: 1px solid; - border-radius: 2px; - font-size: 12px; - - @media screen and (max-width: $break-small) { - border-color: $curious-blue; - color: $curious-blue; - height: 36px; - } - - @media screen and (min-width: $break-large) { - border-color: $curious-blue; - color: $curious-blue; - padding: 0; - width: 85px; - height: 34px; - } - } } } + +.hero-balance-button { + width: 6rem; +} diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index dfb4f23f0..d1b9b6277 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -51,3 +51,5 @@ @import './account-dropdown-mini.scss'; @import './editable-label.scss'; + +@import './new-account.scss'; diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 2431e2f63..7a2ec35a4 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -258,19 +258,10 @@ width: 286px; } - .btn-clear { - min-height: 28px; - font-size: 14px; - border-color: $curious-blue; - color: $curious-blue; - border-radius: 2px; - flex-basis: 100%; - width: 75%; + .account-modal__button { margin-top: 17px; padding: 10px 22px; - height: 44px; width: 235px; - font-family: Roboto; } } @@ -346,17 +337,17 @@ display: flex; flex-direction: row; justify-content: center; +} - .btn-clear { - width: 141px; - height: 54px; - } +.export-private-key__button { + margin-top: 17px; + padding: 10px 22px; + width: 141px; + height: 54px; +} - .btn-cancel { - margin-right: 15px; - border-color: $dusty-gray; - color: $scorpion; - } +.export-private-key__button--cancel { + margin-right: 15px; } .private-key-password-display-wrapper { diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index 98dbdffb2..d9a39b8d5 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -8,41 +8,25 @@ } .network-component.pointer { - border: 1px solid $shark; + border: 2px solid $silver; border-radius: 82px; - padding: 6px; + padding: 3px; flex: 0 0 auto; - &.ethereum-network { - border-color: rgb(3, 135, 137); - - .menu-icon-circle div { - background-color: rgba(3, 135, 137, .7) !important; - } + &.ethereum-network .menu-icon-circle div { + background-color: rgba(3, 135, 137, .7) !important; } - &.ropsten-test-network { - border-color: rgb(233, 21, 80); - - .menu-icon-circle div { - background-color: rgba(233, 21, 80, .7) !important; - } + &.ropsten-test-network .menu-icon-circle div { + background-color: rgba(233, 21, 80, .7) !important; } - &.kovan-test-network { - border-color: rgb(105, 4, 150); - - .menu-icon-circle div { - background-color: rgba(105, 4, 150, .7) !important; - } + &.kovan-test-network .menu-icon-circle div { + background-color: rgba(105, 4, 150, .7) !important; } - &.rinkeby-test-network { - border-color: rgb(235, 179, 63); - - .menu-icon-circle div { - background-color: rgba(235, 179, 63, .7) !important; - } + &.rinkeby-test-network .menu-icon-circle div { + background-color: rgba(235, 179, 63, .7) !important; } } @@ -66,11 +50,12 @@ } .network-name { - line-height: 15px; padding: 0 4px; font-family: Roboto; font-size: 12px; flex: 1 0 auto; + color: $tundora; + font-weight: 500; } .network-droppo { @@ -167,3 +152,6 @@ line-height: 18px; } +.network-caret { + margin: 0 8px 2px; +} diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss new file mode 100644 index 000000000..c5e4ea761 --- /dev/null +++ b/ui/app/css/itcss/components/new-account.scss @@ -0,0 +1,192 @@ +.new-account { + width: 376px; + background-color: #FFFFFF; + box-shadow: 0 0 7px 0 rgba(0,0,0,0.08); + z-index: 25; + padding-bottom: 31px; + + &__header { + display: flex; + flex-flow: column; + border-bottom: 1px solid $geyser; + } + + &__title { + color: $tundora; + font-family: Roboto; + font-size: 32px; + font-weight: 500; + line-height: 43px; + margin-top: 22px; + margin-left: 29px; + } + + &__tabs { + margin-left: 22px; + display: flex; + margin-top: 10px; + + &__tab { + height: 54px; + width: 75px; + padding: 15px 10px; + color: $dusty-gray; + font-family: Roboto; + font-size: 18px; + line-height: 24px; + text-align: center; + } + + &__tab:first-of-type { + margin-right: 20px; + } + + &__unselected:hover { + color: $black; + border-bottom: none; + } + + &__selected { + color: $curious-blue; + border-bottom: 3px solid $curious-blue; + } + } + +} + +.new-account-import-form { + &__select-section { + display: flex; + justify-content: space-evenly; + align-items: center; + margin-top: 29px; + } + + &__select-label { + color: $scorpion; + font-family: Roboto; + font-size: 16px; + line-height: 21px; + } + + &__select { + height: 54px; + width: 210px; + border: 1px solid #D2D8DD; + border-radius: 4px; + background-color: #FFFFFF; + display: flex; + align-items: center; + + .Select-control, + .Select-control:hover { + height: 100%; + border: none; + box-shadow: none; + + .Select-value { + display: flex; + align-items: center; + } + } + } + + &__instruction { + color: $scorpion; + font-family: Roboto; + font-size: 16px; + line-height: 21px; + align-self: flex-start; + margin-left: 30px; + } + + &__private-key { + display: flex; + flex-flow: column; + align-items: center; + margin-top: 34px; + } + + &__input-password { + height: 54px; + width: 315px; + border: 1px solid $geyser; + border-radius: 4px; + background-color: $white; + margin-top: 16px; + color: $scorpion; + font-family: Roboto; + font-size: 16px; + padding: 0px 20px; + } + + &__json { + display: flex; + flex-flow: column; + align-items: center; + margin-top: 29px; + } +} + +.new-account-create-form { + display: flex; + flex-flow: column; + align-items: center; + + &__input-label { + color: $scorpion; + font-family: Roboto; + font-size: 16px; + line-height: 21px; + margin-top: 29px; + align-self: flex-start; + margin-left: 30px; + } + + &__input { + height: 54px; + width: 315.84px; + border: 1px solid $geyser; + border-radius: 4px; + background-color: $white; + color: $scorpion; + font-family: Roboto; + font-size: 16px; + line-height: 21px; + margin-top: 15px; + padding: 0px 20px; + } + + &__buttons { + margin-top: 39px; + display: flex; + width: 100%; + justify-content: space-evenly; + } + + &__button-cancel, + &__button-create { + height: 55px; + width: 150px; + border-radius: 2px; + background-color: #FFFFFF; + } + + &__button-cancel { + border: 1px solid $dusty-gray; + color: $dusty-gray; + font-family: Roboto; + font-size: 16px; + line-height: 21px; + text-align: center; + } + + &__button-create { + border: 1px solid $curious-blue; + color: $curious-blue; + font-family: Roboto; + font-size: 16px; + line-height: 21px; + text-align: center; + } +}
\ No newline at end of file diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 61dfbd176..af1a6974c 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -4,7 +4,7 @@ // Component Colors $tx-view-bg: $white; -$wallet-view-bg: $wild-sand; +$wallet-view-bg: $alabaster; // Main container .main-container { @@ -47,7 +47,7 @@ $wallet-view-bg: $wild-sand; .wallet-view { display: flex; flex-direction: column; - flex: 33.5 1 33.5%; + flex: 32 1 32%; width: 0; background: $wallet-view-bg; z-index: 200; @@ -69,22 +69,18 @@ $wallet-view-bg: $wild-sand; } &__keyring-label { - height: 40px; + height: 50px; color: $dusty-gray; font-family: Roboto; font-size: 10px; - line-height: 40px; text-align: right; - padding: 0 20px; + padding: 17px 20px 0; + box-sizing: border-box; } &__details-button { - color: $curious-blue; font-size: 10px; - line-height: 13px; - text-align: center; - border: 1px solid $curious-blue; - border-radius: 10.5px; + border-radius: 17px; background-color: transparent; margin: 0 auto; padding: 4px 12px; @@ -121,16 +117,14 @@ $wallet-view-bg: $wild-sand; &__add-token-button { flex: 0 0 auto; - color: $dusty-gray; - font-size: 14px; - line-height: 19px; - text-align: center; margin: 36px auto; - border: 1px solid $dusty-gray; - border-radius: 2px; - font-weight: 300; background: none; - padding: 9px 30px; + padding: .7rem 2rem; + transition: border-color .3s ease; + + &:hover { + border-color: $curious-blue; + } } } @@ -199,7 +193,7 @@ $wallet-view-bg: $wild-sand; .main-container { // margin-top: 6.9vh; - width: 85%; + width: 85vw; height: 90vh; box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); } @@ -208,7 +202,7 @@ $wallet-view-bg: $wild-sand; @media screen and (min-width: 769px) { .main-container { // margin-top: 6.9vh; - width: 80%; + width: 80vw; height: 82vh; box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); } @@ -217,7 +211,7 @@ $wallet-view-bg: $wild-sand; @media screen and (min-width: 1281px) { .main-container { // margin-top: 6.9vh; - width: 65%; + width: 62vw; height: 82vh; box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); } @@ -239,14 +233,6 @@ $wallet-view-bg: $wild-sand; overflow-y: auto; background-color: $white; } - - button.btn-clear { - width: 93px; - height: 50px; - font-size: .7em; - background: $white; - border: 1px solid; - } } // wallet view @@ -254,9 +240,9 @@ $wallet-view-bg: $wild-sand; font-size: 24px; font-weight: 300; line-height: 20px; - color: $scorpion; + color: $black; margin-top: 8px; - margin-bottom: 24px; + margin-bottom: .9rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 2bd192788..beb3e519c 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -526,8 +526,9 @@ } &__form { - margin: 13px 0; + padding: 13px 0; width: 100%; + overflow-y: auto; @media screen and (max-width: $break-small) { padding: 13px 0; @@ -587,7 +588,7 @@ width: 100%; height: 100%; } - + &__list { z-index: 1050; position: absolute; @@ -677,40 +678,15 @@ border-top: 1px solid $alto; background: $white; padding: 0 12px; + flex-shrink: 0; } &__next-btn, - &__cancel-btn, - &__next-btn__disabled { + &__cancel-btn { width: 163px; - text-align: center; - height: 55px; - border-radius: 2px; - background-color: $white; - font-family: Roboto; - font-size: 16px; - font-weight: 300; - line-height: 21px; - border: 1px solid; margin: 0 4px; } - &__next-btn, - &__next-btn__disabled { - color: $curious-blue; - border-color: $curious-blue; - } - - &__next-btn__disabled { - opacity: .5; - cursor: auto; - } - - &__cancel-btn { - color: $dusty-gray; - border-color: $dusty-gray; - } - &__customize-gas { border: 1px solid #D8D8D8; border-radius: 4px; diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss index d4add71b1..bdd26099a 100644 --- a/ui/app/css/itcss/components/token-list.scss +++ b/ui/app/css/itcss/components/token-list.scss @@ -12,7 +12,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( position: relative; &__token-balance { - font-size: 130%; + font-size: 1.5rem; @media #{$wallet-balance-breakpoint-range} { font-size: 105%; @@ -34,7 +34,8 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( } &--active { - background-color: rgba($wallet-balance-bg, 1); + background-color: $manatee; + color: $white; } &__identicon { diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index fb09fd800..19dadc69a 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -32,13 +32,9 @@ } @media screen and (min-width: $break-large) { - .tx-list-header-wrapper { - flex: 0 0 55px; - } - .tx-list-header { font-size: 16px; - margin: 1.5em 2.37em; + margin: 1.1em 2.37em .8em; } .tx-list-container::-webkit-scrollbar { diff --git a/ui/app/css/itcss/components/wallet-balance.scss b/ui/app/css/itcss/components/wallet-balance.scss index 64b291b89..293771550 100644 --- a/ui/app/css/itcss/components/wallet-balance.scss +++ b/ui/app/css/itcss/components/wallet-balance.scss @@ -8,7 +8,8 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( background: rgba($wallet-balance-bg, 0); &--active { - background: rgba($wallet-balance-bg, 1); + background: $manatee; + color: $white; } } @@ -41,7 +42,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( align-items: flex-start; .token-amount { - font-size: 135%; + font-size: 1.5rem; } .fiat-amount { @@ -61,11 +62,13 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( } } } +} - .balance-icon { - border-radius: 25px; - width: 45px; - height: 45px; - border: 1px solid $alto; - } +.balance-icon { + border-radius: 25px; + width: 50px; + height: 50px; + border: 1px solid $alto; + padding: 5px; + background: $white; } diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index edc376c17..4c0972527 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -42,6 +42,8 @@ $malibu-blue: #7ac9fd; $athens-grey: #e9edf0; $jaffa: #f28930; $geyser: #d2d8dd; +$manatee: #93949d; +$spindle: #c7ddec; $mid-gray: #5b5d67; $cape-cod: #38393a; diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js index e96dea0be..b4950e9d9 100644 --- a/ui/app/reducers/app.js +++ b/ui/app/reducers/app.js @@ -170,7 +170,6 @@ function reduceApp (state, action) { }) case actions.SHOW_IMPORT_PAGE: - return extend(appState, { currentView: { name: 'import-menu', @@ -179,6 +178,24 @@ function reduceApp (state, action) { warning: null, }) + case actions.SHOW_NEW_ACCOUNT_PAGE: + return extend(appState, { + currentView: { + name: 'new-account-page', + context: action.formToSelect, + }, + transForward: true, + warning: null, + }) + + case actions.SET_NEW_ACCOUNT_FORM: + return extend(appState, { + currentView: { + name: appState.currentView.name, + context: action.formToSelect, + }, + }) + case actions.SHOW_INFO_PAGE: return extend(appState, { currentView: { diff --git a/ui/app/select-app.js b/ui/app/select-app.js index ac6867aeb..193c98353 100644 --- a/ui/app/select-app.js +++ b/ui/app/select-app.js @@ -9,13 +9,13 @@ const { setFeatureFlag, setNetworkEndpoints } = require('./actions') const { BETA_UI_NETWORK_TYPE } = require('../../app/scripts/config').enums function mapStateToProps (state) { - return { - betaUI: state.metamask.featureFlags.betaUI, - autoAdd: autoAddToBetaUI(state), - isUnlocked: state.metamask.isUnlocked, - isMascara: state.metamask.isMascara, - firstTime: Object.keys(state.metamask.identities).length === 0, - } + return { + betaUI: state.metamask.featureFlags.betaUI, + autoAdd: autoAddToBetaUI(state), + isUnlocked: state.metamask.isUnlocked, + isMascara: state.metamask.isMascara, + firstTime: Object.keys(state.metamask.identities).length === 0, + } } function mapDispatchToProps (dispatch) { @@ -34,28 +34,35 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(SelectedApp) inherits(SelectedApp, Component) function SelectedApp () { - Component.call(this) + Component.call(this) } SelectedApp.prototype.componentWillReceiveProps = function (nextProps) { - const { - isUnlocked, - setFeatureFlagWithModal, - setFeatureFlagWithoutModal, - isMascara, - firstTime, - } = this.props - - if (isMascara || firstTime) { - setFeatureFlagWithoutModal() - } else if (!isUnlocked && nextProps.isUnlocked && (nextProps.autoAdd)) { - setFeatureFlagWithModal() - } + // Code commented out until we begin auto adding users to NewUI + const { + // isUnlocked, + // setFeatureFlagWithModal, + setFeatureFlagWithoutModal, + isMascara, + // firstTime, + } = this.props + + // if (isMascara || firstTime) { + if (isMascara) { + setFeatureFlagWithoutModal() + } + // } else if (!isUnlocked && nextProps.isUnlocked && (nextProps.autoAdd)) { + // setFeatureFlagWithModal() + // } } SelectedApp.prototype.render = function () { - const { betaUI, isMascara, firstTime } = this.props + // Code commented out until we begin auto adding users to NewUI + // const { betaUI, isMascara, firstTime } = this.props + // const Selected = betaUI || isMascara || firstTime ? App : OldApp + + const { betaUI, isMascara } = this.props + const Selected = betaUI || isMascara ? App : OldApp - const Selected = betaUI || isMascara || firstTime ? App : OldApp return h(Selected) } diff --git a/ui/app/selectors.js b/ui/app/selectors.js index 22ef439c4..38a96c48b 100644 --- a/ui/app/selectors.js +++ b/ui/app/selectors.js @@ -26,6 +26,7 @@ const selectors = { getSelectedTokenContract, autoAddToBetaUI, getSendMaxModeState, + getCurrentViewContext, } module.exports = selectors @@ -180,4 +181,9 @@ function autoAddToBetaUI (state) { const userIsNotInBeta = !state.metamask.featureFlags.betaUI return userIsNotInBeta && userPassesThreshold +} + +function getCurrentViewContext (state) { + const { currentView = {} } = state.appState + return currentView.context }
\ No newline at end of file diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index 7c9b6dbc6..ca73fa5ea 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -516,16 +516,16 @@ SendTransactionScreen.prototype.renderFooter = function () { } = this.props const noErrors = !amountError && toError === null - const errorClass = noErrors ? '' : '__disabled' return h('div.send-v2__footer', [ - h('button.send-v2__cancel-btn', { + h('button.btn-cancel.send-v2__cancel-btn', { onClick: () => { clearSend() goHome() }, }, 'Cancel'), - h(`button.send-v2__next-btn${errorClass}`, { + h('button.btn-clear.send-v2__next-btn', { + disabled: !noErrors, onClick: event => this.onSubmit(event), }, 'Next'), ]) @@ -2363,6 +2363,10 @@ commander@^2.5.0, commander@^2.6.0, commander@^2.9.0, commander@~2.12.1: version "2.12.2" resolved "https://registry.yarnpkg.com/commander/-/commander-2.12.2.tgz#0f5946c427ed9ec0d91a46bb9def53e54650e555" +commander@~2.13.0: + version "2.13.0" + resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c" + commondir@0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/commondir/-/commondir-0.0.1.tgz#89f00fdcd51b519c578733fec563e6a6da7f5be2" @@ -5006,6 +5010,15 @@ gulp-autoprefixer@^4.0.0: through2 "^2.0.0" vinyl-sourcemaps-apply "^0.2.0" +gulp-babel@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/gulp-babel/-/gulp-babel-7.0.0.tgz#7b93c975159f7a0553e4263b4a55100ccc239b28" + dependencies: + gulp-util "^3.0.0" + replace-ext "0.0.1" + through2 "^2.0.0" + vinyl-sourcemaps-apply "^0.2.0" + gulp-cli@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/gulp-cli/-/gulp-cli-2.0.0.tgz#7f049ad298ed388cda9bd813b5d7062407d62cad" @@ -5128,6 +5141,18 @@ gulp-stylelint@^4.0.0: stylelint "^8.0.0" through2 "^2.0.3" +gulp-uglify@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/gulp-uglify/-/gulp-uglify-3.0.0.tgz#0df0331d72a0d302e3e37e109485dddf33c6d1ca" + dependencies: + gulplog "^1.0.0" + has-gulplog "^0.1.0" + lodash "^4.13.1" + make-error-cause "^1.1.1" + through2 "^2.0.0" + uglify-js "^3.0.5" + vinyl-sourcemaps-apply "^0.2.0" + gulp-util@^3.0, gulp-util@^3.0.0, gulp-util@^3.0.2, gulp-util@^3.0.7, gulp-util@^3.0.8, gulp-util@~3.0.0: version "3.0.8" resolved "https://registry.yarnpkg.com/gulp-util/-/gulp-util-3.0.8.tgz#0054e1e744502e27c04c187c3ecc505dd54bbb4f" @@ -6912,6 +6937,16 @@ ltgt@~2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/ltgt/-/ltgt-2.2.0.tgz#b65ba5fcb349a29924c8e333f7c6a5562f2e4842" +make-error-cause@^1.1.1: + version "1.2.2" + resolved "https://registry.yarnpkg.com/make-error-cause/-/make-error-cause-1.2.2.tgz#df0388fcd0b37816dff0a5fb8108939777dcbc9d" + dependencies: + make-error "^1.2.0" + +make-error@^1.2.0: + version "1.3.2" + resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.2.tgz#8762ffad2444dd8ff1f7c819629fa28e24fea1c4" + make-iterator@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/make-iterator/-/make-iterator-1.0.0.tgz#57bef5dc85d23923ba23767324d8e8f8f3d9694b" @@ -10836,6 +10871,13 @@ uglify-js@^2.6, uglify-js@^2.8.27: optionalDependencies: uglify-to-browserify "~1.0.0" +uglify-js@^3.0.5: + version "3.3.7" + resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.3.7.tgz#28463e7c7451f89061d2b235e30925bf5625e14d" + dependencies: + commander "~2.13.0" + source-map "~0.6.1" + uglify-to-browserify@~1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7" |
