diff options
5 files changed, 91 insertions, 25 deletions
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 564c12f86..f0927af9c 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -877,6 +877,12 @@ "selectAnAddress": { "message": "Select an Address" }, + "selectAnAccount": { + "message": "Select an Account" + }, + "selectAnAccountHelp": { + "message": "These are the accounts available in your hardware wallet. Select the one you’d like to use in MetaMask." + }, "sendTokensAnywhere": { "message": "Send Tokens to anyone with an Ethereum account" }, diff --git a/ui/app/components/pages/create-account/connect-hardware/account-list.js b/ui/app/components/pages/create-account/connect-hardware/account-list.js index 3bd6a00a7..06102e16f 100644 --- a/ui/app/components/pages/create-account/connect-hardware/account-list.js +++ b/ui/app/components/pages/create-account/connect-hardware/account-list.js @@ -8,16 +8,20 @@ class AccountList extends Component { super(props) } + renderHeader () { + return ( + h('div.hw-connect', [ + h('h3.hw-connect__title', {}, this.context.t('selectAnAccount')), + h('p.hw-connect__msg', {}, this.context.t('selectAnAccountHelp')), + ]) + ) + } + renderAccounts () { return h('div.hw-account-list', [ - h('div.hw-account-list__title_wrapper', [ - h('div.hw-account-list__title', {}, [this.context.t('selectAnAddress')]), - h('div.hw-account-list__device', {}, ['Trezor - ETH']), - ]), this.props.accounts.map((a, i) => { return h('div.hw-account-list__item', { key: a.address }, [ - h('span.hw-account-list__item__index', a.index + 1), h('div.hw-account-list__item__radio', [ h('input', { type: 'radio', @@ -32,10 +36,12 @@ class AccountList extends Component { { htmlFor: `address-${i}`, }, - `${a.address.slice(0, 4)}...${a.address.slice(-4)}` - ), + [ + h('span.hw-account-list__item__index', a.index + 1), + `${a.address.slice(0, 4)}...${a.address.slice(-4)}`, + h('span.hw-account-list__item__balance', `${a.balance}`), + ]), ]), - h('span.hw-account-list__item__balance', `${a.balance}`), h( 'a.hw-account-list__item__link', { @@ -71,9 +77,15 @@ class AccountList extends Component { } renderButtons () { - return h('div.new-account-create-form__buttons', {}, [ + const disabled = this.props.selectedAccount === null + const buttonProps = {} + if (disabled) { + buttonProps.disabled = true + } + + return h('div.new-account-connect-form__buttons', {}, [ h( - 'button.btn-default.btn--large.new-account-create-form__button', + 'button.btn-default.btn--large.new-account-connect-form__button', { onClick: this.props.onCancel.bind(this), }, @@ -81,9 +93,10 @@ class AccountList extends Component { ), h( - `button.btn-primary.btn--large.new-account-create-form__button ${this.props.selectedAccount === null ? '.btn-primary--disabled' : ''}`, + `button.btn-primary.btn--large.new-account-connect-form__button ${disabled ? '.btn-primary--disabled' : ''}`, { onClick: this.props.onUnlockAccount.bind(this), + ...buttonProps, }, [this.context.t('unlock')] ), @@ -99,7 +112,8 @@ class AccountList extends Component { } render () { - return h('div', {}, [ + return h('div.new-account-connect-form', {}, [ + this.renderHeader(), this.renderAccounts(), this.renderPagination(), this.renderButtons(), diff --git a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js index 8d9980b10..7fb36b511 100644 --- a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js +++ b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js @@ -29,7 +29,7 @@ class ConnectScreen extends Component { renderConnectScreen () { return ( - h('div', {}, [ + h('div.new-account-connect-form', {}, [ h('div.hw-connect', [ h('h3.hw-connect__title', {}, this.context.t('trezorHardwareWallet')), h('p.hw-connect__msg', {}, this.context.t('connectToTrezorHelp')), diff --git a/ui/app/components/pages/create-account/connect-hardware/index.js b/ui/app/components/pages/create-account/connect-hardware/index.js index dc9907f31..da42ddead 100644 --- a/ui/app/components/pages/create-account/connect-hardware/index.js +++ b/ui/app/components/pages/create-account/connect-hardware/index.js @@ -150,7 +150,7 @@ class ConnectHardwareForm extends Component { } render () { - return h('div.new-account-create-form', [ + return h('div', [ this.renderError(), this.renderContent(), ]) diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index a44fab3be..0eacf4615 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -157,13 +157,14 @@ &__title { padding-top: 10px; font-weight: 500; + font-size: 18px; } &__msg { font-size: 14px; color: #9b9b9b; - margin-top: 15px; - margin-bottom: 15px; + margin-top: 10px; + margin-bottom: 20px; } &__link { @@ -242,12 +243,16 @@ &__item__index { display: flex; - width: 28px; + width: 24px; } &__item__radio { display: flex; flex: 1; + + input { + margin-right: 9px; + } } &__item__label { @@ -264,6 +269,7 @@ &__item__link { display: flex; + margin-top: 3px; } &__item__link img { @@ -278,11 +284,55 @@ margin-top: 10px; &__button { - height: 25px; - flex: initial; - min-width: 90px; - font-size: 12px; + height: 19px; + display: flex; + width: 47px; + color: #33a4e7; + font-size: 14px; + line-height: 19px; + border: none; + min-width: 46px; + margin-right: 0px; + margin-left: 16px; + padding: 0px; + } +} + +.new-account-connect-form { + display: flex; + flex-flow: column; + align-items: center; + padding: 15px 30px 0; + + &__buttons { + margin-top: 39px; + display: flex; + width: 100%; + justify-content: space-between; + } + + &__button { + width: 150px; + min-width: initial; + } + + &__button.btn-primary { + background-color: #259DE5; + } + + &__button.btn-primary { + background-color: #259DE5; + color: #FFFFFF; } + + &__button.btn-primary--disabled { + cursor: not-allowed; + opacity: .5; + } + + + + } .hw-forget-device-container { @@ -337,8 +387,4 @@ width: 150px; min-width: initial; } - - &__button.btn-primary--disabled { - cursor: 'not-allowed'; - } } |