update connect harwdware screen

3 files changed, 34 insertions, 9 deletions

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index e1f321c68..658a77e77 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -140,6 +140,12 @@
   "connectToTrezor": {
     "message": "Connect to Trezor"
   },
+  "connectToTrezorHelp": {
+    "message": "Metamask is able to access your TREZOR ethereum accounts. First make sure your device is connected and unlocked."
+  },
+  "connectToTrezorTrouble": {
+    "message": "If you are having trouble, make sure you are using the latest version of the TREZOR firmware."
+  },
   "continue": {
     "message": "Continue"
   },
@@ -944,6 +950,9 @@
   "transfers": {
     "message": "Transfers"
   },
+  "trezorHardwareWallet": {
+    "message": "TREZOR Hardware Wallet"
+  },
   "troubleTokenBalances": {
     "message": "We had trouble loading your token balances. You can view them ",
     "description": "Followed by a link (here) to view token balances"
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 ec6a11b40..cf6353bf8 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
@@ -10,9 +10,9 @@ class ConnectScreen extends Component {
     renderUnsupportedBrowser () {
         return (
             h('div', {}, [
-                h('div.hw-unsupported-browser', [
-                    h('h3.hw-unsupported-browser__title', {}, this.context.t('browserNotSupported')),
-                    h('p.hw-unsupported-browser__msg', {}, this.context.t('chromeRequiredForTrezor')),
+                h('div.hw-connect', [
+                    h('h3.hw-connect__title', {}, this.context.t('browserNotSupported')),
+                    h('p.hw-connect__msg', {}, this.context.t('chromeRequiredForTrezor')),
                 ]),
                 h(
                     'button.btn-primary.btn--large',
@@ -25,18 +25,30 @@ class ConnectScreen extends Component {
         )
     }
 
-    renderConnectButton () {
-        return h(
+    renderConnectScreen () {
+        return (
+            h('div', {}, [
+                h('div.hw-connect', [
+                    h('h3.hw-connect__title', {}, this.context.t('trezorHardwareWallet')),
+                    h('p.hw-connect__msg', {}, this.context.t('connectToTrezorHelp')),
+                    h('p.hw-connect__msg', {}, [
+                        this.context.t('connectToTrezorTrouble'),
+                        h('a.___info-link', { url: 'https://support.metamask.io/', target: '_blank'}, this.context.t('learnMore')),
+                    ]),
+                ]),
+                h(
                     'button.btn-primary.btn--large',
-                    { onClick: this.props.connectToTrezor.bind(this), style: { margin: 12 } },
+                    { onClick: this.props.connectToTrezor.bind(this) },
                     this.props.btnText
-                )
+                ),
+            ])
+        )
       }
 
     render () {
         const isChrome = window.navigator.userAgent.search('Chrome') !== -1
         if (isChrome) {
-            return this.renderConnectButton()
+            return this.renderConnectScreen()
         }
         return this.renderUnsupportedBrowser()
     }
diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss
index 551025df3..3d59081d8 100644
--- a/ui/app/css/itcss/components/new-account.scss
+++ b/ui/app/css/itcss/components/new-account.scss
@@ -153,7 +153,7 @@
   }
 }
 
-.hw-unsupported-browser {
+.hw-connect {
   &__title {
     padding-top: 10px;
   }
@@ -164,6 +164,10 @@
     margin-top: 15px;
     margin-bottom: 15px;
   }
+
+  &__info-link {
+    color: #2f9ae0;
+  }
 }
 
 .hw-account-list {