last css fixes

2 files changed, 23 insertions, 4 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 06102e16f..c722d1f55 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
@@ -59,7 +59,7 @@ class AccountList extends Component {
   renderPagination () {
     return h('div.hw-list-pagination', [
       h(
-        'button.btn-primary.hw-list-pagination__button',
+        'button.hw-list-pagination__button',
         {
           onClick: () => this.props.getPage(-1),
         },
@@ -67,7 +67,7 @@ class AccountList extends Component {
       ),
 
       h(
-        'button.btn-primary.hw-list-pagination__button',
+        'button.hw-list-pagination__button',
         {
           onClick: () => this.props.getPage(1),
         },
@@ -93,7 +93,7 @@ class AccountList extends Component {
       ),
 
       h(
-        `button.btn-primary.btn--large.new-account-connect-form__button ${disabled ? '.btn-primary--disabled' : ''}`,
+        `button.btn-primary.btn--large.new-account-connect-form__button.unlock ${disabled ? '.btn-primary--disabled' : ''}`,
         {
           onClick: this.props.onUnlockAccount.bind(this),
           ...buttonProps,
@@ -112,7 +112,7 @@ class AccountList extends Component {
   }
 
   render () {
-    return h('div.new-account-connect-form', {}, [
+    return h('div.new-account-connect-form.account-list', {}, [
         this.renderHeader(),
         this.renderAccounts(),
         this.renderPagination(),
diff --git a/ui/app/components/pages/create-account/connect-hardware/index.js b/ui/app/components/pages/create-account/connect-hardware/index.js
index da42ddead..cc3761c04 100644
--- a/ui/app/components/pages/create-account/connect-hardware/index.js
+++ b/ui/app/components/pages/create-account/connect-hardware/index.js
@@ -51,11 +51,26 @@ class ConnectHardwareForm extends Component {
     this.setState({selectedAccount: account.toString(), error: null})
   }
 
+  showTemporaryAlert () {
+    this.props.showAlert(this.context.t('hardwareWalletConnected'))
+    // Autohide the alert after 5 seconds
+    setTimeout(_ => {
+      this.props.hideAlert()
+    }, 5000)
+  }
+
   getPage = (page) => {
     this.props
       .connectHardware('trezor', page)
       .then(accounts => {
         if (accounts.length) {
+
+          // If we just loaded the accounts for the first time
+          // show the global alert
+          if (this.state.accounts.length === 0) {
+            this.showTemporaryAlert()
+          }
+
           const newState = {}
           // Default to the first account
           if (this.state.selectedAccount === null) {
@@ -164,6 +179,8 @@ ConnectHardwareForm.propTypes = {
   connectHardware: PropTypes.func,
   checkHardwareStatus: PropTypes.func,
   forgetDevice: PropTypes.func,
+  showAlert: PropTypes.func,
+  hideAlert: PropTypes.func,
   unlockTrezorAccount: PropTypes.func,
   numberOfExistingAccounts: PropTypes.number,
   history: PropTypes.object,
@@ -203,6 +220,8 @@ const mapDispatchToProps = dispatch => {
     },
     showImportPage: () => dispatch(actions.showImportPage()),
     showConnectPage: () => dispatch(actions.showConnectPage()),
+    showAlert: (msg) => dispatch(actions.showAlert(msg)),
+    hideAlert: () => dispatch(actions.hideAlert()),
   }
 }