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

Update styling for buttons, font weights

Browse Source
This commit is contained in:
Alexander Tseung 2018-01-11 16:30:07 -08:00
parent 208e94d3bf
commit 376e136572
16 changed files with 84 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -79,11 +79,15 @@ 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-clear btn-cancel', () => hideModal(), 'Cancel'),
!privateKey && this.renderButton(
'btn-cancel export-private-key__button export-private-key__button--cancel',
() => hideModal(),
'Cancel'
),
(privateKey
? this.renderButton('btn-clear', () => hideModal(), 'Done')
: this.renderButton('btn-clear', () => this.exportAccountAndGetPrivateKey(this.state.password, address), 'Show')
? this.renderButton('btn-clear export-private-key__button', () => hideModal(), 'Done')
: this.renderButton('btn-clear export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), 'Confirm')
),
])

4
ui/app/components/pending-tx/confirm-send-ether.js
View File

@ -219,7 +219,7 @@ ConfirmSendEther.prototype.render = function () {
// Main Send token Card
h('div.confirm-screen-wrapper.flex-column.flex-grow', [
h('h3.flex-center.confirm-screen-header', [
h('button.confirm-screen-back-button', {
h('button.btn-clear.confirm-screen-back-button', {
onClick: () => editTransaction(txMeta),
}, 'EDIT'),
h('div.confirm-screen-title', 'Confirm Transaction'),
@ -422,7 +422,7 @@ ConfirmSendEther.prototype.onSubmit = function (event) {
ConfirmSendEther.prototype.cancel = function (event, txMeta) {
event.preventDefault()
const { cancelTransaction } = this.props
cancelTransaction(txMeta)
}

4
ui/app/components/pending-tx/confirm-send-token.js
View File

@ -314,7 +314,7 @@ ConfirmSendToken.prototype.render = function () {
// Main Send token Card
h('div.confirm-screen-wrapper.flex-column.flex-grow', [
h('h3.flex-center.confirm-screen-header', [
h('button.confirm-screen-back-button', {
h('button.btn-clear.confirm-screen-back-button', {
onClick: () => editTransaction(txMeta),
}, 'EDIT'),
h('div.confirm-screen-title', 'Confirm Transaction'),
@ -415,7 +415,7 @@ ConfirmSendToken.prototype.onSubmit = function (event) {
ConfirmSendToken.prototype.cancel = function (event, txMeta) {
event.preventDefault()
const { cancelTransaction } = this.props
cancelTransaction(txMeta)
}

6
ui/app/components/tx-view.js
View File

@ -68,13 +68,13 @@ TxView.prototype.renderButtons = function () {
return !selectedToken
? (
h('div.flex-row.flex-center.hero-balance-buttons', [
h('button.hero-balance-button', {
h('button.btn-clear.hero-balance-button', {
onClick: () => showModal({
name: 'BUY',
}),
}, 'DEPOSIT'),
h('button.hero-balance-button', {
h('button.btn-clear.hero-balance-button', {
style: {
marginLeft: '0.8em',
},
@ -84,7 +84,7 @@ TxView.prototype.renderButtons = function () {
)
: (
h('div.flex-row.flex-center.hero-balance-buttons', [
h('button.hero-balance-button', {
h('button.btn-clear.hero-balance-button', {
onClick: showSendTokenPage,
}, 'SEND'),
])

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

@ -130,7 +130,7 @@ WalletView.prototype.render = function () {
selectedIdentity.name,
]),
h('button.wallet-view__details-button', 'DETAILS'),
h('button.btn-clear.wallet-view__details-button', 'DETAILS'),
]),
]),
@ -151,7 +151,7 @@ WalletView.prototype.render = function () {
h(TokenList),
h('button.wallet-view__add-token-button', {
h('button.btn-clear.wallet-view__add-token-button', {
onClick: () => {
showAddTokenPage()
hideSidebar()

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

@ -6,9 +6,43 @@
background-color: #02c9b1; // TODO: reusable color in colors.css
}
button.btn-clear {
.btn-clear {
background: $white;
border: 1px solid;
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;
&:hover {
border-color: $scorpion;
}
}
// No longer used in flat design, remove when modal buttons done

9
ui/app/css/itcss/components/confirm.scss
View File

@ -102,15 +102,10 @@
.confirm-screen-back-button {
background: transparent;
border: 1px solid $curious-blue;
left: 24px;
position: absolute;
text-align: center;
color: $curious-blue;
padding: 6px 13px 7px 12px;
border-radius: 2px;
height: 30px;
width: 54px;
padding: 6px 12px;
font-size: .7rem;
@media screen and (max-width: $break-small) {
margin-right: 12px;

31
ui/app/css/itcss/components/hero-balance.scss
View File

@ -37,6 +37,7 @@
}
.balance-display {
color: $black;
@media screen and (max-width: $break-small) {
text-align: center;
@ -44,7 +45,6 @@
.token-amount {
font-size: 1.75rem;
margin-top: 1rem;
font-weight: 400;
}
.fiat-amount {
@ -61,7 +61,6 @@
.token-amount {
font-size: 1.5rem;
font-weight: 400;
}
.fiat-amount {
@ -84,37 +83,9 @@
flex-grow: 2;
justify-content: flex-end;
}
button.btn-clear {
background: $white;
border: 1px solid;
border-radius: 2px;
font-size: 12px;
@media screen and (max-width: $break-small) {
border-color: $curious-blue;
color: $curious-blue;
height: 36px;
}
@media screen and (min-width: $break-large) {
border-color: $curious-blue;
color: $curious-blue;
padding: 0;
width: 85px;
height: 34px;
}
}
}
}
.hero-balance-button {
text-align: center;
padding: .9rem 1rem;
color: $white;
background: $curious-blue;
border-radius: 2px;
font-size: .85rem;
width: 6rem;
font-weight: 300;
}

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

@ -258,19 +258,10 @@
width: 286px;
}
.btn-clear {
min-height: 28px;
font-size: 14px;
border-color: $curious-blue;
color: $curious-blue;
border-radius: 2px;
flex-basis: 100%;
width: 75%;
.account-modal__button {
margin-top: 17px;
padding: 10px 22px;
height: 44px;
width: 235px;
font-family: Roboto;
}
}
@ -346,17 +337,17 @@
display: flex;
flex-direction: row;
justify-content: center;
}
.btn-clear {
width: 141px;
height: 54px;
}
.export-private-key__button {
margin-top: 17px;
padding: 10px 22px;
width: 141px;
height: 54px;
}
.btn-cancel {
margin-right: 15px;
border-color: $dusty-gray;
color: $scorpion;
}
.export-private-key__button--cancel {
margin-right: 15px;
}
.private-key-password-display-wrapper {

27
ui/app/css/itcss/components/newui-sections.scss
View File

@ -79,10 +79,7 @@ $wallet-view-bg: $alabaster;
}
&__details-button {
color: $curious-blue;
font-size: 10px;
text-align: center;
border: 1px solid $curious-blue;
border-radius: 17px;
background-color: transparent;
margin: 0 auto;
@ -120,16 +117,14 @@ $wallet-view-bg: $alabaster;
&__add-token-button {
flex: 0 0 auto;
color: $curious-blue;
font-size: 14px;
line-height: 19px;
text-align: center;
margin: 36px auto;
border: 1px solid $curious-blue;
border-radius: 2px;
font-weight: 300;
background: none;
padding: 9px 30px;
padding: .7rem 2rem;
transition: border-color .3s ease;
&:hover {
border-color: $curious-blue;
}
}
}
@ -238,20 +233,12 @@ $wallet-view-bg: $alabaster;
overflow-y: auto;
background-color: $white;
}
button.btn-clear {
width: 93px;
height: 50px;
font-size: .7em;
background: $white;
border: 1px solid;
}
}
// wallet view
.account-name {
font-size: 24px;
font-weight: 400;
font-weight: 300;
line-height: 20px;
color: $black;
margin-top: 8px;

36
ui/app/css/itcss/components/send.scss
View File

@ -526,8 +526,9 @@
}
&__form {
margin: 13px 0;
padding: 13px 0;
width: 100%;
overflow-y: auto;
@media screen and (max-width: $break-small) {
padding: 13px 0;
@ -587,7 +588,7 @@
width: 100%;
height: 100%;
}
&__list {
z-index: 1050;
position: absolute;
@ -677,38 +678,13 @@
border-top: 1px solid $alto;
background: $white;
padding: 0 12px;
flex-shrink: 0;
}
&__next-btn,
&__cancel-btn,
&__next-btn__disabled {
width: 163px;
text-align: center;
height: 55px;
border-radius: 2px;
background-color: $white;
font-family: Roboto;
font-size: 16px;
font-weight: 300;
line-height: 21px;
border: 1px solid;
margin: 0 4px;
}
&__next-btn,
&__next-btn__disabled {
color: $curious-blue;
border-color: $curious-blue;
}
&__next-btn__disabled {
opacity: .5;
cursor: auto;
}
&__cancel-btn {
color: $dusty-gray;
border-color: $dusty-gray;
width: 163px;
margin: 0 4px;
}
&__customize-gas {

1
ui/app/css/itcss/components/token-list.scss
View File

@ -13,7 +13,6 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
&__token-balance {
font-size: 1.5rem;
font-weight: 400;
@media #{$wallet-balance-breakpoint-range} {
font-size: 105%;

1
ui/app/css/itcss/components/wallet-balance.scss
View File

@ -43,7 +43,6 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
.token-amount {
font-size: 1.5rem;
font-weight: 400;
}
.fiat-amount {

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

@ -43,6 +43,7 @@ $athens-grey: #e9edf0;
$jaffa: #f28930;
$geyser: #d2d8dd;
$manatee: #93949d;
$spindle: #c7ddec;
/*
Z-Indicies

5
ui/app/send-v2.js
View File

@ -519,13 +519,14 @@ SendTransactionScreen.prototype.renderFooter = function () {
const errorClass = noErrors ? '' : '__disabled'
return h('div.send-v2__footer', [
h('button.send-v2__cancel-btn', {
h('button.btn-cancel.send-v2__cancel-btn', {
onClick: () => {
clearSend()
goHome()
},
}, 'Cancel'),
h(`button.send-v2__next-btn${errorClass}`, {
h('button.btn-clear.send-v2__next-btn', {
disabled: !noErrors,
onClick: event => this.onSubmit(event),
}, 'Next'),
])