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

Style send token screen

This commit is contained in:
Chi Kei Chan 2017-09-11 00:45:06 -07:00
parent 395e8bfce0
commit 663cb758b3
7 changed files with 57 additions and 31 deletions

View File

@ -232,6 +232,8 @@ class AccountDropdowns extends Component {
const dropdownMenuItemStyle = { const dropdownMenuItemStyle = {
fontFamily: 'DIN OT', fontFamily: 'DIN OT',
fontSize: 16, fontSize: 16,
lineHeight: '24px',
padding: '8px',
} }
return h( return h(
@ -347,15 +349,9 @@ class AccountDropdowns extends Component {
[ [
enableAccountsSelector && h( enableAccountsSelector && h(
'i.fa.fa-angle-down', 'i.fa.fa-angle-down',
// 'div.cursor-pointer.color-orange.accounts-selector',
{ {
style: { style: {
// fontSize: '135%', cursor: 'pointer',
// background: 'url(images/switch_acc.svg) white center center no-repeat',
// height: '25px',
// width: '25px',
// transform: 'scale(0.75)',
// marginRight: '3px',
}, },
onClick: (event) => { onClick: (event) => {
event.stopPropagation() event.stopPropagation()
@ -372,6 +368,7 @@ class AccountDropdowns extends Component {
{ {
style: { style: {
fontSize: '135%', fontSize: '135%',
cursor: 'pointer',
}, },
onClick: (event) => { onClick: (event) => {
event.stopPropagation() event.stopPropagation()

View File

@ -40,7 +40,11 @@ class Dropdown extends Component {
h( h(
'style', 'style',
` `
li.dropdown-menu-item:hover { color:rgb(225, 225, 225); } li.dropdown-menu-item:hover {
color:rgb(225, 225, 225);
background-color: rgba(255, 255, 255, 0.05);
border-radius: 4px;
}
li.dropdown-menu-item { color: rgb(185, 185, 185); } li.dropdown-menu-item { color: rgb(185, 185, 185); }
` `
), ),

View File

@ -49,6 +49,7 @@ InputNumber.prototype.render = function () {
onClick: () => this.setValue(value + step), onClick: () => this.setValue(value + step),
}), }),
h('i.fa.fa-angle-down', { h('i.fa.fa-angle-down', {
style: { cursor: 'pointer' },
onClick: () => this.setValue(value - step), onClick: () => this.setValue(value - step),
}), }),
]), ]),

View File

@ -39,21 +39,17 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModa
AccountDetailsModal.prototype.render = function () { AccountDetailsModal.prototype.render = function () {
const { selectedIdentity, network } = this.props const { selectedIdentity, network } = this.props
return h('div', {}, [ return h('div', { style: { borderRadius: '4px' }}, [
h('div.account-details-modal-wrapper', { h('div.account-details-modal-wrapper', [
}, [
h('div', {}, [ h('div', [
// Needs a border; requires changes to svg // Needs a border; requires changes to svg
h( h(Identicon, {
Identicon, address: selectedIdentity.address,
{ diameter: 64,
address: selectedIdentity.address, style: {},
diameter: 64, }),
style: {},
},
),
]), ]),
@ -66,26 +62,20 @@ AccountDetailsModal.prototype.render = function () {
message: this.props.selectedIdentity.name, message: this.props.selectedIdentity.name,
data: this.props.selectedIdentity.address, data: this.props.selectedIdentity.address,
}, },
}, []), }),
// divider // divider
h('div.account-details-modal-divider', { h('div.account-details-modal-divider'),
style: {},
}, []),
h('button.btn-clear', { h('button.btn-clear', {
onClick: () => { onClick: () => {
const url = genAccountLink(selectedIdentity.address, network) const url = genAccountLink(selectedIdentity.address, network)
global.platform.openWindow({ url }) global.platform.openWindow({ url })
}, },
}, [ }, [ 'View account on Etherscan' ]),
'View account on Etherscan',
]),
// Holding on redesign for Export Private Key functionality // Holding on redesign for Export Private Key functionality
h('button.btn-clear', {}, [ h('button.btn-clear', [ 'Export private key' ]),
'Export private key',
]),
]), ]),
]) ])

View File

@ -62,6 +62,9 @@ const MODALS = {
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
borderRadius: '4px', borderRadius: '4px',
}, },
contentStyle: {
borderRadius: '4px',
}
}, },
NEW_ACCOUNT: { NEW_ACCOUNT: {
@ -117,6 +120,7 @@ Modal.prototype.render = function () {
const children = modal.contents const children = modal.contents
const modalStyle = modal[isMobileView() ? 'mobileModalStyle' : 'laptopModalStyle'] const modalStyle = modal[isMobileView() ? 'mobileModalStyle' : 'laptopModalStyle']
const contentStyle = modal.contentStyle || {};
return h(FadeModal, return h(FadeModal,
{ {
@ -127,6 +131,7 @@ Modal.prototype.render = function () {
this.modalRef = ref this.modalRef = ref
}, },
modalStyle, modalStyle,
contentStyle,
backdropStyle: BACKDROPSTYLE, backdropStyle: BACKDROPSTYLE,
}, },
children, children,

View File

@ -180,6 +180,10 @@
border: 1px solid $silver; border: 1px solid $silver;
border-radius: 4px; border-radius: 4px;
font-family: 'Montserrat UltraLight'; font-family: 'Montserrat UltraLight';
button {
cursor: pointer;
}
} }
.account-details-modal-wrapper .qr-header { .account-details-modal-wrapper .qr-header {
@ -231,7 +235,12 @@
} }
.account-details-modal-wrapper .identicon { .account-details-modal-wrapper .identicon {
margin-top: -55.5%; position: relative;
left: 0;
right: 0;
margin: 0 auto;
top: -32px;
margin-bottom: -32px;
} }
.account-details-modal-close::after { .account-details-modal-close::after {
@ -241,6 +250,7 @@
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 12px; right: 12px;
cursor: pointer;
} }
// New Account Modal // New Account Modal

View File

@ -243,4 +243,23 @@
line-height: 40px; line-height: 40px;
margin-top: 13px; margin-top: 13px;
} }
.send-screen-input-wrapper {
.fa-bolt {
padding-right: 4px;
}
.large-input {
border: 1px solid $dusty-gray;
border-radius: 4px;
margin: 4px 0 20px;
font-size: 16px;
line-height: 22.4px;
font-family: "DIN OT";
}
.send-screen-gas-input {
border: 1px solid transparent;
}
}
} }