last css fixes

3 files changed, 42 insertions, 10 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()),
   }
 }
 
diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss
index 29faacc1b..b12afb124 100644
--- a/ui/app/css/itcss/components/new-account.scss
+++ b/ui/app/css/itcss/components/new-account.scss
@@ -299,7 +299,8 @@
     font-size: 15px;
     flex-direction: row;
     display: flex;
-    padding: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
   }
 
   &__item:nth-of-type(even) {
@@ -324,14 +325,17 @@
     flex: 1;
 
     input {
-      margin-right: 9px;
+      padding: 10px;
+      margin-top: 13px;
     }
   }
 
   &__item__label {
-    margin-left: 10px;
     display: flex;
     flex: 1;
+    padding-left: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
   }
 
   &__item__balance {
@@ -342,7 +346,7 @@
 
   &__item__link {
     display: flex;
-    margin-top: 3px;
+    margin-top: 13px;
   }
 
   &__item__link img {
@@ -359,7 +363,6 @@
   &__button {
     height: 19px;
     display: flex;
-    width: 47px;
     color: #33a4e7;
     font-size: 14px;
     line-height: 19px;
@@ -368,6 +371,8 @@
     margin-right: 0px;
     margin-left: 16px;
     padding: 0px;
+    text-transform: uppercase;
+    font-family: Roboto;
   }
 }
 
@@ -383,6 +388,10 @@
     height: 210px;
   }
 
+  &.account-list {
+    height: auto;
+  }
+
   &__buttons {
     margin-top: 39px;
     display: flex;
@@ -405,6 +414,10 @@
     font-size: 14px;
   }
 
+  &__button.unlock {
+    width: 50%;
+  }
+
   &__button.btn-primary--disabled {
     cursor: not-allowed;
     opacity: .5;
@@ -415,7 +428,7 @@
   display: flex;
   flex-flow: column;
   align-items: center;
-  padding: 30px 30px 0;
+  padding: 22px;
 
   a {
     color: #2f9ae0;