Fix connect hardware styling (#8680)

* Connect -> Hardware * fix connect hardware styling * rename some components and classes * make hardware account scrolling sane
MetaMask · May 28, 2020 · 22699cb · 22699cb
1 parent b34ccbb
commit 22699cb
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 22 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
@@ -732,7 +732,7 @@
     "message": "We’re happy to see you."
   },
   "hardware": {
-    "message": "hardware"
+    "message": "Hardware"
   },
   "hardwareWalletConnected": {
     "message": "Hardware wallet connected"

diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss
@@ -4,6 +4,12 @@
   box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
   z-index: 25;
   height: unset;
+  overflow: auto;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 
   @media screen and (min-width: 576px) {
     position: absolute;
@@ -204,14 +210,15 @@
 
   &__btn {
     background: #fbfbfb;
-    border: 1px solid #e5e5e5;
+    border: 2px solid #e5e5e5;
     height: 100px;
     width: 150px;
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 5px;
+    padding: 0;
 
     &__img {
       width: 95px;
@@ -458,16 +465,20 @@
   }
 }
 
-.new-account-connect-form {
+.new-external-account-form {
   display: flex;
   flex-flow: column;
   align-items: center;
   padding: 15px 30px 0;
-  height: 710px;
-  overflow: auto;
 
   &.unsupported-browser {
     height: 210px;
+    overflow: auto;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
 
   &.account-list {

diff --git a/ui/app/pages/create-account/connect-hardware/account-list.js b/ui/app/pages/create-account/connect-hardware/account-list.js
@@ -135,19 +135,19 @@ class AccountList extends Component {
       }
 
       return (
-        <div className="new-account-connect-form__buttons">
+        <div className="new-external-account-form__buttons">
           <Button
             type="default"
             large
-            className="new-account-connect-form__button"
+            className="new-external-account-form__button"
             onClick={this.props.onCancel.bind(this)}
           >
             {this.context.t('cancel')}
           </Button>
           <Button
             type="primary"
             large
-            className="new-account-connect-form__button unlock"
+            className="new-external-account-form__button unlock"
             disabled={disabled}
             onClick={this.props.onUnlockAccount.bind(this, this.props.device)}
           >
@@ -169,7 +169,7 @@ class AccountList extends Component {
 
     render () {
       return (
-        <div className="new-account-connect-form account-list">
+        <div className="new-external-account-form account-list">
           {this.renderHeader()}
           {this.renderAccounts()}
           {this.renderPagination()}

diff --git a/ui/app/pages/create-account/connect-hardware/index.js b/ui/app/pages/create-account/connect-hardware/index.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import * as actions from '../../../store/actions'
 import { getMetaMaskAccounts } from '../../../selectors'
-import ConnectScreen from './connect-screen'
+import SelectHardware from './select-hardware'
 import AccountList from './account-list'
 import { DEFAULT_ROUTE } from '../../../helpers/constants/routes'
 import { formatBalance } from '../../../helpers/utils/util'
@@ -186,7 +186,7 @@ class ConnectHardwareForm extends Component {
   renderContent () {
     if (!this.state.accounts.length) {
       return (
-        <ConnectScreen
+        <SelectHardware
           connectToHardwareWallet={this.connectToHardwareWallet}
           browserSupported={this.state.browserSupported}
         />
@@ -213,10 +213,10 @@ class ConnectHardwareForm extends Component {
 
   render () {
     return (
-      <div>
+      <>
         {this.renderError()}
         {this.renderContent()}
-      </div>
+      </>
     )
   }
 }

diff --git a/...ccount/connect-hardware/connect-screen.js → ...count/connect-hardware/select-hardware.js b/...ccount/connect-hardware/connect-screen.js → ...count/connect-hardware/select-hardware.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import Button from '../../../components/ui/button'
 
-class ConnectScreen extends Component {
+export default class SelectHardware extends Component {
   static contextTypes = {
     t: PropTypes.func,
   }
@@ -60,7 +60,7 @@ class ConnectScreen extends Component {
 
   renderButtons () {
     return (
-      <div>
+      <>
         <div className="hw-connect__btn-wrapper">
           {this.renderConnectToLedgerButton()}
           {this.renderConnectToTrezorButton()}
@@ -74,13 +74,13 @@ class ConnectScreen extends Component {
         >
           {this.context.t('connect')}
         </Button>
-      </div>
+      </>
     )
   }
 
   renderUnsupportedBrowser () {
     return (
-      <div className="new-account-connect-form unsupported-browser">
+      <div className="new-external-account-form unsupported-browser">
         <div className="hw-connect">
           <h3 className="hw-connect__title">{this.context.t('browserNotSupported')}</h3>
           <p className="hw-connect__msg">{this.context.t('chromeRequiredForHardwareWallets')}</p>
@@ -206,7 +206,7 @@ class ConnectScreen extends Component {
 
   renderConnectScreen () {
     return (
-      <div className="new-account-connect-form">
+      <div className="new-external-account-form">
         {this.renderHeader()}
         {this.renderButtons()}
         {this.renderTrezorAffiliateLink()}
@@ -224,6 +224,3 @@ class ConnectScreen extends Component {
     return this.renderUnsupportedBrowser()
   }
 }
-
-export default ConnectScreen
-
diff --git a/ui/app/pages/create-account/create-account.component.js b/ui/app/pages/create-account/create-account.component.js
@@ -30,7 +30,7 @@ export default class CreateAccountPage extends Component {
           {this.context.t('import')}
         </div>
         <div className={getClassNames(CONNECT_HARDWARE_ROUTE)} onClick={() => history.push(CONNECT_HARDWARE_ROUTE)}>
-          {this.context.t('connect')}
+          {this.context.t('hardware')}
         </div>
       </div>
     )