connect screen ready

2 files changed, 124 insertions, 27 deletions

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 0a62f1c1e..ba78daed0 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
@@ -5,6 +5,52 @@ const h = require('react-hyperscript')
 class ConnectScreen extends Component {
     constructor (props, context) {
         super(props)
+        this.state = {
+          selectedDevice: null,
+        }
+    }
+
+    connect = () => {
+      if (this.state.selectedDevice) {
+        this.props.connectToHardwareWallet(this.state.selectedDevice)
+      }
+      return null
+    }
+
+    renderConnectToTrezorButton () {
+        return h(
+            `button.hw-connect__btn${this.state.selectedDevice === 'trezor' ? '.selected' : ''}`,
+            { onClick: _ => this.setState({selectedDevice: 'trezor'}) },
+            h('img.hw-connect__btn__img', {
+              src: 'images/trezor-logo.svg',
+            })
+        )
+    }
+
+    renderConnectToLedgerButton () {
+        return h(
+          `button.hw-connect__btn${this.state.selectedDevice === 'ledger' ? '.selected' : ''}`,
+          { onClick: _ => this.setState({selectedDevice: 'ledger'}) },
+            h('img.hw-connect__btn__img', {
+              src: 'images/ledger-logo.svg',
+            })
+        )
+    }
+
+    renderButtons () {
+      return (
+        h('div', {}, [
+          h('div.hw-connect__btn-wrapper', {}, [
+            this.renderConnectToLedgerButton(),
+            this.renderConnectToTrezorButton(),
+          ]),
+          h(
+            `button.hw-connect__connect-btn${!this.state.selectedDevice ? '.disabled' : ''}`,
+            { onClick: this.connect },
+            this.context.t('connect')
+          ),
+        ])
+      )
     }
 
     renderUnsupportedBrowser () {
@@ -36,32 +82,26 @@ class ConnectScreen extends Component {
         )
     }
 
-    renderTrezorAffiliateLink () {
-        return h('div.hw-connect__get-trezor', {}, [
-            h('p.hw-connect__get-trezor__msg', {}, this.context.t(`dontHaveATrezorWallet`)),
-            h('a.hw-connect__get-trezor__link', {
-              href: 'https://shop.trezor.io/?a=metamask',
-              target: '_blank',
-            }, this.context.t('orderOneHere')),
-          ])
-    }
+    getAffiliateLinks () {
+      const links = {
+        trezor: `<a class='hw-connect__get-hw__link' href='https://shop.trezor.io/?a=metamask' target='_blank'>Trezor</a>`,
+        ledger: `<a class='hw-connect__get-hw__link' href='https://shop.trezor.io/?a=metamask' target='_blank'>Ledger</a>`,
+      }
 
-    renderConnectToTrezorButton () {
-        return h(
-            'button.btn-primary.btn--large',
-            { onClick: this.props.connectToHardwareWallet.bind(this, 'trezor') },
-            this.context.t('connectToTrezor')
-        )
+      const text = this.context.t('orderOneHere')
+      const response = text.replace('Trezor', links.trezor).replace('Ledger', links.ledger)
+
+      return h('div.hw-connect__get-hw__msg', { dangerouslySetInnerHTML: {__html: response }})
     }
 
-    renderConnectToLedgerButton () {
-        return h(
-            'button.btn-primary.btn--large',
-            { onClick: this.props.connectToHardwareWallet.bind(this, 'ledger') },
-            this.context.t('connectToLedger')
-        )
+    renderTrezorAffiliateLink () {
+        return h('div.hw-connect__get-hw', {}, [
+            h('p.hw-connect__get-hw__msg', {}, this.context.t(`dontHaveAHardwareWallet`)),
+            this.getAffiliateLinks(),
+          ])
     }
 
+
     scrollToTutorial = (e) => {
       if (this.referenceNode) this.referenceNode.scrollIntoView({behavior: 'smooth'})
     }
@@ -110,8 +150,7 @@ class ConnectScreen extends Component {
         return (
             h('div.hw-connect__footer', {}, [
                 h('h3.hw-connect__footer__title', {}, this.context.t(`readyToConnect`)),
-                this.renderConnectToTrezorButton(),
-                this.renderConnectToLedgerButton(),
+                this.renderButtons(),
                 h('p.hw-connect__footer__msg', {}, [
                     this.context.t(`havingTroubleConnecting`),
                     h('a.hw-connect__footer__link', {
@@ -127,8 +166,7 @@ class ConnectScreen extends Component {
         return (
             h('div.new-account-connect-form', {}, [
                 this.renderHeader(),
-                this.renderConnectToLedgerButton(),
-                this.renderConnectToTrezorButton(),
+                this.renderButtons(),
                 this.renderTrezorAffiliateLink(),
                 this.renderLearnMore(),
                 this.renderTutorialSteps(),
diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss
index b9e6ac000..ded5d11b5 100644
--- a/ui/app/css/itcss/components/new-account.scss
+++ b/ui/app/css/itcss/components/new-account.scss
@@ -167,7 +167,6 @@
       margin-top: 5px;
       margin-bottom: 15px;
       font-size: 22px;
-      text-align: center;
     }
 
     &__msg {
@@ -178,6 +177,66 @@
     }
   }
 
+  &__btn-wrapper {
+    flex: 1;
+    flex-direction: row;
+    display: flex;
+  }
+
+  &__connect-btn {
+    background-color: #259De5;
+    color: #fff;
+    border: none;
+    width: 315px;
+    min-height: 54px;
+    font-weight: 300;
+    font-size: 14px;
+    margin-bottom: 20px;
+    margin-top: 20px;
+    border-radius: 5px;
+    display: flex;
+    flex: 1;
+    margin-left: 20px;
+    margin-right: 20px;
+    justify-content: center;
+    text-transform: uppercase;
+  }
+
+  &__connect-btn.disabled {
+    cursor: not-allowed;
+    opacity: .5;
+  }
+
+  &__btn {
+    background: #fbfbfb;
+    border: 1px solid #e5e5e5;
+    height: 100px;
+    width: 150px;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 5px;
+
+    &__img {
+      width: 95px;
+    }
+  }
+
+  &__btn.selected {
+    border: 2px solid #00a8ee;
+    width: 149px;
+  }
+
+  &__btn:first-child {
+    margin-right: 15px;
+    margin-left: 20px;
+  }
+
+  &__btn:last-child {
+    margin-right: 20px;
+  }
+
   &__hdPath {
     display: flex;
     flex-direction: row;
@@ -255,7 +314,7 @@
     }
   }
 
-  &__get-trezor {
+  &__get-hw {
     width: 100%;
     padding-bottom: 10px;
     padding-top: 10px;