mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Patch 2 account details modal (#1957)
* Account details modal styling changes. * Tweaking styles.
This commit is contained in:
parent
5b62f10a5f
commit
744b78e9c8
@ -20,7 +20,7 @@ IdenticonComponent.prototype.render = function () {
|
|||||||
var props = this.props
|
var props = this.props
|
||||||
var diameter = props.diameter || this.defaultDiameter
|
var diameter = props.diameter || this.defaultDiameter
|
||||||
return (
|
return (
|
||||||
h('div', {
|
h('div.identicon', {
|
||||||
key: 'identicon-' + this.props.address,
|
key: 'identicon-' + this.props.address,
|
||||||
style: {
|
style: {
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
|
@ -33,6 +33,9 @@ function AccountDetailsModal () {
|
|||||||
|
|
||||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal)
|
module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal)
|
||||||
|
|
||||||
|
// Not yet pixel perfect todos:
|
||||||
|
// fonts of qr-header and close button
|
||||||
|
|
||||||
AccountDetailsModal.prototype.render = function () {
|
AccountDetailsModal.prototype.render = function () {
|
||||||
const { selectedIdentity, selectedAddress, network } = this.props
|
const { selectedIdentity, selectedAddress, network } = this.props
|
||||||
|
|
||||||
@ -42,6 +45,7 @@ AccountDetailsModal.prototype.render = function () {
|
|||||||
|
|
||||||
h('div', {}, [
|
h('div', {}, [
|
||||||
|
|
||||||
|
// Needs a border; requires changes to svg
|
||||||
h(
|
h(
|
||||||
Identicon,
|
Identicon,
|
||||||
{
|
{
|
||||||
@ -53,12 +57,7 @@ AccountDetailsModal.prototype.render = function () {
|
|||||||
|
|
||||||
]),
|
]),
|
||||||
|
|
||||||
h('div', {}, [
|
h('div.account-details-modal-close', {}),
|
||||||
'X',
|
|
||||||
]),
|
|
||||||
|
|
||||||
h('div', {}, [
|
|
||||||
]),
|
|
||||||
|
|
||||||
h(QrView, {
|
h(QrView, {
|
||||||
Qr: {
|
Qr: {
|
||||||
@ -67,10 +66,6 @@ AccountDetailsModal.prototype.render = function () {
|
|||||||
}
|
}
|
||||||
}, []),
|
}, []),
|
||||||
|
|
||||||
h('div', {}, [
|
|
||||||
'Account Display',
|
|
||||||
]),
|
|
||||||
|
|
||||||
// divider
|
// divider
|
||||||
h('div.account-details-modal-divider', {
|
h('div.account-details-modal-divider', {
|
||||||
style: {}
|
style: {}
|
||||||
|
@ -52,12 +52,12 @@ const MODALS = {
|
|||||||
],
|
],
|
||||||
mobileModalStyle: {
|
mobileModalStyle: {
|
||||||
width: '95%',
|
width: '95%',
|
||||||
top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
|
top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
|
||||||
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
|
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
|
||||||
},
|
},
|
||||||
laptopModalStyle: {
|
laptopModalStyle: {
|
||||||
width: '360px',
|
width: '360px',
|
||||||
top: 'calc(30% + 10px)',
|
top: 'calc(33% + 45px)',
|
||||||
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
|
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -41,16 +41,13 @@ QrCodeView.prototype.render = function () {
|
|||||||
},
|
},
|
||||||
this.props.warning) : null,
|
this.props.warning) : null,
|
||||||
|
|
||||||
h('.div', {
|
h('.div.qr-wrapper', {
|
||||||
style: {
|
style: {},
|
||||||
marginTop: '25px',
|
|
||||||
marginBottom: '15px',
|
|
||||||
},
|
|
||||||
dangerouslySetInnerHTML: {
|
dangerouslySetInnerHTML: {
|
||||||
__html: qrImage.createTableTag(4),
|
__html: qrImage.createTableTag(4),
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
h('.div', [
|
h('.div.ellip-address-wrapper', [
|
||||||
h('span.qr-ellip-address', {
|
h('span.qr-ellip-address', {
|
||||||
style: {
|
style: {
|
||||||
width: '247px',
|
width: '247px',
|
||||||
|
@ -172,6 +172,37 @@
|
|||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
padding: 5px 0px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-details-modal-wrapper .qr-header {
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-details-modal-wrapper .qr-wrapper {
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-details-modal-wrapper .ellip-address-wrapper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
border: 1px solid $alto;
|
||||||
|
padding: 5px 10px 5px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-details-modal-wrapper .btn-clear {
|
||||||
|
min-height: 28px;
|
||||||
|
font-size: 1em;
|
||||||
|
border-color: #2f9ae0;
|
||||||
|
color: #2f9ae0;
|
||||||
|
padding: 0px;
|
||||||
|
border-radius: 2px;
|
||||||
|
flex-basis: 100%;
|
||||||
|
width: 75%;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.account-details-modal-divider {
|
.account-details-modal-divider {
|
||||||
@ -181,6 +212,19 @@
|
|||||||
background-color: $alto;
|
background-color: $alto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.account-details-modal-wrapper .identicon {
|
||||||
|
margin-top: -55.5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-details-modal-close:after {
|
||||||
|
content: '\00D7';
|
||||||
|
font-size: 1.5em;
|
||||||
|
color: grey;
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
// New Account Modal
|
// New Account Modal
|
||||||
.new-account-modal-wrapper {
|
.new-account-modal-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user