Fix button styling for Create Account Connect (#5787)

3 files changed, 13 insertions, 47 deletions

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 2767b2e1f..c63de234a 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
@@ -152,7 +152,7 @@ class AccountList extends Component {
       }, [this.context.t('cancel')]),
 
       h(Button, {
-        type: 'primary',
+        type: 'confirm',
         large: true,
         className: 'new-account-connect-form__button unlock',
         disabled,
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 d3abf3119..49a5610c1 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
@@ -45,11 +45,13 @@ class ConnectScreen extends Component {
             this.renderConnectToLedgerButton(),
             this.renderConnectToTrezorButton(),
           ]),
-          h(
-            `button.hw-connect__connect-btn${!this.state.selectedDevice ? '.disabled' : ''}`,
-            { onClick: this.connect },
-            this.context.t('connect')
-          ),
+          h(Button, {
+            type: 'confirm',
+            large: true,
+            className: 'hw-connect__connect-btn',
+            onClick: this.connect,
+            disabled: !this.state.selectedDevice,
+          }, this.context.t('connect')),
         ])
       )
     }
@@ -67,9 +69,7 @@ class ConnectScreen extends Component {
                   onClick: () => global.platform.openWindow({
                     url: 'https://google.com/chrome',
                   }),
-                },
-                    this.context.t('downloadGoogleChrome')
-                ),
+                }, this.context.t('downloadGoogleChrome')),
             ])
         )
     }
diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss
index e4c7a4e0d..5548025e0 100644
--- a/ui/app/css/itcss/components/new-account.scss
+++ b/ui/app/css/itcss/components/new-account.scss
@@ -3,6 +3,7 @@
   background-color: #FFFFFF;
   box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
   z-index: 25;
+  height: 100%;
 
   &__header {
     display: flex;
@@ -186,22 +187,8 @@
   }
 
   &__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;
+    margin: 20px;
   }
 
   &__connect-btn.disabled {
@@ -489,29 +476,8 @@
     justify-content: space-between;
   }
 
-  &__button {
-    width: 150px;
-    min-width: initial;
-  }
-
-  .btn-primary {
-    background-color: #259DE5;
-    color: #FFFFFF;
-    border: none;
-    width: 100%;
-    min-height: 54px;
-    font-weight: 300;
-    font-size: 14px;
-    margin-bottom: 20px
-  }
-
-  &__button.unlock {
-    width: 50%;
-  }
-
-  &__button.btn-primary--disabled {
-    cursor: not-allowed;
-    opacity: .5;
+  &__button:not(:last-child) {
+    margin-right: 16px;
   }
 }