ui ready

4 files changed, 42 insertions, 11 deletions

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 {