diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 52d11ff1c..a25a2bd59 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -920,10 +920,13 @@ "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." + "message": "Select the account to view in MetaMask" + }, + "selectHdPath": { + "message": "Select HD Path" }, "selectPathHelp": { - "message": "If you don't see your existing Ledger address(es), please try selecting a different HD Path \"Legacy (MEW / MyCrypto)\"" + "message": "If you don't see your existing Ledger accounts below, try switching paths to \"Legacy (MEW / MyCrypto)\"" }, "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 0acaded6b..488a189ea 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 @@ -40,8 +40,9 @@ class AccountList extends Component { const options = this.getHdPaths() return h('div', [ + h('h3.hw-connect__hdPath__title', {}, this.context.t('selectHdPath')), + h('p.hw-connect__msg', {}, this.context.t('selectPathHelp')), h('div.hw-connect__hdPath', [ - h('h3.hw-connect__hdPath__title', {}, `HD Path`), h(Select, { className: 'hw-connect__hdPath__select', name: 'hd-path-select', @@ -53,18 +54,23 @@ class AccountList extends Component { }, }), ]), - h('p.hw-connect__msg', {}, this.context.t('selectPathHelp')), ]) } + + capitalizeDevice (device) { + return device.slice(0, 1).toUpperCase() + device.slice(1) + } + renderHeader () { const { device } = this.props return ( h('div.hw-connect', [ - h('h3.hw-connect__title', {}, `${device.toUpperCase()} - ${this.context.t('selectAnAccount')}`), + h('h3.hw-connect__unlock-title', {}, `${this.context.t('unlock')} ${this.capitalizeDevice(device)}`), device.toLowerCase() === 'ledger' ? this.renderHdPathSelector() : null, + h('h3.hw-connect__hdPath__title', {}, this.context.t('selectAnAccount')), h('p.hw-connect__msg', {}, this.context.t('selectAnAccountHelp')), ]) ) diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 20c2be0f1..8e092364c 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -118,8 +118,18 @@ WalletView.prototype.render = function () { return kr.accounts.includes(selectedAddress) }) - const type = keyring.type - const isLoose = type !== 'HD Key Tree' + let label = '' + let type + if (keyring) { + type = keyring.type + if (type !== 'HD Key Tree') { + if (type.toLowerCase().search('hardware') !== -1) { + label = this.context.t('hardware') + } else { + label = this.context.t('imported') + } + } + } return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), { style: {}, @@ -133,7 +143,7 @@ WalletView.prototype.render = function () { onClick: hideSidebar, }), - h('div.wallet-view__keyring-label.allcaps', isLoose ? this.context.t('imported') : ''), + h('div.wallet-view__keyring-label.allcaps', label), h('div.flex-column.flex-center.wallet-view__name-container', { style: { margin: '0 auto' }, diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index ded5d11b5..e4c7a4e0d 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -162,6 +162,8 @@ } .hw-connect { + width: 100%; + &__header { &__title { margin-top: 5px; @@ -241,7 +243,7 @@ display: flex; flex-direction: row; margin-top: 15px; - margin-bottom: 15px; + margin-bottom: 30px; font-size: 14px; &__title { @@ -279,6 +281,13 @@ font-size: 18px; } + &__unlock-title { + padding-top: 10px; + font-weight: 400; + font-size: 22px; + margin-bottom: 15px; + } + &__msg { font-size: 14px; color: #9b9b9b; @@ -291,8 +300,6 @@ } &__footer { - width: 100%; - &__title { padding-top: 15px; padding-bottom: 12px; @@ -306,6 +313,9 @@ color: #9b9b9b; margin-top: 12px; margin-bottom: 27px; + width: 100%; + display: block; + margin-left: 20px; } &__link { @@ -468,6 +478,8 @@ &.account-list { height: auto; + padding-left: 20px; + padding-right: 20px; } &__buttons {