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

Update buttons & colors to match design system (#6446)

Browse Source 
* Refactoring button styles

* renaming buttons

* Add Link and Button styles

* Update new btn styles and storybook

* Fix tests

* Change font weight; Update storybook

* Fix linter
This commit is contained in:
Chi Kei Chan 2019-04-16 12:35:22 -07:00 committed by Dan J Miller
parent fb22fb12ca
commit 92c03bdff2
51 changed files with 391 additions and 401 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
test/integration/lib/confirm-sig-requests.js
View File

@ -44,7 +44,7 @@ async function runConfirmSigRequestsTest (assert, done) {
let confirmSigRowValue = await queryAsync($, '.request-signature__row-value')
assert.equal(confirmSigRowValue[0].textContent, '0x879a053d4800c6354e76c7985a865d2922c82fb5b3f4577b2fe08b998954f2e0')
let confirmSigSignButton = await queryAsync($, 'button.btn-primary.btn--large')
let confirmSigSignButton = await queryAsync($, 'button.btn-secondary.btn--large')
confirmSigSignButton[0].click()
await timeout(1000)
confirmSigHeadline = await queryAsync($, '.request-signature__headline')
@ -53,7 +53,7 @@ async function runConfirmSigRequestsTest (assert, done) {
confirmSigRowValue = await queryAsync($, '.request-signature__row-value')
assert.ok(confirmSigRowValue[0].textContent.match(/^#\sTerms\sof\sUse/))
confirmSigSignButton = await queryAsync($, 'button.btn-primary.btn--large')
confirmSigSignButton = await queryAsync($, 'button.btn-secondary.btn--large')
confirmSigSignButton[0].click()
await timeout(1000)
confirmSigHeadline = await queryAsync($, '.request-signature__headline')
@ -63,7 +63,7 @@ async function runConfirmSigRequestsTest (assert, done) {
assert.equal(confirmSigRowValue[0].textContent, 'Hi, Alice!')
assert.equal(confirmSigRowValue[1].textContent, '1337')
confirmSigSignButton = await queryAsync($, 'button.btn-primary.btn--large')
confirmSigSignButton = await queryAsync($, 'button.btn-secondary.btn--large')
confirmSigSignButton[0].click()
await timeout(2000)

6
test/integration/lib/send-new-ui.js
View File

@ -43,7 +43,7 @@ async function runSendFlowTest (assert, done) {
selectState.val('send new ui')
reactTriggerChange(selectState[0])
const sendScreenButton = await queryAsync($, 'button.btn-primary.transaction-view-balance__button')
const sendScreenButton = await queryAsync($, 'button.btn-secondary.transaction-view-balance__button')
assert.ok(sendScreenButton[1], 'send screen button present')
sendScreenButton[1].click()
@ -88,7 +88,7 @@ async function runSendFlowTest (assert, done) {
errorMessage = $('.send-v2__error')
assert.equal(errorMessage.length, 0, 'send should stop rendering amount error message after amount is corrected')
const sendButton = await queryAsync($, 'button.btn-primary.btn--large.page-container__footer-button')
const sendButton = await queryAsync($, 'button.btn-secondary.btn--large.page-container__footer-button')
assert.equal(sendButton[0].textContent, 'Next', 'next button rendered')
sendButton[0].click()
await timeout()
@ -122,7 +122,7 @@ async function runSendFlowTest (assert, done) {
sendAmountFieldInputInEdit.val('1.0')
reactTriggerChange(sendAmountFieldInputInEdit[0])
const sendButtonInEdit = await queryAsync($, '.btn-primary.btn--large.page-container__footer-button')
const sendButtonInEdit = await queryAsync($, '.btn-secondary.btn--large.page-container__footer-button')
assert.equal(sendButtonInEdit[0].textContent, 'Next', 'next button in edit rendered')
selectState.val('send new ui')

5
ui/app/components/app/add-token-button/index.scss
View File

@ -17,10 +17,7 @@
}
&__button {
font-size: 0.75rem;
@extend %small-link;
margin: 1rem;
text-transform: uppercase;
color: $curious-blue;
cursor: pointer;
}
}

69
ui/app/components/app/coinbase-form.js
View File

@ -1,69 +0,0 @@
const Component = require('react').Component
const PropTypes = require('prop-types')
const h = require('react-hyperscript')
const inherits = require('util').inherits
const connect = require('react-redux').connect
const actions = require('../../store/actions')
CoinbaseForm.contextTypes = {
t: PropTypes.func,
}
module.exports = connect(mapStateToProps)(CoinbaseForm)
function mapStateToProps (state) {
return {
warning: state.appState.warning,
}
}
inherits(CoinbaseForm, Component)
function CoinbaseForm () {
Component.call(this)
}
CoinbaseForm.prototype.render = function () {
var props = this.props
return h('.flex-column', {
style: {
marginTop: '35px',
padding: '25px',
width: '100%',
},
}, [
h('.flex-row', {
style: {
justifyContent: 'space-around',
margin: '33px',
marginTop: '0px',
},
}, [
h('button.btn-green', {
onClick: this.toCoinbase.bind(this),
}, this.context.t('continueToCoinbase')),
h('button.btn-red', {
onClick: () => props.dispatch(actions.goHome()),
}, this.context.t('cancel')),
]),
])
}
CoinbaseForm.prototype.toCoinbase = function () {
const props = this.props
const address = props.buyView.buyAddress
props.dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
}
CoinbaseForm.prototype.renderLoading = function () {
return h('img', {
style: {
width: '27px',
marginRight: '-27px',
},
src: 'images/loading.svg',
})
}

2
ui/app/components/app/customize-gas-modal/index.js
View File

@ -382,7 +382,7 @@ CustomizeGasModal.prototype.render = function () {
onClick: this.props.hideModal,
}, [this.context.t('cancel')]),
h(Button, {
type: 'primary',
type: 'secondary',
className: 'send-v2__customize-gas__save',
onClick: () => !error && this.save(newGasPrice, gasLimit, gasTotal),
disabled: error,

2
ui/app/components/app/modal/modal.component.js
View File

@ -20,7 +20,7 @@ export default class Modal extends PureComponent {
}
static defaultProps = {
submitType: 'primary',
submitType: 'secondary',
cancelType: 'default',
}

4
ui/app/components/app/modal/tests/modal.component.test.js
View File

@ -12,7 +12,7 @@ describe('Modal Component', () => {
assert.equal(wrapper.find('.modal-container').length, 1)
const buttons = wrapper.find(Button)
assert.equal(buttons.length, 1)
assert.equal(buttons.at(0).props().type, 'primary')
assert.equal(buttons.at(0).props().type, 'secondary')
})
it('should render a modal with a cancel and a submit button', () => {
@ -38,7 +38,7 @@ describe('Modal Component', () => {
cancelButton.simulate('click')
assert.equal(handleCancel.callCount, 1)
assert.equal(submitButton.props().type, 'primary')
assert.equal(submitButton.props().type, 'secondary')
assert.equal(submitButton.props().children, 'Submit')
assert.equal(handleSubmit.callCount, 0)
submitButton.simulate('click')

4
ui/app/components/app/modals/account-details-modal.js
View File

@ -84,7 +84,7 @@ AccountDetailsModal.prototype.render = function () {
h('div.account-modal-divider'),
h(Button, {
type: 'primary',
type: 'secondary',
className: 'account-modal__button',
onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }),
}, this.context.t('etherscanView')),
@ -92,7 +92,7 @@ AccountDetailsModal.prototype.render = function () {
// Holding on redesign for Export Private Key functionality
exportPrivateKeyFeatureEnabled ? h(Button, {
type: 'primary',
type: 'secondary',
className: 'account-modal__button',
onClick: () => showExportPrivateKeyModal(),
}, this.context.t('exportPrivateKey')) : null,

2
ui/app/components/app/modals/customize-gas/customize-gas.component.js
View File

@ -128,7 +128,7 @@ export default class CustomizeGas extends Component {
{ t('cancel') }
</Button>
<Button
type="primary"
type="secondary"
className="customize-gas__save"
onClick={() => {
metricsEvent({

2
ui/app/components/app/modals/deposit-ether-modal.js
View File

@ -119,7 +119,7 @@ DepositEtherModal.prototype.renderRow = function ({
!hideButton && h('div.deposit-ether-modal__buy-row__button', [
h(Button, {
type: 'primary',
type: 'secondary',
className: 'deposit-ether-modal__deposit-button',
large: true,
onClick: onButtonClick,

2
ui/app/components/app/modals/edit-account-name-modal.js
View File

@ -66,7 +66,7 @@ EditAccountNameModal.prototype.render = function () {
value: this.state.inputText,
}, []),
h('button.btn-clear.edit-account-name-modal-save-button.allcaps', {
h('button.button.btn-secondary.edit-account-name-modal-save-button.allcaps', {
onClick: () => {
if (this.state.inputText.length !== 0) {
setAccountLabel(identity.address, this.state.inputText)

4
ui/app/components/app/modals/export-private-key-modal.js
View File

@ -110,14 +110,14 @@ ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password,
(privateKey
? (
h(Button, {
type: 'primary',
type: 'secondary',
large: true,
className: 'export-private-key__button',
onClick: () => hideModal(),
}, this.context.t('done'))
) : (
h(Button, {
type: 'primary',
type: 'secondary',
large: true,
className: 'export-private-key__button',
onClick: () => this.exportAccountAndGetPrivateKey(this.state.password, address),

4
ui/app/components/app/modals/hide-token-confirmation-modal.js
View File

@ -67,12 +67,12 @@ HideTokenConfirmationModal.prototype.render = function () {
]),
h('div.hide-token-confirmation__buttons', {}, [
h('button.btn-cancel.hide-token-confirmation__button.allcaps', {
h('button.btn-default.hide-token-confirmation__button.btn--large', {
onClick: () => hideModal(),
}, [
this.context.t('cancel'),
]),
h('button.btn-clear.hide-token-confirmation__button.allcaps', {
h('button.btn-secondary.hide-token-confirmation__button.btn--large', {
onClick: () => hideToken(address),
}, [
this.context.t('hide'),

4
ui/app/components/app/modals/notification-modal.js
View File

@ -37,11 +37,11 @@ class NotificationModal extends Component {
showButtons && h('div.notification-modal__buttons', [
showCancelButton && h('div.btn-cancel.notification-modal__buttons__btn', {
showCancelButton && h('div.btn-default.notification-modal__buttons__btn', {
onClick: hideModal,
}, 'Cancel'),
showConfirmButton && h('div.btn-clear.notification-modal__buttons__btn', {
showConfirmButton && h('div.button.btn-secondary.notification-modal__buttons__btn', {
onClick: () => {
onConfirm()
hideModal()

2
ui/app/components/app/shapeshift-form.js
View File

@ -245,7 +245,7 @@ ShapeshiftForm.prototype.render = function () {
]),
!depositAddress && h(Button, {
type: 'primary',
type: 'secondary',
large: true,
className: `${btnClass} shapeshift-form__shapeshift-buy-btn`,
disabled: !token,

2
ui/app/components/app/signature-request.js
View File

@ -311,7 +311,7 @@ SignatureRequest.prototype.renderFooter = function () {
},
}, this.context.t('cancel')),
h(Button, {
type: 'primary',
type: 'secondary',
large: true,
className: 'request-signature__footer__sign-button',
onClick: event => {

4
ui/app/components/app/transaction-view-balance/transaction-view-balance.component.js
View File

@ -87,7 +87,7 @@ export default class TransactionViewBalance extends PureComponent {
{
!selectedToken && (
<Button
type="primary"
type="secondary"
className="transaction-view-balance__button"
onClick={() => {
metricsEvent({
@ -105,7 +105,7 @@ export default class TransactionViewBalance extends PureComponent {
)
}
<Button
type="primary"
type="secondary"
className="transaction-view-balance__button"
onClick={() => {
metricsEvent({

2
ui/app/components/app/wallet-view.js
View File

@ -190,7 +190,7 @@ WalletView.prototype.render = function () {
identities[selectedAddress].name,
]),
h('button.btn-clear.wallet-view__details-button.allcaps', this.context.t('details')),
h('button.btn-secondary.wallet-view__details-button', this.context.t('details')),
]),
]),

4
ui/app/components/ui/button/button.component.js
View File

@ -17,6 +17,10 @@ const typeHash = {
confirm: CLASSNAME_CONFIRM,
raised: CLASSNAME_RAISED,
'first-time': CLASSNAME_FIRST_TIME,
warning: 'btn-warning',
danger: 'btn-danger',
'danger-primary': 'btn-danger-primary',
link: 'btn-link',
}
export default class Button extends Component {

47
ui/app/components/ui/button/button.stories.js
View File

@ -2,57 +2,70 @@ import React from 'react'
import { storiesOf } from '@storybook/react'
import { action } from '@storybook/addon-actions'
import Button from '.'
import { text } from '@storybook/addon-knobs/react'
import { text, boolean } from '@storybook/addon-knobs/react'
// ', 'secondary', 'default', 'warning', 'danger', 'danger-primary', 'link'], 'primary')}
storiesOf('Button', module)
.add('primary', () =>
.add('Button - Primary', () =>
<Button
onClick={action('clicked')}
type="primary"
disabled={boolean('disabled', false)}
>
{text('text', 'Click me')}
</Button>
)
.add('secondary', () =>
.add('Button - Secondary', () =>
<Button
onClick={action('clicked')}
type="secondary"
disabled={boolean('disabled', false)}
>
{text('text', 'Click me')}
</Button>
)
.add('default', () => (
.add('Button - Default', () =>
<Button
onClick={action('clicked')}
type="default"
disabled={boolean('disabled', false)}
>
{text('text', 'Click me')}
</Button>
))
.add('large primary', () => (
)
.add('Button - Warning', () =>
<Button
onClick={action('clicked')}
type="primary"
large
type="warning"
disabled={boolean('disabled', false)}
>
{text('text', 'Click me')}
</Button>
))
.add('large secondary', () => (
)
.add('Button - Danger', () =>
<Button
onClick={action('clicked')}
type="secondary"
large
type="danger"
disabled={boolean('disabled', false)}
>
{text('text', 'Click me')}
</Button>
))
.add('large default', () => (
)
.add('Button - Danger Primary', () =>
<Button
onClick={action('clicked')}
type="default"
large
type="danger-primary"
disabled={boolean('disabled', false)}
>
{text('text', 'Click me')}
</Button>
))
)
.add('Button - Link', () =>
<Button
onClick={action('clicked')}
type="link"
disabled={boolean('disabled', false)}
>
{text('text', 'Click me')}
</Button>
)

244
ui/app/components/ui/button/buttons.scss Normal file
View File

@ -0,0 +1,244 @@
/*
Buttons
*/
$hover-secondary: #B0D7F2;
$hover-default: #B3B3B3;
$hover-confirm: #0372C3;
$hover-red: #FEB6BF;
$hover-red-primary: #C72837;
$hover-orange: #FFD3B5;
%button {
@include h6;
font-weight: 500;
font-family: Roboto, Arial;
line-height: 1.25rem;
padding: .75rem 1rem;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
border-radius: 6px;
width: 100%;
outline: none;
transition: border-color .3s ease, background-color .3s ease;
&--disabled,
&[disabled] {
cursor: auto;
opacity: .5;
pointer-events: none;
}
}
%link {
@include h4;
color: $Blue-500;
line-height: 1.25rem;
cursor: pointer;
background-color: transparent;
&:hover {
color: $Blue-400;
}
&:active {
color: $Blue-600;
}
&--disabled,
&[disabled] {
cursor: auto;
opacity: 1;
pointer-events: none;
color: $hover-secondary;
}
}
%small-link {
@extend %link;
@include h6;
}
.button {
@extend %button;
}
.btn-secondary {
color: $Blue-500;
border: 2px solid $hover-secondary;
&:hover {
border-color: $Blue-500;
}
&:active {
background: $Blue-000;
border-color: $Blue-500;
}
&--disabled,
&[disabled] {
opacity: 1;
color: $hover-secondary;
}
}
.btn-warning {
color: $Orange-500;
border: 2px solid $hover-orange;
&:hover {
border-color: $Orange-500;
}
&:active {
background: $Orange-000;
border-color: $Orange-500;
}
&--disabled,
&[disabled] {
opacity: 1;
color: $hover-orange;
}
}
.btn-danger {
color: $Red-500;
border: 2px solid $hover-red;
&:hover {
border-color: $Red-500;
}
&:active {
background: $Red-000;
border-color: $Red-500;
}
&--disabled,
&[disabled] {
opacity: 1;
color: $hover-red;
}
}
.btn-danger-primary {
color: $white;
border: 2px solid $Red-500;
background-color: $Red-500;
&:hover {
border-color: $hover-red-primary;
background-color: $hover-red-primary;
}
&:active {
background: $Red-600;
border-color: $Red-600;
}
&--disabled,
&[disabled] {
opacity: 1;
border-color: $hover-red;
background-color: $hover-red;
}
}
.btn-default {
color: $Grey-500;
border: 2px solid $hover-default;
&:hover {
border-color: $Grey-500;
}
&:active {
background: #FBFBFC;
border-color: $Grey-500;
}
&--disabled,
&[disabled] {
opacity: 1;
color: $hover-default;
}
}
.btn-primary {
color: $white;
border: 2px solid $Blue-500;
background-color: $Blue-500;
&:hover {
border-color: $hover-confirm;
background-color: $hover-confirm;
}
&:active {
background: $Blue-600;
border-color: $Blue-600;
}
&--disabled,
&[disabled] {
border-color: $hover-secondary;
background-color: $hover-secondary;
}
}
.btn-link {
@extend %link;
}
.btn--large {
min-height: 54px;
}
/**
All Buttons styles are deviations from design guide
*/
.btn-raised {
color: $curious-blue;
background-color: $white;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
padding: 6px;
height: initial;
min-height: initial;
width: initial;
min-width: initial;
}
.btn--first-time {
height: 54px;
width: 198px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .14);
color: $white;
font-size: 1.25rem;
font-weight: 500;
transition: 200ms ease-in-out;
background-color: rgba(247, 134, 28, .9);
border-radius: 0;
}
button[disabled],
input[type="submit"][disabled] {
cursor: not-allowed;
opacity: .5;
}
button.primary {
padding: 8px 12px;
background: #f7861c;
box-shadow: 0 3px 6px rgba(247, 134, 28, .36);
color: $white;
font-size: 1.1em;
font-family: Roboto;
text-transform: uppercase;
}

8
ui/app/components/ui/page-container/index.scss
View File

@ -55,11 +55,6 @@
border-top: 1px solid $geyser;
flex: 0 0 auto;
.btn-default,
.btn-confirm {
font-size: 1rem;
}
header {
display: flex;
flex-flow: row;
@ -86,9 +81,6 @@
}
&__footer-button {
height: 55px;
font-size: 1rem;
text-transform: uppercase;
margin-right: 16px;
&:last-of-type {

2
ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js
View File

@ -45,7 +45,7 @@ export default class PageContainerFooter extends Component {
</Button>}
<Button
type={submitButtonType || 'primary'}
type={submitButtonType || 'secondary'}
large
className="page-container__footer-button"
disabled={disabled}

230
ui/app/css/itcss/components/buttons.scss
View File

@ -1,230 +0,0 @@
/*
Buttons
*/
.button {
min-height: 44px;
background: $white;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
transition: border-color .3s ease;
padding: 0 16px;
min-width: 140px;
width: 100%;
text-transform: uppercase;
outline: none;
font-family: Roboto;
&--disabled,
&[disabled] {
cursor: auto;
opacity: .5;
pointer-events: none;
}
}
.btn-primary {
color: $curious-blue;
border: 2px solid $spindle;
&:active {
background: $zumthor;
border-color: $curious-blue;
}
&:hover {
border-color: $curious-blue;
}
}
.btn-secondary {
color: $monzo;
border: 2px solid lighten($monzo, 40%);
&:active {
background: lighten($monzo, 55%);
border-color: $monzo;
}
&:hover {
border-color: $monzo;
}
}
.btn-default {
color: $scorpion;
border: 2px solid $dusty-gray;
&:active {
background: $gallery;
border-color: $dusty-gray;
}
&:hover {
border-color: $scorpion;
}
}
.btn-confirm {
color: $white;
border: 2px solid $curious-blue;
background-color: $curious-blue;
}
.btn-raised {
color: $curious-blue;
background-color: $white;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
padding: 6px;
height: initial;
min-height: initial;
width: initial;
min-width: initial;
}
.btn--first-time {
height: 54px;
width: 198px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .14);
color: $white;
font-size: 1.25rem;
font-weight: 500;
transition: 200ms ease-in-out;
background-color: rgba(247, 134, 28, .9);
border-radius: 0;
}
.btn--large {
min-height: 54px;
}
.btn-green {
background-color: #02c9b1; // TODO: reusable color in colors.css
}
.btn-clear {
background: $white;
text-align: center;
padding: .8rem 1rem;
color: $curious-blue;
border: 2px solid $spindle;
border-radius: 4px;
font-size: .85rem;
font-weight: 400;
transition: border-color .3s ease;
&:hover {
border-color: $curious-blue;
}
&--disabled,
&[disabled] {
cursor: auto;
opacity: .5;
pointer-events: none;
}
}
.btn-cancel {
background: $white;
text-align: center;
padding: .9rem 1rem;
color: $scorpion;
border: 2px solid $dusty-gray;
border-radius: 4px;
font-size: .85rem;
font-weight: 400;
transition: border-color .3s ease;
width: 100%;
&:hover {
border-color: $scorpion;
}
}
// No longer used in flat design, remove when modal buttons done
// div.wallet-btn {
// border: 1px solid rgb(91, 93, 103);
// border-radius: 2px;
// height: 30px;
// width: 75px;
// font-size: 0.8em;
// text-align: center;
// line-height: 25px;
// }
// .btn-red {
// background: rgba(254, 35, 17, 1);
// box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36);
// }
button[disabled],
input[type="submit"][disabled] {
cursor: not-allowed;
opacity: .5;
// background: rgba(197, 197, 197, 1);
// box-shadow: 0 3px 6px rgba(197, 197, 197, .36);
}
// button.spaced {
// margin: 2px;
// }
// button:not([disabled]):hover, input[type="submit"]:not([disabled]):hover {
// transform: scale(1.1);
// }
// button:not([disabled]):active, input[type="submit"]:not([disabled]):active {
// transform: scale(0.95);
// }
button.primary {
padding: 8px 12px;
background: #f7861c;
box-shadow: 0 3px 6px rgba(247, 134, 28, .36);
color: $white;
font-size: 1.1em;
font-family: Roboto;
text-transform: uppercase;
}
.btn-light {
padding: 8px 12px;
// background: #FFFFFF; // $bg-white
box-shadow: 0 3px 6px rgba(247, 134, 28, .36);
color: #585d67; // TODO: make reusable light button color
font-size: 1.1em;
font-family: Roboto;
text-transform: uppercase;
text-align: center;
line-height: 20px;
border-radius: 2px;
border: 1px solid #979797; // #TODO: make reusable light border color
opacity: .5;
}
// TODO: cleanup: not used anywhere
button.btn-thin {
border: 1px solid;
border-color: #4d4d4d;
color: #4d4d4d;
background: rgb(255, 174, 41);
border-radius: 4px;
min-width: 200px;
margin: 12px 0;
padding: 6px;
font-size: 13px;
}
.btn-tertiary {
border: 1px solid transparent;
border-radius: 2px;
background-color: transparent;
font-size: 16px;
line-height: 24px;
padding: 16px 42px;
}

2
ui/app/css/itcss/components/index.scss
View File

@ -1,4 +1,4 @@
@import './buttons.scss';
@import '../../../components/ui/button/buttons';
@import './footer.scss';

2
ui/app/css/itcss/components/modal.scss
View File

@ -538,6 +538,8 @@
}
&__button {
@include paragraph;
@extend %button;
width: 141px;
margin: 0 5px;
}

1
ui/app/css/itcss/generic/index.scss
View File

@ -18,6 +18,7 @@ body {
height: 100%;
margin: 0;
padding: 0;
font-size: 16px;
@media screen and (max-width: $break-small) {
overflow-y: overlay;

37
ui/app/css/itcss/settings/typography.scss
View File

@ -403,3 +403,40 @@
font-weight: 400;
font-style: normal;
}
@mixin fontScale($weight: 400, $size: 1rem) {
font-weight: $weight;
font-size: $size;
}
@mixin h1($weight: 400, $size: 2.5rem){
@include fontScale($weight, $size);
}
@mixin h2($weight: 400, $size: 2rem){
@include fontScale($weight, $size);
}
@mixin h3($weight: 400, $size: 1.5rem){
@include fontScale($weight, $size);
}
@mixin h4($weight: 400, $size: 1.125rem){
@include fontScale($weight, $size);
}
@mixin h5($weight: 400, $size: 1rem){
@include fontScale($weight, $size);
}
@mixin h6($weight: 400, $size: .875rem){
@include fontScale($weight, $size);
}
@mixin h7($weight: 400, $size: .75rem){
@include fontScale($weight, $size);
}
@mixin paragraph($weight: 400, $size: 1rem){
@include fontScale($weight, $size);
}

18
ui/app/css/itcss/settings/variables.scss
View File

@ -26,7 +26,7 @@ $dusty-gray: #9b9b9b;
$alto: #dedede;
$alabaster: #fafafa;
$silver-chalice: #aeaeae;
$curious-blue: #2f9ae0;
$curious-blue: #037DD6;
$concrete: #f3f3f3;
$tundora: #4d4d4d;
$nile-blue: #1b344d;
@ -93,3 +93,19 @@ $break-large: 576px;
$primary-font-type: Roboto;
$Blue-000: #eaf6ff;
$Blue-400: #1098fc;
$Blue-500: #037DD6;
$Blue-600: #0260a4;
$Grey-000: #f2f3f4;
$Grey-500: #6A737D;
$Red-000: #fcf2f3;
$Red-500: #D73A49;
$Red-600: #b92534;
$Orange-000: #fef5ef;
$Orange-500: #F66A0A;

3
ui/app/pages/add-token/token-list/token-list-placeholder/index.scss
View File

@ -18,6 +18,7 @@
}
&__link {
color: $curious-blue;
@extend %link;
margin-top: .5rem;
}
}

2
ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
View File

@ -103,7 +103,7 @@ export default class ConfirmAddSuggestedToken extends Component {
{ this.context.t('cancel') }
</Button>
<Button
type="primary"
type="secondary"
large
className="page-container__footer-button"
onClick={() => {

2
ui/app/pages/confirm-add-token/confirm-add-token.component.js
View File

@ -96,7 +96,7 @@ export default class ConfirmAddToken extends Component {
{ this.context.t('back') }
</Button>
<Button
type="primary"
type="secondary"
large
className="page-container__footer-button"
onClick={() => {

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

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

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

@ -46,7 +46,7 @@ class ConnectScreen extends Component {
this.renderConnectToTrezorButton(),
]),
h(Button, {
type: 'confirm',
type: 'primary',
large: true,
className: 'hw-connect__connect-btn',
onClick: this.connect,

2
ui/app/pages/create-account/import-account/json.js
View File

@ -61,7 +61,7 @@ class JsonImportSubview extends Component {
}, [this.context.t('cancel')]),
h(Button, {
type: 'primary',
type: 'secondary',
large: true,
className: 'new-account-create-form__button',
onClick: () => this.createNewKeychain(),

2
ui/app/pages/create-account/import-account/private-key.js
View File

@ -75,7 +75,7 @@ PrivateKeyImportView.prototype.render = function () {
}, [this.context.t('cancel')]),
h(Button, {
type: 'primary',
type: 'secondary',
large: true,
className: 'new-account-create-form__button',
onClick: () => this.createNewKeychain(),

2
ui/app/pages/create-account/new-account.js
View File

@ -47,7 +47,7 @@ class NewAccountCreateForm extends Component {
}, [this.context.t('cancel')]),
h(Button, {
type: 'primary',
type: 'secondary',
large: true,
className: 'new-account-create-form__button',
onClick: () => {

2
ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js
View File

@ -261,7 +261,7 @@ export default class ImportWithSeedPhrase extends PureComponent {
</span>
</div>
<Button
type="confirm"
type="primary"
className="first-time-flow__button"
disabled={!this.isValid() || !termsChecked}
onClick={this.handleImport}

2
ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js
View File

@ -211,7 +211,7 @@ export default class NewAccount extends PureComponent {
</span>
</div>
<Button
type="confirm"
type="primary"
className="first-time-flow__button"
disabled={!this.isValid() || !termsChecked}
onClick={this.handleCreate}

2
ui/app/pages/first-time-flow/create-password/unique-image/unique-image.component.js
View File

@ -34,7 +34,7 @@ export default class UniqueImageScreen extends PureComponent {
{ t('protectYourKeysMessage2') }
</div>
<Button
type="confirm"
type="primary"
className="first-time-flow__button"
onClick={() => {
this.context.metricsEvent({

2
ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js
View File

@ -71,7 +71,7 @@ export default class EndOfFlowScreen extends PureComponent {
</a>.
</div>
<Button
type="confirm"
type="primary"
className="first-time-flow__button"
onClick={async () => {
await completeOnboarding()

2
ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js
View File

@ -142,7 +142,7 @@ export default class ConfirmSeedPhrase extends PureComponent {
}
</div>
<Button
type="confirm"
type="primary"
className="first-time-flow__button"
onClick={this.handleSubmit}
disabled={!this.isValid()}

2
ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js
View File

@ -130,7 +130,7 @@ export default class RevealSeedPhrase extends PureComponent {
</div>
</div>
<Button
type="confirm"
type="primary"
className="first-time-flow__button"
onClick={this.handleNext}
disabled={!isShowingSeedPhrase}

2
ui/app/pages/first-time-flow/select-action/select-action.component.js
View File

@ -95,7 +95,7 @@ export default class SelectAction extends PureComponent {
</div>
</div>
<Button
type="confirm"
type="primary"
className="first-time-flow__button"
onClick={this.handleCreate}
>

2
ui/app/pages/first-time-flow/welcome/welcome.component.js
View File

@ -56,7 +56,7 @@ export default class Welcome extends PureComponent {
<div>{ t('happyToSeeYou') }</div>
</div>
<Button
type="confirm"
type="primary"
className="first-time-flow__button"
onClick={this.handleContinue}
>

2
ui/app/pages/keychains/reveal-seed.js
View File

@ -116,7 +116,7 @@ class RevealSeedPage extends Component {
onClick: () => this.props.history.push(DEFAULT_ROUTE),
}, this.context.t('cancel')),
h(Button, {
type: 'primary',
type: 'secondary',
large: true,
className: 'page-container__footer-button',
onClick: event => this.handleSubmit(event),

2
ui/app/pages/mobile-sync/index.js
View File

@ -315,7 +315,7 @@ class MobileSyncPage extends Component {
}, this.context.t('cancel')),
h(Button, {
type: 'primary',
type: 'secondary',
large: true,
className: 'new-account-create-form__button',
onClick: event => this.handleSubmit(event),

6
ui/app/pages/settings/advanced-tab/advanced-tab.component.js
View File

@ -189,7 +189,7 @@ export default class AdvancedTab extends PureComponent {
<div className="settings-page__content-item">
<div className="settings-page__content-item-col">
<Button
type="primary"
type="secondary"
large
onClick={event => {
event.preventDefault()
@ -219,7 +219,7 @@ export default class AdvancedTab extends PureComponent {
<div className="settings-page__content-item">
<div className="settings-page__content-item-col">
<Button
type="primary"
type="secondary"
large
onClick={() => {
window.logStateString((err, result) => {
@ -251,7 +251,7 @@ export default class AdvancedTab extends PureComponent {
<div className="settings-page__content-item">
<div className="settings-page__content-item-col">
<Button
type="secondary"
type="warning"
large
className="settings-tab__button--orange"
onClick={event => {

2
ui/app/pages/settings/info-tab/index.scss
View File

@ -30,7 +30,7 @@
}
&__link-text {
color: $curious-blue;
@extend %link;
}
&__version-number {

6
ui/app/pages/settings/security-tab/security-tab.component.js
View File

@ -39,7 +39,7 @@ export default class SecurityTab extends PureComponent {
<div className="settings-page__content-item">
<div className="settings-page__content-item-col">
<Button
type="primary"
type="secondary"
large
onClick={() => {
window.logStateString((err, result) => {
@ -73,7 +73,7 @@ export default class SecurityTab extends PureComponent {
<div className="settings-page__content-item">
<div className="settings-page__content-item-col">
<Button
type="secondary"
type="warning"
large
className="settings-tab__button--orange"
onClick={event => {
@ -101,7 +101,7 @@ export default class SecurityTab extends PureComponent {
<div className="settings-page__content-item">
<div className="settings-page__content-item-col">
<Button
type="secondary"
type="danger"
large
onClick={event => {
event.preventDefault()

20
ui/app/pages/settings/settings-tab/index.scss
View File

@ -6,19 +6,15 @@
}
&__advanced-link {
color: $curious-blue;
@extend %small-link;
padding-left: 5px;
}
&__rpc-save-button {
align-self: flex-end;
padding: 5px;
text-transform: uppercase;
color: $dusty-gray;
cursor: pointer;
width: 25%;
min-width: 80px;
height: 33px;
}
&__button--red {
@ -35,20 +31,6 @@
}
}
&__button--orange {
border-color: lighten($ecstasy, 20%);
color: $ecstasy;
&:active {
background: lighten($ecstasy, 40%);
border-color: $ecstasy;
}
&:hover {
border-color: $ecstasy;
}
}
&__radio-buttons {
display: flex;
align-items: center;