m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Fix button styling for Create Account Connect (#5787)

Browse Source
This commit is contained in:
Alexander Tseung 2018-11-19 22:46:41 -08:00 committed by Dan Finlay
parent 4c87c05a02
commit a7b3750a3e
3 changed files with 13 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/app/components/pages/create-account/connect-hardware/account-list.js
View File

@ -152,7 +152,7 @@ class AccountList extends Component {
}, [this.context.t('cancel')]), }, [this.context.t('cancel')]),
h(Button, { h(Button, {
type: 'primary', type: 'confirm',
large: true, large: true,
className: 'new-account-connect-form__button unlock', className: 'new-account-connect-form__button unlock',
disabled, disabled,

16
ui/app/components/pages/create-account/connect-hardware/connect-screen.js
View File

@ -45,11 +45,13 @@ class ConnectScreen extends Component {
this.renderConnectToLedgerButton(), this.renderConnectToLedgerButton(),
this.renderConnectToTrezorButton(), this.renderConnectToTrezorButton(),
]), ]),
h( h(Button, {
`button.hw-connect__connect-btn${!this.state.selectedDevice ? '.disabled' : ''}`, type: 'confirm',
{ onClick: this.connect }, large: true,
this.context.t('connect') className: 'hw-connect__connect-btn',
), onClick: this.connect,
disabled: !this.state.selectedDevice,
}, this.context.t('connect')),
]) ])
) )
} }
@ -67,9 +69,7 @@ class ConnectScreen extends Component {
onClick: () => global.platform.openWindow({ onClick: () => global.platform.openWindow({
url: 'https://google.com/chrome', url: 'https://google.com/chrome',
}), }),
}, }, this.context.t('downloadGoogleChrome')),
this.context.t('downloadGoogleChrome')
),
]) ])
) )
} }

42
ui/app/css/itcss/components/new-account.scss
View File

@ -3,6 +3,7 @@
background-color: #FFFFFF; background-color: #FFFFFF;
box-shadow: 0 0 7px 0 rgba(0,0,0,0.08); box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
z-index: 25; z-index: 25;
height: 100%;
&__header { &__header {
display: flex; display: flex;
@ -186,22 +187,8 @@
} }
&__connect-btn { &__connect-btn {
background-color: #259De5;
color: #fff;
border: none;
width: 315px; width: 315px;
min-height: 54px; margin: 20px;
font-weight: 300;
font-size: 14px;
margin-bottom: 20px;
margin-top: 20px;
border-radius: 5px;
display: flex;
flex: 1;
margin-left: 20px;
margin-right: 20px;
justify-content: center;
text-transform: uppercase;
} }
&__connect-btn.disabled { &__connect-btn.disabled {
@ -489,29 +476,8 @@
justify-content: space-between; justify-content: space-between;
} }
&__button { &__button:not(:last-child) {
width: 150px; margin-right: 16px;
min-width: initial;
}
.btn-primary {
background-color: #259DE5;
color: #FFFFFF;
border: none;
width: 100%;
min-height: 54px;
font-weight: 300;
font-size: 14px;
margin-bottom: 20px
}
&__button.unlock {
width: 50%;
}
&__button.btn-primary--disabled {
cursor: not-allowed;
opacity: .5;
} }
} }