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

Hook up identicon and buttons to AccountDetailsModal, clean up colors

This commit is contained in:
sdtsui 2017-08-21 12:26:36 -07:00
parent 877faaf096
commit 27b75b67b4
8 changed files with 37 additions and 39 deletions

View File

@ -4,13 +4,15 @@ const inherits = require('util').inherits
const connect = require('react-redux').connect const connect = require('react-redux').connect
const actions = require('../../actions') const actions = require('../../actions')
const { getSelectedIdentity, getSelectedAddress } = require('../../selectors') const { getSelectedIdentity, getSelectedAddress } = require('../../selectors')
const genAccountLink = require('../../../lib/account-link.js')
const Identicon = require('../identicon')
const QrView = require('../qr-code') const QrView = require('../qr-code')
function mapStateToProps (state) { function mapStateToProps (state) {
return { return {
network: state.metamask.network,
address: state.metamask.selectedAddress, address: state.metamask.selectedAddress,
// selectedAddress: getSelectedAddress(state), selectedAddress: getSelectedAddress(state),
selectedIdentity: getSelectedIdentity(state), selectedIdentity: getSelectedIdentity(state),
} }
} }
@ -31,18 +33,24 @@ function AccountDetailsModal () {
module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal) module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal)
// AccountDetailsModal is currently meant to be rendered inside <Modal />
// It is the only component in this codebase that does so
// It utilizes modal styles
AccountDetailsModal.prototype.render = function () { AccountDetailsModal.prototype.render = function () {
const { selectedIdentity } = this.props const { selectedIdentity, selectedAddress, network } = this.props
return h('div', {}, [ return h('div', {}, [
h('div.account-details-modal-wrapper', { h('div.account-details-modal-wrapper', {
}, [ }, [
h('div', {}, [ h('div', {}, [
'ICON',
h(
Identicon,
{
address: selectedIdentity.address,
diameter: 64,
style: {},
},
),
]), ]),
h('div', {}, [ h('div', {}, [
@ -64,21 +72,22 @@ AccountDetailsModal.prototype.render = function () {
]), ]),
// divider // divider
h('div', { h('div.account-details-modal-divider', {
style: { style: {}
width: '100%',
height: '1px',
margin: '10px 0px',
backgroundColor: '#D8D8D8',
}
}, []), }, []),
h('div', {}, [ h('button.btn-clear', {
'View aCcount on etherscan', onClick: () => {
const url = genAccountLink(selectedIdentity.address, network)
global.platform.openWindow({ url })
},
}, [
'View account on Etherscan',
]), ]),
h('div', {}, [ // Holding on redesign for Export Private Key functionality
'export private key', h('button.btn-clear', {}, [
'Export private key',
]), ]),
]) ])

View File

@ -29,9 +29,6 @@ function BuyOptions () {
module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions) module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions)
// BuyOptions is currently meant to be rendered inside <Modal />
// It is the only component in this codebase that does so
// It utilizes modal styles
BuyOptions.prototype.render = function () { BuyOptions.prototype.render = function () {
return h('div', {}, [ return h('div', {}, [
h('div.buy-modal-content.transfers-subview', { h('div.buy-modal-content.transfers-subview', {

View File

@ -33,9 +33,6 @@ function EditAccountNameModal () {
module.exports = connect(mapStateToProps, mapDispatchToProps)(EditAccountNameModal) module.exports = connect(mapStateToProps, mapDispatchToProps)(EditAccountNameModal)
// EditAccountNameModal is currently meant to be rendered inside <Modal />
// It is the only component in this codebase that does so
// It utilizes modal styles
EditAccountNameModal.prototype.render = function () { EditAccountNameModal.prototype.render = function () {
const { hideModal, saveAccountLabel, identity } = this.props const { hideModal, saveAccountLabel, identity } = this.props

View File

@ -30,22 +30,13 @@ QrCodeView.prototype.render = function () {
qrImage.addData(address) qrImage.addData(address)
qrImage.make() qrImage.make()
return h('.div.flex-column.flex-center', { return h('.div.flex-column.flex-center', {
// key: 'qr',
style: { style: {
// justifyContent: 'center',
// paddingBottom: '45px',
// paddingLeft: '45px',
// paddingRight: '45px',
// alignItems: 'center',
}, },
}, [ }, [
Array.isArray(Qr.message) ? h('.message-container', this.renderMultiMessage()) : h('.qr-header', Qr.message), Array.isArray(Qr.message) ? h('.message-container', this.renderMultiMessage()) : h('.qr-header', Qr.message),
this.props.warning ? this.props.warning && h('span.error.flex-center', { this.props.warning ? this.props.warning && h('span.error.flex-center', {
style: { style: {
// textAlign: 'center',
// width: '229px',
// height: '82px',
}, },
}, },
this.props.warning) : null, this.props.warning) : null,

View File

@ -46,7 +46,7 @@ WalletContentDisplay.prototype.render = function () {
marginLeft: '-1.3em', marginLeft: '-1.3em',
height: '6em', height: '6em',
width: '0.3em', width: '0.3em',
background: '#D8D8D8', // TODO: add to resuable colors background: '#D8D8D8', // $alto
} }
}, [ }, [
]) ])

View File

@ -174,6 +174,13 @@
position: relative; position: relative;
} }
.account-details-modal-divider {
width: 100%;
height: 1px;
margin: 10px 0px;
background-color: $alto;
}
// New Account Modal // New Account Modal
.new-account-modal-wrapper { .new-account-modal-wrapper {
display: flex; display: flex;

View File

@ -460,10 +460,6 @@ textarea.twelve-word-phrase {
.qr-ellip-address { .qr-ellip-address {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
// width: 5em;
// font-size: 14px;
// font-family: "Montserrat Light";
// margin-left: 5px;
} }
.qr-header { .qr-header {

View File

@ -10,6 +10,7 @@ $red: #f00;
/* /*
Colors Colors
http://chir.ag/projects/name-that-color
*/ */
$white-linen: #faf6f0; // formerly 'faint orange (textfield shades)' $white-linen: #faf6f0; // formerly 'faint orange (textfield shades)'
$rajah: #f5c26d; // formerly 'light orange (button shades)' $rajah: #f5c26d; // formerly 'light orange (button shades)'