mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
Fix connect hardware styling (#8680)
* Connect -> Hardware * fix connect hardware styling * rename some components and classes * make hardware account scrolling sane
This commit is contained in:
parent
b34ccbb904
commit
22699cb1d9
@ -732,7 +732,7 @@
|
||||
"message": "We’re happy to see you."
|
||||
},
|
||||
"hardware": {
|
||||
"message": "hardware"
|
||||
"message": "Hardware"
|
||||
},
|
||||
"hardwareWalletConnected": {
|
||||
"message": "Hardware wallet connected"
|
||||
|
@ -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,7 +210,7 @@
|
||||
|
||||
&__btn {
|
||||
background: #fbfbfb;
|
||||
border: 1px solid #e5e5e5;
|
||||
border: 2px solid #e5e5e5;
|
||||
height: 100px;
|
||||
width: 150px;
|
||||
flex: 1;
|
||||
@ -212,6 +218,7 @@
|
||||
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 {
|
||||
|
@ -135,11 +135,11 @@ 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')}
|
||||
@ -147,7 +147,7 @@ class AccountList extends Component {
|
||||
<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()}
|
||||
|
@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
)
|
||||
|
Loading…
Reference in New Issue
Block a user