aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--test/integration/lib/add-token.js22
-rw-r--r--test/integration/lib/confirm-sig-requests.js6
-rw-r--r--test/integration/lib/send-new-ui.js6
-rw-r--r--ui/app/accounts/import/json.js4
-rw-r--r--ui/app/accounts/import/private-key.js4
-rw-r--r--ui/app/accounts/new-account/create-form.js6
-rw-r--r--ui/app/add-token.js8
-rw-r--r--ui/app/components/customize-gas-modal/index.js8
-rw-r--r--ui/app/components/modals/account-details-modal.js4
-rw-r--r--ui/app/components/modals/deposit-ether-modal.js2
-rw-r--r--ui/app/components/modals/export-private-key-modal.js6
-rw-r--r--ui/app/components/shapeshift-form.js2
-rw-r--r--ui/app/components/signature-request.js4
-rw-r--r--ui/app/components/tx-view.js6
-rw-r--r--ui/app/components/wallet-view.js2
-rw-r--r--ui/app/css/itcss/components/add-token.scss9
-rw-r--r--ui/app/css/itcss/components/buttons.scss84
-rw-r--r--ui/app/css/itcss/components/hero-balance.scss3
-rw-r--r--ui/app/css/itcss/components/modal.scss13
-rw-r--r--ui/app/css/itcss/components/new-account.scss27
-rw-r--r--ui/app/css/itcss/components/request-signature.scss34
-rw-r--r--ui/app/css/itcss/components/send.scss8
-rw-r--r--ui/app/css/itcss/components/settings.scss38
-rw-r--r--ui/app/css/itcss/generic/index.scss2
-rw-r--r--ui/app/css/itcss/settings/variables.scss2
-rw-r--r--ui/app/send-v2.js4
-rw-r--r--ui/app/settings.js8
27 files changed, 166 insertions, 156 deletions
diff --git a/test/integration/lib/add-token.js b/test/integration/lib/add-token.js
index 42ed28dca..228192e7b 100644
--- a/test/integration/lib/add-token.js
+++ b/test/integration/lib/add-token.js
@@ -26,7 +26,7 @@ async function runAddTokenFlowTest (assert, done) {
assert.ok($('.token-list-item').length === 0, 'no tokens added')
// 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')
addTokenButton[0].click()
@@ -38,14 +38,14 @@ async function runAddTokenFlowTest (assert, done) {
assert.equal(addTokenTitle[0].textContent, 'Add Token', 'add token title is correct')
// 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')
cancelAddTokenButton.click()
assert.ok($('.wallet-view')[0], 'cancelled and returned to account detail wallet view')
// 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')
addTokenButton[0].click()
@@ -68,7 +68,7 @@ async function runAddTokenFlowTest (assert, done) {
tokenWrapper[0].click()
// 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')
nextButton[0].click()
@@ -78,8 +78,8 @@ async function runAddTokenFlowTest (assert, done) {
'Would you like to add these tokens?',
'confirm add token rendered'
)
- assert.ok($('button.btn-clear.add-token__button')[0], 'confirm add token button found')
- $('button.btn-clear.add-token__button')[0].click()
+ assert.ok($('button.btn-primary--lg')[0], 'confirm add token button found')
+ $('button.btn-primary--lg')[0].click()
// Verify added token image
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')
// 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')
addTokenButton[0].click()
@@ -101,14 +101,14 @@ async function runAddTokenFlowTest (assert, done) {
reactTriggerChange(customInput[0])
// 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')
nextButton[0].click()
// Verify symbol length error since contract address won't return symbol
const errorMessage = await queryAsync($, '.add-token__add-custom-error-message')
assert.ok(errorMessage[0], 'error rendered')
- $('button.btn-cancel.add-token__button')[0].click()
+ $('button.btn-secondary--lg')[0].click()
// // Confirm Add token
// assert.equal(
@@ -116,8 +116,8 @@ async function runAddTokenFlowTest (assert, done) {
// 'Would you like to add these tokens?',
// 'confirm add token rendered'
// )
- // assert.ok($('button.btn-clear.add-token__button')[0], 'confirm add token button found')
- // $('button.btn-clear.add-token__button')[0].click()
+ // assert.ok($('button.btn-primary--lg')[0], 'confirm add token button found')
+ // $('button.btn-primary--lg')[0].click()
// // Verify added token image
// heroBalance = await queryAsync($, '.hero-balance')
diff --git a/test/integration/lib/confirm-sig-requests.js b/test/integration/lib/confirm-sig-requests.js
index 9737a2283..f1116d1a6 100644
--- a/test/integration/lib/confirm-sig-requests.js
+++ b/test/integration/lib/confirm-sig-requests.js
@@ -27,7 +27,7 @@ async function runConfirmSigRequestsTest(assert, done) {
let confirmSigRowValue = await queryAsync($, '.request-signature__row-value')
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()
confirmSigHeadline = await queryAsync($, '.request-signature__headline')
@@ -39,7 +39,7 @@ async function runConfirmSigRequestsTest(assert, done) {
confirmSigRowValue = await queryAsync($, '.request-signature__row-value')
assert.equal(confirmSigRowValue[0].textContent, '0x879a053d4800c6354e76c7985a865d2922c82fb5b3f4577b2fe08b998954f2e0')
- confirmSigSignButton = await queryAsync($, '.request-signature__footer__sign-button')
+ confirmSigSignButton = await queryAsync($, 'button.btn-primary--lg')
confirmSigSignButton[0].click()
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[1].textContent, '1337')
- confirmSigSignButton = await queryAsync($, '.request-signature__footer__sign-button')
+ confirmSigSignButton = await queryAsync($, 'button.btn-primary--lg')
confirmSigSignButton[0].click()
const txView = await queryAsync($, '.tx-view')
diff --git a/test/integration/lib/send-new-ui.js b/test/integration/lib/send-new-ui.js
index 46e0ef0e4..89d2e45e7 100644
--- a/test/integration/lib/send-new-ui.js
+++ b/test/integration/lib/send-new-ui.js
@@ -27,7 +27,7 @@ async function runSendFlowTest(assert, done) {
selectState.val('send new ui')
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')
sendScreenButton[1].click()
@@ -120,7 +120,7 @@ async function runSendFlowTest(assert, done) {
'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')
sendButton[0].click()
await timeout()
@@ -161,7 +161,7 @@ async function runSendFlowTest(assert, done) {
sendAmountFieldInputInEdit.val('1.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')
sendButtonInEdit[0].click()
diff --git a/ui/app/accounts/import/json.js b/ui/app/accounts/import/json.js
index fa25168f1..eeba73e77 100644
--- a/ui/app/accounts/import/json.js
+++ b/ui/app/accounts/import/json.js
@@ -50,13 +50,13 @@ class JsonImportSubview extends Component {
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(),
}, [
t('cancel'),
]),
- h('button.new-account-create-form__button-create', {
+ h('button.btn-primary.new-account-create-form__button', {
onClick: () => this.createNewKeychain(),
}, [
t('import'),
diff --git a/ui/app/accounts/import/private-key.js b/ui/app/accounts/import/private-key.js
index bc9e9384e..13c8da722 100644
--- a/ui/app/accounts/import/private-key.js
+++ b/ui/app/accounts/import/private-key.js
@@ -48,13 +48,13 @@ PrivateKeyImportView.prototype.render = function () {
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(),
}, [
t('cancel'),
]),
- h('button.new-account-create-form__button-create.allcaps', {
+ h('button.btn-primary--lg.new-account-create-form__button', {
onClick: () => this.createNewKeychain(),
}, [
t('import'),
diff --git a/ui/app/accounts/new-account/create-form.js b/ui/app/accounts/new-account/create-form.js
index 8ef842a2a..c820cdf6d 100644
--- a/ui/app/accounts/new-account/create-form.js
+++ b/ui/app/accounts/new-account/create-form.js
@@ -20,7 +20,7 @@ class NewAccountCreateForm extends Component {
render () {
const { newAccountName, defaultAccountName } = this.state
-
+
return h('div.new-account-create-form', [
@@ -38,13 +38,13 @@ class NewAccountCreateForm extends Component {
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(),
}, [
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),
}, [
t('create'),
diff --git a/ui/app/add-token.js b/ui/app/add-token.js
index b3a5bdc20..edeea11d8 100644
--- a/ui/app/add-token.js
+++ b/ui/app/add-token.js
@@ -321,10 +321,10 @@ AddTokenScreen.prototype.renderConfirmation = function () {
]),
]),
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 }),
}, t('back')),
- h('button.btn-clear.add-token__button', {
+ h('button.btn-primary--lg', {
onClick: () => addTokens(tokens).then(goHome),
}, t('addTokens')),
]),
@@ -371,10 +371,10 @@ AddTokenScreen.prototype.render = function () {
]),
]),
h('div.add-token__buttons', [
- h('button.btn-cancel.add-token__button', {
+ h('button.btn-secondary--lg.add-token__cancel-button', {
onClick: goHome,
}, t('cancel')),
- h('button.btn-clear.add-token__button', {
+ h('button.btn-primary--lg', {
onClick: this.onNext,
}, t('next')),
]),
diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js
index d8384c19d..22ad98ce4 100644
--- a/ui/app/components/customize-gas-modal/index.js
+++ b/ui/app/components/customize-gas-modal/index.js
@@ -302,12 +302,16 @@ CustomizeGasModal.prototype.render = function () {
}, [t('revert')]),
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,
+ style: {
+ marginRight: '10px',
+ },
}, [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),
+ className: error && 'btn-primary--disabled',
}, [t('save')]),
]),
diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index 75f989e86..927d73482 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -63,12 +63,12 @@ AccountDetailsModal.prototype.render = function () {
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) }),
}, t('etherscanView')),
// Holding on redesign for Export Private Key functionality
- h('button.btn-clear.account-modal__button', {
+ h('button.btn-primary.account-modal__button', {
onClick: () => showExportPrivateKeyModal(),
}, t('exportPrivateKey')),
diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index b642513d7..2de1240fc 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -94,7 +94,7 @@ DepositEtherModal.prototype.renderRow = function ({
]),
!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,
}, [buttonLabel]),
]),
diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
index 017177cfd..cf42e4fa2 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -81,14 +81,14 @@ ExportPrivateKeyModal.prototype.renderButton = function (className, onClick, lab
ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address, hideModal) {
return h('div.export-private-key-buttons', {}, [
!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(),
'Cancel'
),
(privateKey
- ? this.renderButton('btn-clear 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', () => hideModal(), t('done'))
+ : this.renderButton('btn-primary--lg export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), t('confirm'))
),
])
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 3f8c17932..5729f893c 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -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,
disabled: !token,
onClick: () => this.onBuyWithShapeShift(),
diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js
index 7bf34e7b6..810a52e55 100644
--- a/ui/app/components/signature-request.js
+++ b/ui/app/components/signature-request.js
@@ -223,10 +223,10 @@ SignatureRequest.prototype.renderFooter = function () {
}
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,
}, t('cancel')),
- h('button.request-signature__footer__sign-button', {
+ h('button.btn-primary--lg', {
onClick: sign,
}, t('sign')),
])
diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
index 96d776270..bf2065106 100644
--- a/ui/app/components/tx-view.js
+++ b/ui/app/components/tx-view.js
@@ -69,13 +69,13 @@ TxView.prototype.renderButtons = function () {
return !selectedToken
? (
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({
name: 'DEPOSIT_ETHER',
}),
}, t('deposit')),
- h('button.btn-clear.hero-balance-button.allcaps', {
+ h('button.btn-primary.hero-balance-button', {
style: {
marginLeft: '0.8em',
},
@@ -85,7 +85,7 @@ TxView.prototype.renderButtons = function () {
)
: (
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,
}, t('send')),
])
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index 18452205c..2c6d7f784 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -168,7 +168,7 @@ WalletView.prototype.render = function () {
h(TokenList),
- h('button.btn-clear.wallet-view__add-token-button', {
+ h('button.btn-primary.wallet-view__add-token-button', {
onClick: () => {
showAddTokenPage()
hideSidebar()
diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss
index 13020f62f..bdf9da385 100644
--- a/ui/app/css/itcss/components/add-token.scss
+++ b/ui/app/css/itcss/components/add-token.scss
@@ -172,11 +172,8 @@
justify-content: center;
}
- &__button {
- flex: 1 0 141px;
- margin: 0 12px;
- padding: 10px 22px;
- height: 54px;
+ &__cancel-button {
+ margin-right: 1.2rem;
}
&__token-icons-container {
@@ -334,7 +331,7 @@
}
&__buttons {
- padding: 12px 0;
+ padding: 1rem;
margin: 0;
border-top: 1px solid $gallery;
width: 100%;
diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
index 8df8829f2..04e1ed96e 100644
--- a/ui/app/css/itcss/components/buttons.scss
+++ b/ui/app/css/itcss/components/buttons.scss
@@ -2,6 +2,76 @@
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 {
background-color: #02c9b1; // TODO: reusable color in colors.css
}
@@ -130,20 +200,6 @@ button.btn-thin {
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 {
border: 1px solid transparent;
border-radius: 2px;
diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss
index a3f051361..69cde8a0f 100644
--- a/ui/app/css/itcss/components/hero-balance.scss
+++ b/ui/app/css/itcss/components/hero-balance.scss
@@ -103,10 +103,11 @@
}
.hero-balance-button {
+ min-width: initial;
width: 6rem;
@media #{$sub-mid-size-breakpoint-range} {
- padding: 0.4rem;
+ padding: .4rem;
width: 4rem;
display: flex;
flex: 1;
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index a8d5e8dc2..9ae3ea7fa 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -261,7 +261,7 @@
.account-modal__button {
margin-top: 17px;
padding: 10px 22px;
- width: 235px;
+ width: 286px;
}
}
@@ -341,9 +341,8 @@
.export-private-key__button {
margin-top: 17px;
- padding: 10px 22px;
width: 141px;
- height: 54px;
+ min-width: initial;
}
.export-private-key__button--cancel {
@@ -765,15 +764,7 @@
}
&__deposit-button, .shapeshift-form__shapeshift-buy-btn {
- height: 54px;
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 {
diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss
index c2cefe4ad..aa7fed956 100644
--- a/ui/app/css/itcss/components/new-account.scss
+++ b/ui/app/css/itcss/components/new-account.scss
@@ -192,29 +192,8 @@
justify-content: space-between;
}
- &__button-cancel,
- &__button-create {
- height: 55px;
+ &__button {
width: 150px;
- border-radius: 2px;
- 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;
+ min-width: initial;
}
-
- &__button-create {
- border: 1px solid $curious-blue;
- color: $curious-blue;
- font-family: Roboto;
- font-size: 16px;
- line-height: 21px;
- text-align: center;
- }
-} \ No newline at end of file
+}
diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss
index d81099bfa..a4728afef 100644
--- a/ui/app/css/itcss/components/request-signature.scss
+++ b/ui/app/css/itcss/components/request-signature.scss
@@ -190,41 +190,19 @@
width: 100%;
display: flex;
align-items: center;
- justify-content: space-evenly;
+ justify-content: center;
font-size: 22px;
position: relative;
flex: 0 0 auto;
border-top: 1px solid $geyser;
+ padding: 1.6rem;
- &__cancel-button,
- &__sign-button {
- 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;
+ button {
+ width: 165px;
}
&__cancel-button {
- background: none;
- border: 1px solid $dusty-gray;
- margin-right: 6px;
- }
-
- &__sign-button {
- background-color: $caribbean-green;
- border-width: 0;
- color: $white;
- margin-left: 6px;
+ margin-right: 1.2rem;
}
}
-} \ No newline at end of file
+}
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index 263b362ca..89d2be891 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -782,7 +782,6 @@
&__buttons {
display: flex;
justify-content: space-between;
- width: 181.75px;
margin-right: 21.25px;
}
@@ -800,13 +799,8 @@
}
&__cancel, &__save, &__save__error {
- height: 34.64px;
width: 85.74px;
- border: 1px solid $dusty-gray;
- border-radius: 2px;
- font-family: 'DIN OT';
- font-size: 12px;
- color: $dusty-gray;
+ min-width: initial;
}
&__save__error {
diff --git a/ui/app/css/itcss/components/settings.scss b/ui/app/css/itcss/components/settings.scss
index d60ebd934..dcc9b98d5 100644
--- a/ui/app/css/itcss/components/settings.scss
+++ b/ui/app/css/itcss/components/settings.scss
@@ -130,24 +130,32 @@
cursor: pointer;
}
-.settings__clear-button {
- font-size: 16px;
- 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;
+.settings__button--red {
+ border-color: lighten($monzo, 10%);
color: $monzo;
+
+ &:active {
+ background: lighten($monzo, 55%);
+ border-color: $monzo;
+ }
+
+ &:hover {
+ border-color: $monzo;
+ }
}
-.settings__clear-button--orange {
- border: 1px solid rgba(247, 134, 28, 1);
- 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 {
diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss
index 08e639d74..92321394b 100644
--- a/ui/app/css/itcss/generic/index.scss
+++ b/ui/app/css/itcss/generic/index.scss
@@ -132,7 +132,7 @@ input.large-input {
height: 55px;
font-size: 1rem;
text-transform: uppercase;
- margin-right: 1rem;
+ margin-right: 1.2rem;
border-radius: 2px;
&:last-of-type {
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index 640fd95b8..0031238a8 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -51,6 +51,8 @@ $java: #29b6af;
$wild-strawberry: #ff4a8d;
$cornflower-blue: #7057ff;
$saffron: #f6c343;
+$zumthor: #edf7ff;
+$ecstasy: #f7861c;
/*
Z-Indicies
diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index de71ce94c..131d4f9ad 100644
--- a/ui/app/send-v2.js
+++ b/ui/app/send-v2.js
@@ -510,13 +510,13 @@ SendTransactionScreen.prototype.renderFooter = function () {
const noErrors = !amountError && toError === null
return h('div.page-container__footer', [
- h('button.btn-cancel.page-container__footer-button', {
+ h('button.btn-secondary--lg.page-container__footer-button', {
onClick: () => {
clearSend()
goHome()
},
}, t('cancel')),
- h('button.btn-clear.page-container__footer-button', {
+ h('button.btn-primary--lg.page-container__footer-button', {
disabled: !noErrors || !gasTotal || missingTokenBalance,
onClick: event => this.onSubmit(event),
}, t('next')),
diff --git a/ui/app/settings.js b/ui/app/settings.js
index 105cbb40b..78ca6c94b 100644
--- a/ui/app/settings.js
+++ b/ui/app/settings.js
@@ -200,7 +200,7 @@ class Settings extends Component {
]),
h('div.settings__content-item', [
h('div.settings__content-item-col', [
- h('button.settings__clear-button', {
+ h('button.btn-primary--lg.settings__button', {
onClick (event) {
window.logStateString((err, result) => {
if (err) {
@@ -225,7 +225,7 @@ class Settings extends Component {
h('div.settings__content-item', t('revealSeedWords')),
h('div.settings__content-item', [
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) {
event.preventDefault()
revealSeedConfirmation()
@@ -245,7 +245,7 @@ class Settings extends Component {
h('div.settings__content-item', t('useOldUI')),
h('div.settings__content-item', [
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) {
event.preventDefault()
setFeatureFlagToBeta()
@@ -264,7 +264,7 @@ class Settings extends Component {
h('div.settings__content-item', t('resetAccount')),
h('div.settings__content-item', [
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) {
event.preventDefault()
showResetAccountConfirmationModal()