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

Merge pull request #3721 from alextsg/cb-944

Update button styles
This commit is contained in:
Dan Finlay 2018-03-26 11:29:04 -07:00 committed by GitHub
commit fe6f22ee69
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 166 additions and 156 deletions

View File

@ -26,7 +26,7 @@ async function runAddTokenFlowTest (assert, done) {
assert.ok($('.token-list-item').length === 0, 'no tokens added') assert.ok($('.token-list-item').length === 0, 'no tokens added')
// Go to Add Token screen // Go to Add Token screen
let addTokenButton = await queryAsync($, 'button.btn-clear.wallet-view__add-token-button') let addTokenButton = await queryAsync($, 'button.btn-primary.wallet-view__add-token-button')
assert.ok(addTokenButton[0], 'add token button present') assert.ok(addTokenButton[0], 'add token button present')
addTokenButton[0].click() addTokenButton[0].click()
@ -38,14 +38,14 @@ async function runAddTokenFlowTest (assert, done) {
assert.equal(addTokenTitle[0].textContent, 'Add Token', 'add token title is correct') assert.equal(addTokenTitle[0].textContent, 'Add Token', 'add token title is correct')
// Cancel Add Token // Cancel Add Token
const cancelAddTokenButton = await queryAsync($, 'button.btn-cancel.add-token__button') const cancelAddTokenButton = await queryAsync($, 'button.btn-secondary--lg.add-token__cancel-button')
assert.ok(cancelAddTokenButton[0], 'cancel add token button present') assert.ok(cancelAddTokenButton[0], 'cancel add token button present')
cancelAddTokenButton.click() cancelAddTokenButton.click()
assert.ok($('.wallet-view')[0], 'cancelled and returned to account detail wallet view') assert.ok($('.wallet-view')[0], 'cancelled and returned to account detail wallet view')
// Return to Add Token Screen // Return to Add Token Screen
addTokenButton = await queryAsync($, 'button.btn-clear.wallet-view__add-token-button') addTokenButton = await queryAsync($, 'button.btn-primary.wallet-view__add-token-button')
assert.ok(addTokenButton[0], 'add token button present') assert.ok(addTokenButton[0], 'add token button present')
addTokenButton[0].click() addTokenButton[0].click()
@ -68,7 +68,7 @@ async function runAddTokenFlowTest (assert, done) {
tokenWrapper[0].click() tokenWrapper[0].click()
// Click Next button // Click Next button
let nextButton = await queryAsync($, 'button.btn-clear.add-token__button') let nextButton = await queryAsync($, 'button.btn-primary--lg')
assert.equal(nextButton[0].textContent, 'Next', 'next button rendered') assert.equal(nextButton[0].textContent, 'Next', 'next button rendered')
nextButton[0].click() nextButton[0].click()
@ -78,8 +78,8 @@ async function runAddTokenFlowTest (assert, done) {
'Would you like to add these tokens?', 'Would you like to add these tokens?',
'confirm add token rendered' 'confirm add token rendered'
) )
assert.ok($('button.btn-clear.add-token__button')[0], 'confirm add token button found') assert.ok($('button.btn-primary--lg')[0], 'confirm add token button found')
$('button.btn-clear.add-token__button')[0].click() $('button.btn-primary--lg')[0].click()
// Verify added token image // Verify added token image
let heroBalance = await queryAsync($, '.hero-balance') let heroBalance = await queryAsync($, '.hero-balance')
@ -87,7 +87,7 @@ async function runAddTokenFlowTest (assert, done) {
assert.ok(tokenImageUrl.indexOf(heroBalance.find('img').attr('src')) > -1, 'token added') assert.ok(tokenImageUrl.indexOf(heroBalance.find('img').attr('src')) > -1, 'token added')
// Return to Add Token Screen // Return to Add Token Screen
addTokenButton = await queryAsync($, 'button.btn-clear.wallet-view__add-token-button') addTokenButton = await queryAsync($, 'button.btn-primary.wallet-view__add-token-button')
assert.ok(addTokenButton[0], 'add token button present') assert.ok(addTokenButton[0], 'add token button present')
addTokenButton[0].click() addTokenButton[0].click()
@ -101,14 +101,14 @@ async function runAddTokenFlowTest (assert, done) {
reactTriggerChange(customInput[0]) reactTriggerChange(customInput[0])
// Click Next button // Click Next button
nextButton = await queryAsync($, 'button.btn-clear.add-token__button') nextButton = await queryAsync($, 'button.btn-primary--lg')
assert.equal(nextButton[0].textContent, 'Next', 'next button rendered') assert.equal(nextButton[0].textContent, 'Next', 'next button rendered')
nextButton[0].click() nextButton[0].click()
// Verify symbol length error since contract address won't return symbol // Verify symbol length error since contract address won't return symbol
const errorMessage = await queryAsync($, '.add-token__add-custom-error-message') const errorMessage = await queryAsync($, '.add-token__add-custom-error-message')
assert.ok(errorMessage[0], 'error rendered') assert.ok(errorMessage[0], 'error rendered')
$('button.btn-cancel.add-token__button')[0].click() $('button.btn-secondary--lg')[0].click()
// // Confirm Add token // // Confirm Add token
// assert.equal( // assert.equal(
@ -116,8 +116,8 @@ async function runAddTokenFlowTest (assert, done) {
// 'Would you like to add these tokens?', // 'Would you like to add these tokens?',
// 'confirm add token rendered' // 'confirm add token rendered'
// ) // )
// assert.ok($('button.btn-clear.add-token__button')[0], 'confirm add token button found') // assert.ok($('button.btn-primary--lg')[0], 'confirm add token button found')
// $('button.btn-clear.add-token__button')[0].click() // $('button.btn-primary--lg')[0].click()
// // Verify added token image // // Verify added token image
// heroBalance = await queryAsync($, '.hero-balance') // heroBalance = await queryAsync($, '.hero-balance')

View File

@ -27,7 +27,7 @@ async function runConfirmSigRequestsTest(assert, done) {
let confirmSigRowValue = await queryAsync($, '.request-signature__row-value') let confirmSigRowValue = await queryAsync($, '.request-signature__row-value')
assert.ok(confirmSigRowValue[0].textContent.match(/^\#\sTerms\sof\sUse/)) assert.ok(confirmSigRowValue[0].textContent.match(/^\#\sTerms\sof\sUse/))
let confirmSigSignButton = await queryAsync($, '.request-signature__footer__sign-button') let confirmSigSignButton = await queryAsync($, 'button.btn-primary--lg')
confirmSigSignButton[0].click() confirmSigSignButton[0].click()
confirmSigHeadline = await queryAsync($, '.request-signature__headline') confirmSigHeadline = await queryAsync($, '.request-signature__headline')
@ -39,7 +39,7 @@ async function runConfirmSigRequestsTest(assert, done) {
confirmSigRowValue = await queryAsync($, '.request-signature__row-value') confirmSigRowValue = await queryAsync($, '.request-signature__row-value')
assert.equal(confirmSigRowValue[0].textContent, '0x879a053d4800c6354e76c7985a865d2922c82fb5b3f4577b2fe08b998954f2e0') assert.equal(confirmSigRowValue[0].textContent, '0x879a053d4800c6354e76c7985a865d2922c82fb5b3f4577b2fe08b998954f2e0')
confirmSigSignButton = await queryAsync($, '.request-signature__footer__sign-button') confirmSigSignButton = await queryAsync($, 'button.btn-primary--lg')
confirmSigSignButton[0].click() confirmSigSignButton[0].click()
confirmSigHeadline = await queryAsync($, '.request-signature__headline') confirmSigHeadline = await queryAsync($, '.request-signature__headline')
@ -49,7 +49,7 @@ async function runConfirmSigRequestsTest(assert, done) {
assert.equal(confirmSigRowValue[0].textContent, 'Hi, Alice!') assert.equal(confirmSigRowValue[0].textContent, 'Hi, Alice!')
assert.equal(confirmSigRowValue[1].textContent, '1337') assert.equal(confirmSigRowValue[1].textContent, '1337')
confirmSigSignButton = await queryAsync($, '.request-signature__footer__sign-button') confirmSigSignButton = await queryAsync($, 'button.btn-primary--lg')
confirmSigSignButton[0].click() confirmSigSignButton[0].click()
const txView = await queryAsync($, '.tx-view') const txView = await queryAsync($, '.tx-view')

View File

@ -29,7 +29,7 @@ async function runSendFlowTest(assert, done) {
selectState.val('send new ui') selectState.val('send new ui')
reactTriggerChange(selectState[0]) reactTriggerChange(selectState[0])
const sendScreenButton = await queryAsync($, 'button.btn-clear.hero-balance-button') const sendScreenButton = await queryAsync($, 'button.btn-primary.hero-balance-button')
assert.ok(sendScreenButton[1], 'send screen button present') assert.ok(sendScreenButton[1], 'send screen button present')
sendScreenButton[1].click() sendScreenButton[1].click()
@ -122,7 +122,7 @@ async function runSendFlowTest(assert, done) {
'send gas field should show customized gas total converted to USD' 'send gas field should show customized gas total converted to USD'
) )
const sendButton = await queryAsync($, 'button.btn-clear.page-container__footer-button') const sendButton = await queryAsync($, 'button.btn-primary--lg.page-container__footer-button')
assert.equal(sendButton[0].textContent, 'Next', 'next button rendered') assert.equal(sendButton[0].textContent, 'Next', 'next button rendered')
sendButton[0].click() sendButton[0].click()
await timeout() await timeout()
@ -163,7 +163,7 @@ async function runSendFlowTest(assert, done) {
sendAmountFieldInputInEdit.val('1.0') sendAmountFieldInputInEdit.val('1.0')
reactTriggerChange(sendAmountFieldInputInEdit[0]) reactTriggerChange(sendAmountFieldInputInEdit[0])
const sendButtonInEdit = await queryAsync($, '.btn-clear.page-container__footer-button') const sendButtonInEdit = await queryAsync($, '.btn-primary--lg.page-container__footer-button')
assert.equal(sendButtonInEdit[0].textContent, 'Next', 'next button in edit rendered') assert.equal(sendButtonInEdit[0].textContent, 'Next', 'next button in edit rendered')
sendButtonInEdit[0].click() sendButtonInEdit[0].click()

View File

@ -50,13 +50,13 @@ class JsonImportSubview extends Component {
h('div.new-account-create-form__buttons', {}, [ h('div.new-account-create-form__buttons', {}, [
h('button.new-account-create-form__button-cancel', { h('button.btn-secondary.new-account-create-form__button', {
onClick: () => this.props.goHome(), onClick: () => this.props.goHome(),
}, [ }, [
t('cancel'), t('cancel'),
]), ]),
h('button.new-account-create-form__button-create', { h('button.btn-primary.new-account-create-form__button', {
onClick: () => this.createNewKeychain(), onClick: () => this.createNewKeychain(),
}, [ }, [
t('import'), t('import'),

View File

@ -48,13 +48,13 @@ PrivateKeyImportView.prototype.render = function () {
h('div.new-account-import-form__buttons', {}, [ h('div.new-account-import-form__buttons', {}, [
h('button.new-account-create-form__button-cancel.allcaps', { h('button.btn-secondary--lg.new-account-create-form__button', {
onClick: () => goHome(), onClick: () => goHome(),
}, [ }, [
t('cancel'), t('cancel'),
]), ]),
h('button.new-account-create-form__button-create.allcaps', { h('button.btn-primary--lg.new-account-create-form__button', {
onClick: () => this.createNewKeychain(), onClick: () => this.createNewKeychain(),
}, [ }, [
t('import'), t('import'),

View File

@ -38,13 +38,13 @@ class NewAccountCreateForm extends Component {
h('div.new-account-create-form__buttons', {}, [ h('div.new-account-create-form__buttons', {}, [
h('button.new-account-create-form__button-cancel.allcaps', { h('button.btn-secondary--lg.new-account-create-form__button', {
onClick: () => this.props.goHome(), onClick: () => this.props.goHome(),
}, [ }, [
t('cancel'), t('cancel'),
]), ]),
h('button.new-account-create-form__button-create.allcaps', { h('button.btn-primary--lg.new-account-create-form__button', {
onClick: () => this.props.createAccount(newAccountName || defaultAccountName), onClick: () => this.props.createAccount(newAccountName || defaultAccountName),
}, [ }, [
t('create'), t('create'),

View File

@ -321,10 +321,10 @@ AddTokenScreen.prototype.renderConfirmation = function () {
]), ]),
]), ]),
h('div.add-token__buttons', [ h('div.add-token__buttons', [
h('button.btn-cancel.add-token__button', { h('button.btn-secondary--lg.add-token__cancel-button', {
onClick: () => this.setState({ isShowingConfirmation: false }), onClick: () => this.setState({ isShowingConfirmation: false }),
}, t('back')), }, t('back')),
h('button.btn-clear.add-token__button', { h('button.btn-primary--lg', {
onClick: () => addTokens(tokens).then(goHome), onClick: () => addTokens(tokens).then(goHome),
}, t('addTokens')), }, t('addTokens')),
]), ]),
@ -371,10 +371,10 @@ AddTokenScreen.prototype.render = function () {
]), ]),
]), ]),
h('div.add-token__buttons', [ h('div.add-token__buttons', [
h('button.btn-cancel.add-token__button', { h('button.btn-secondary--lg.add-token__cancel-button', {
onClick: goHome, onClick: goHome,
}, t('cancel')), }, t('cancel')),
h('button.btn-clear.add-token__button', { h('button.btn-primary--lg', {
onClick: this.onNext, onClick: this.onNext,
}, t('next')), }, t('next')),
]), ]),

View File

@ -302,12 +302,16 @@ CustomizeGasModal.prototype.render = function () {
}, [t('revert')]), }, [t('revert')]),
h('div.send-v2__customize-gas__buttons', [ h('div.send-v2__customize-gas__buttons', [
h('div.send-v2__customize-gas__cancel.allcaps', { h('button.btn-secondary.send-v2__customize-gas__cancel', {
onClick: this.props.hideModal, onClick: this.props.hideModal,
style: {
marginRight: '10px',
},
}, [t('cancel')]), }, [t('cancel')]),
h(`div.send-v2__customize-gas__save${error ? '__error' : ''}.allcaps`, { h('button.btn-primary.send-v2__customize-gas__save', {
onClick: () => !error && this.save(newGasPrice, gasLimit, gasTotal), onClick: () => !error && this.save(newGasPrice, gasLimit, gasTotal),
className: error && 'btn-primary--disabled',
}, [t('save')]), }, [t('save')]),
]), ]),

View File

@ -63,12 +63,12 @@ AccountDetailsModal.prototype.render = function () {
h('div.account-modal-divider'), h('div.account-modal-divider'),
h('button.btn-clear.account-modal__button', { h('button.btn-primary.account-modal__button', {
onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }), onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }),
}, t('etherscanView')), }, t('etherscanView')),
// Holding on redesign for Export Private Key functionality // Holding on redesign for Export Private Key functionality
h('button.btn-clear.account-modal__button', { h('button.btn-primary.account-modal__button', {
onClick: () => showExportPrivateKeyModal(), onClick: () => showExportPrivateKeyModal(),
}, t('exportPrivateKey')), }, t('exportPrivateKey')),

View File

@ -94,7 +94,7 @@ DepositEtherModal.prototype.renderRow = function ({
]), ]),
!hideButton && h('div.deposit-ether-modal__buy-row__button', [ !hideButton && h('div.deposit-ether-modal__buy-row__button', [
h('button.deposit-ether-modal__deposit-button', { h('button.btn-primary--lg.deposit-ether-modal__deposit-button', {
onClick: onButtonClick, onClick: onButtonClick,
}, [buttonLabel]), }, [buttonLabel]),
]), ]),

View File

@ -81,14 +81,14 @@ ExportPrivateKeyModal.prototype.renderButton = function (className, onClick, lab
ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address, hideModal) { ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address, hideModal) {
return h('div.export-private-key-buttons', {}, [ return h('div.export-private-key-buttons', {}, [
!privateKey && this.renderButton( !privateKey && this.renderButton(
'btn-cancel export-private-key__button export-private-key__button--cancel', 'btn-secondary--lg export-private-key__button export-private-key__button--cancel',
() => hideModal(), () => hideModal(),
'Cancel' 'Cancel'
), ),
(privateKey (privateKey
? this.renderButton('btn-clear export-private-key__button', () => hideModal(), t('done')) ? this.renderButton('btn-primary--lg export-private-key__button', () => hideModal(), t('done'))
: this.renderButton('btn-clear export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), t('confirm')) : this.renderButton('btn-primary--lg export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), t('confirm'))
), ),
]) ])

View File

@ -236,7 +236,7 @@ ShapeshiftForm.prototype.render = function () {
]), ]),
!depositAddress && h('button.shapeshift-form__shapeshift-buy-btn', { !depositAddress && h('button.btn-primary--lg.shapeshift-form__shapeshift-buy-btn', {
className: btnClass, className: btnClass,
disabled: !token, disabled: !token,
onClick: () => this.onBuyWithShapeShift(), onClick: () => this.onBuyWithShapeShift(),

View File

@ -223,10 +223,10 @@ SignatureRequest.prototype.renderFooter = function () {
} }
return h('div.request-signature__footer', [ return h('div.request-signature__footer', [
h('button.request-signature__footer__cancel-button', { h('button.btn-secondary--lg.request-signature__footer__cancel-button', {
onClick: cancel, onClick: cancel,
}, t('cancel')), }, t('cancel')),
h('button.request-signature__footer__sign-button', { h('button.btn-primary--lg', {
onClick: sign, onClick: sign,
}, t('sign')), }, t('sign')),
]) ])

View File

@ -69,13 +69,13 @@ TxView.prototype.renderButtons = function () {
return !selectedToken return !selectedToken
? ( ? (
h('div.flex-row.flex-center.hero-balance-buttons', [ h('div.flex-row.flex-center.hero-balance-buttons', [
h('button.btn-clear.hero-balance-button.allcaps', { h('button.btn-primary.hero-balance-button', {
onClick: () => showModal({ onClick: () => showModal({
name: 'DEPOSIT_ETHER', name: 'DEPOSIT_ETHER',
}), }),
}, t('deposit')), }, t('deposit')),
h('button.btn-clear.hero-balance-button.allcaps', { h('button.btn-primary.hero-balance-button', {
style: { style: {
marginLeft: '0.8em', marginLeft: '0.8em',
}, },
@ -85,7 +85,7 @@ TxView.prototype.renderButtons = function () {
) )
: ( : (
h('div.flex-row.flex-center.hero-balance-buttons', [ h('div.flex-row.flex-center.hero-balance-buttons', [
h('button.btn-clear.hero-balance-button', { h('button.btn-primary.hero-balance-button', {
onClick: showSendTokenPage, onClick: showSendTokenPage,
}, t('send')), }, t('send')),
]) ])

View File

@ -168,7 +168,7 @@ WalletView.prototype.render = function () {
h(TokenList), h(TokenList),
h('button.btn-clear.wallet-view__add-token-button', { h('button.btn-primary.wallet-view__add-token-button', {
onClick: () => { onClick: () => {
showAddTokenPage() showAddTokenPage()
hideSidebar() hideSidebar()

View File

@ -172,11 +172,8 @@
justify-content: center; justify-content: center;
} }
&__button { &__cancel-button {
flex: 1 0 141px; margin-right: 1.2rem;
margin: 0 12px;
padding: 10px 22px;
height: 54px;
} }
&__token-icons-container { &__token-icons-container {
@ -334,7 +331,7 @@
} }
&__buttons { &__buttons {
padding: 12px 0; padding: 1rem;
margin: 0; margin: 0;
border-top: 1px solid $gallery; border-top: 1px solid $gallery;
width: 100%; width: 100%;

View File

@ -2,6 +2,76 @@
Buttons Buttons
*/ */
.btn-primary,
.btn-primary--lg,
.btn-secondary,
.btn-secondary--lg {
background: $white;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
transition: border-color .3s ease;
padding: 0 20px;
min-width: 140px;
text-transform: uppercase;
}
.btn-primary,
.btn-primary--lg {
color: $curious-blue;
border: 2px solid $spindle;
&:active {
background: $zumthor;
border-color: $curious-blue;
}
&:hover {
border-color: $curious-blue;
}
&--disabled,
&[disabled] {
cursor: auto;
opacity: .5;
pointer-events: none;
}
}
.btn-secondary,
.btn-secondary--lg {
color: $scorpion;
border: 2px solid $dusty-gray;
&:active {
background: $gallery;
border-color: $dusty-gray;
}
&:hover {
border-color: $scorpion;
}
&--disabled,
&[disabled] {
cursor: auto;
opacity: .5;
pointer-events: none;
}
}
.btn-primary, .btn-secondary {
height: 44px;
}
.btn-primary--lg, .btn-secondary--lg {
height: 54px;
}
.btn-green { .btn-green {
background-color: #02c9b1; // TODO: reusable color in colors.css background-color: #02c9b1; // TODO: reusable color in colors.css
} }
@ -130,20 +200,6 @@ button.btn-thin {
font-size: 13px; font-size: 13px;
} }
.btn-secondary {
border: 1px solid #979797;
border-radius: 2px;
background-color: $white;
font-size: 16px;
line-height: 24px;
padding: 16px 42px;
&[disabled] {
background-color: $white !important;
opacity: .5;
}
}
.btn-tertiary { .btn-tertiary {
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 2px; border-radius: 2px;

View File

@ -103,10 +103,11 @@
} }
.hero-balance-button { .hero-balance-button {
min-width: initial;
width: 6rem; width: 6rem;
@media #{$sub-mid-size-breakpoint-range} { @media #{$sub-mid-size-breakpoint-range} {
padding: 0.4rem; padding: .4rem;
width: 4rem; width: 4rem;
display: flex; display: flex;
flex: 1; flex: 1;

View File

@ -261,7 +261,7 @@
.account-modal__button { .account-modal__button {
margin-top: 17px; margin-top: 17px;
padding: 10px 22px; padding: 10px 22px;
width: 235px; width: 286px;
} }
} }
@ -341,9 +341,8 @@
.export-private-key__button { .export-private-key__button {
margin-top: 17px; margin-top: 17px;
padding: 10px 22px;
width: 141px; width: 141px;
height: 54px; min-width: initial;
} }
.export-private-key__button--cancel { .export-private-key__button--cancel {
@ -765,15 +764,7 @@
} }
&__deposit-button, .shapeshift-form__shapeshift-buy-btn { &__deposit-button, .shapeshift-form__shapeshift-buy-btn {
height: 54px;
width: 257px; width: 257px;
border: 1px solid $curious-blue;
border-radius: 4px;
display: flex;
justify-content: center;
font-size: 16px;
color: $curious-blue;
background-color: $white;
} }
.shapeshift-form-wrapper { .shapeshift-form-wrapper {

View File

@ -192,29 +192,8 @@
justify-content: space-between; justify-content: space-between;
} }
&__button-cancel, &__button {
&__button-create {
height: 55px;
width: 150px; width: 150px;
border-radius: 2px; min-width: initial;
background-color: #FFFFFF;
}
&__button-cancel {
border: 1px solid $dusty-gray;
color: $dusty-gray;
font-family: Roboto;
font-size: 16px;
line-height: 21px;
text-align: center;
}
&__button-create {
border: 1px solid $curious-blue;
color: $curious-blue;
font-family: Roboto;
font-size: 16px;
line-height: 21px;
text-align: center;
} }
} }

View File

@ -190,41 +190,19 @@
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-evenly; justify-content: center;
font-size: 22px; font-size: 22px;
position: relative; position: relative;
flex: 0 0 auto; flex: 0 0 auto;
border-top: 1px solid $geyser; border-top: 1px solid $geyser;
padding: 1.6rem;
&__cancel-button, button {
&__sign-button { width: 165px;
display: flex;
align-items: center;
justify-content: center;
flex: 1 0 auto;
font-family: Roboto;
font-size: 16px;
font-weight: 300;
height: 55px;
line-height: 32px;
cursor: pointer;
border-radius: 2px;
box-shadow: none;
max-width: 162px;
margin: 12px;
} }
&__cancel-button { &__cancel-button {
background: none; margin-right: 1.2rem;
border: 1px solid $dusty-gray;
margin-right: 6px;
}
&__sign-button {
background-color: $caribbean-green;
border-width: 0;
color: $white;
margin-left: 6px;
} }
} }
} }

View File

@ -782,7 +782,6 @@
&__buttons { &__buttons {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 181.75px;
margin-right: 21.25px; margin-right: 21.25px;
} }
@ -800,13 +799,8 @@
} }
&__cancel, &__save, &__save__error { &__cancel, &__save, &__save__error {
height: 34.64px;
width: 85.74px; width: 85.74px;
border: 1px solid $dusty-gray; min-width: initial;
border-radius: 2px;
font-family: 'DIN OT';
font-size: 12px;
color: $dusty-gray;
} }
&__save__error { &__save__error {

View File

@ -130,24 +130,32 @@
cursor: pointer; cursor: pointer;
} }
.settings__clear-button { .settings__button--red {
font-size: 16px; border-color: lighten($monzo, 10%);
border: 1px solid $curious-blue;
color: $curious-blue;
border-radius: 2px;
padding: 18px;
background-color: $white;
text-transform: uppercase;
}
.settings__clear-button--red {
border: 1px solid $monzo;
color: $monzo; color: $monzo;
&:active {
background: lighten($monzo, 55%);
border-color: $monzo;
} }
.settings__clear-button--orange { &:hover {
border: 1px solid rgba(247, 134, 28, 1); border-color: $monzo;
color: rgba(247, 134, 28, 1); }
}
.settings__button--orange {
border-color: lighten($ecstasy, 20%);
color: $ecstasy;
&:active {
background: lighten($ecstasy, 40%);
border-color: $ecstasy;
}
&:hover {
border-color: $ecstasy;
}
} }
.settings__info-logo-wrapper { .settings__info-logo-wrapper {

View File

@ -132,7 +132,7 @@ input.large-input {
height: 55px; height: 55px;
font-size: 1rem; font-size: 1rem;
text-transform: uppercase; text-transform: uppercase;
margin-right: 1rem; margin-right: 1.2rem;
border-radius: 2px; border-radius: 2px;
&:last-of-type { &:last-of-type {

View File

@ -51,6 +51,8 @@ $java: #29b6af;
$wild-strawberry: #ff4a8d; $wild-strawberry: #ff4a8d;
$cornflower-blue: #7057ff; $cornflower-blue: #7057ff;
$saffron: #f6c343; $saffron: #f6c343;
$zumthor: #edf7ff;
$ecstasy: #f7861c;
/* /*
Z-Indicies Z-Indicies

View File

@ -513,13 +513,13 @@ SendTransactionScreen.prototype.renderFooter = function () {
const noErrors = !amountError && toError === null const noErrors = !amountError && toError === null
return h('div.page-container__footer', [ return h('div.page-container__footer', [
h('button.btn-cancel.page-container__footer-button', { h('button.btn-secondary--lg.page-container__footer-button', {
onClick: () => { onClick: () => {
clearSend() clearSend()
goHome() goHome()
}, },
}, t('cancel')), }, t('cancel')),
h('button.btn-clear.page-container__footer-button', { h('button.btn-primary--lg.page-container__footer-button', {
disabled: !noErrors || !gasTotal || missingTokenBalance, disabled: !noErrors || !gasTotal || missingTokenBalance,
onClick: event => this.onSubmit(event), onClick: event => this.onSubmit(event),
}, t('next')), }, t('next')),

View File

@ -200,7 +200,7 @@ class Settings extends Component {
]), ]),
h('div.settings__content-item', [ h('div.settings__content-item', [
h('div.settings__content-item-col', [ h('div.settings__content-item-col', [
h('button.settings__clear-button', { h('button.btn-primary--lg.settings__button', {
onClick (event) { onClick (event) {
window.logStateString((err, result) => { window.logStateString((err, result) => {
if (err) { if (err) {
@ -225,7 +225,7 @@ class Settings extends Component {
h('div.settings__content-item', t('revealSeedWords')), h('div.settings__content-item', t('revealSeedWords')),
h('div.settings__content-item', [ h('div.settings__content-item', [
h('div.settings__content-item-col', [ h('div.settings__content-item-col', [
h('button.settings__clear-button.settings__clear-button--red', { h('button.btn-primary--lg.settings__button--red', {
onClick (event) { onClick (event) {
event.preventDefault() event.preventDefault()
revealSeedConfirmation() revealSeedConfirmation()
@ -245,7 +245,7 @@ class Settings extends Component {
h('div.settings__content-item', t('useOldUI')), h('div.settings__content-item', t('useOldUI')),
h('div.settings__content-item', [ h('div.settings__content-item', [
h('div.settings__content-item-col', [ h('div.settings__content-item-col', [
h('button.settings__clear-button.settings__clear-button--orange', { h('button.btn-primary--lg.settings__button--orange', {
onClick (event) { onClick (event) {
event.preventDefault() event.preventDefault()
setFeatureFlagToBeta() setFeatureFlagToBeta()
@ -264,7 +264,7 @@ class Settings extends Component {
h('div.settings__content-item', t('resetAccount')), h('div.settings__content-item', t('resetAccount')),
h('div.settings__content-item', [ h('div.settings__content-item', [
h('div.settings__content-item-col', [ h('div.settings__content-item-col', [
h('button.settings__clear-button.settings__clear-button--orange', { h('button.btn-primary--lg.settings__button--orange', {
onClick (event) { onClick (event) {
event.preventDefault() event.preventDefault()
showResetAccountConfirmationModal() showResetAccountConfirmationModal()