diff options
4 files changed, 45 insertions, 10 deletions
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index f9f01f040..08d1d33ae 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -420,6 +420,9 @@ "hardware": { "message": "hardware" }, + "hardwareWalletConnected": { + "message": "Hardware wallet connected" + }, "hardwareSupport": { "message": "Hardware Support" }, 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; |