diff options
Diffstat (limited to 'ui/app')
| -rw-r--r-- | ui/app/components/modals/account-details-modal.js | 45 | ||||
| -rw-r--r-- | ui/app/components/modals/account-modal-container.js | 55 | ||||
| -rw-r--r-- | ui/app/components/qr-code.js | 2 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/modal.scss | 57 |
4 files changed, 96 insertions, 63 deletions
diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js index ec7e4b500..6c2eba7bd 100644 --- a/ui/app/components/modals/account-details-modal.js +++ b/ui/app/components/modals/account-details-modal.js @@ -3,25 +3,21 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect const actions = require('../../actions') +const AccountModalContainer = require('./account-modal-container') const { getSelectedIdentity, getSelectedAddress } = require('../../selectors') const genAccountLink = require('../../../lib/account-link.js') -const Identicon = require('../identicon') const QrView = require('../qr-code') function mapStateToProps (state) { return { network: state.metamask.network, - address: state.metamask.selectedAddress, - selectedAddress: getSelectedAddress(state), selectedIdentity: getSelectedIdentity(state), } } function mapDispatchToProps (dispatch) { return { - hideModal: () => { - dispatch(actions.hideModal()) - }, + // Is this supposed to be used somewhere? showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)), } } @@ -34,49 +30,28 @@ function AccountDetailsModal () { module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal) // Not yet pixel perfect todos: - // fonts of qr-header and close button + // fonts of qr-header AccountDetailsModal.prototype.render = function () { const { selectedIdentity, network } = this.props + const { name, address } = selectedIdentity - return h('div', { style: { borderRadius: '4px' }}, [ - h('div.account-details-modal-wrapper', [ - - h('div', [ - - // Needs a border; requires changes to svg - h(Identicon, { - address: selectedIdentity.address, - diameter: 64, - style: {}, - }), - - ]), - - h('div.account-details-modal-close', { - onClick: this.props.hideModal, - }), - + return h(AccountModalContainer, {}, [ h(QrView, { Qr: { - message: this.props.selectedIdentity.name, - data: this.props.selectedIdentity.address, + message: name, + data: address, }, }), - // divider - h('div.account-details-modal-divider'), + h('div.account-modal-divider'), h('button.btn-clear', { - onClick: () => { - const url = genAccountLink(selectedIdentity.address, network) - global.platform.openWindow({ url }) - }, + onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }), }, [ 'View account on Etherscan' ]), // Holding on redesign for Export Private Key functionality h('button.btn-clear', [ 'Export private key' ]), - - ]), + ]) } diff --git a/ui/app/components/modals/account-modal-container.js b/ui/app/components/modals/account-modal-container.js new file mode 100644 index 000000000..69650ca15 --- /dev/null +++ b/ui/app/components/modals/account-modal-container.js @@ -0,0 +1,55 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const connect = require('react-redux').connect +const actions = require('../../actions') +const { getSelectedIdentity } = require('../../selectors') +const Identicon = require('../identicon') + +function mapStateToProps (state) { + return { + selectedIdentity: getSelectedIdentity(state), + } +} + +function mapDispatchToProps (dispatch) { + return { + hideModal: () => { + dispatch(actions.hideModal()) + }, + } +} + +inherits(AccountModalContainer, Component) +function AccountModalContainer () { + Component.call(this) +} + +module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountModalContainer) + +AccountModalContainer.prototype.render = function () { + const { selectedIdentity, children } = this.props + console.log(`children`, children); + return h('div', { style: { borderRadius: '4px' }}, [ + h('div.account-modal-container', [ + + h('div', [ + + // Needs a border; requires changes to svg + h(Identicon, { + address: selectedIdentity.address, + diameter: 64, + style: {}, + }), + + ]), + + h('div.account-modal-close', { + onClick: this.props.hideModal, + }), + + ...children, + + ]), + ]) +} diff --git a/ui/app/components/qr-code.js b/ui/app/components/qr-code.js index 4257c1a15..dca5c8c47 100644 --- a/ui/app/components/qr-code.js +++ b/ui/app/components/qr-code.js @@ -52,7 +52,7 @@ QrCodeView.prototype.render = function () { width: '247px', }, value: Qr.data, - readonly: true, + readOnly: true, }), // h(CopyButton, { // value: Qr.data, diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index c85e61ae2..9f6ce54f5 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -175,8 +175,8 @@ font-size: 18px; } -// Account Details Modal -.account-details-modal-wrapper { +// Account Modal Container +.account-modal-container { display: flex; flex-direction: column; justify-content: flex-start; @@ -192,16 +192,38 @@ } } -.account-details-modal-wrapper .qr-header { +.account-modal-close::after { + content: '\00D7'; + font-size: 40px; + color: $dusty-gray; + position: absolute; + top: 10px; + right: 12px; + cursor: pointer; +} + +.account-modal-container .identicon { + position: relative; + left: 0; + right: 0; + margin: 0 auto; + top: -32px; + margin-bottom: -32px; +} + + +// Account Details Modal + +.account-modal-container .qr-header { margin-top: 9px; font-size: 20px; } -.account-details-modal-wrapper .qr-wrapper { +.account-modal-container .qr-wrapper { margin-top: 5px; } -.account-details-modal-wrapper .ellip-address-wrapper { +.account-modal-container .ellip-address-wrapper { display: flex; justify-content: center; border: 1px solid $alto; @@ -211,14 +233,14 @@ width: 286px; } -.account-details-modal-wrapper .qr-ellip-address { +.account-modal-container .qr-ellip-address { width: 254px; border: none; font-family: 'Montserrat Light'; font-size: 14px; } -.account-details-modal-wrapper .btn-clear { +.account-modal-container .btn-clear { min-height: 28px; font-size: 14px; border-color: $curious-blue; @@ -233,32 +255,13 @@ font-family: 'Montserrat Light'; } -.account-details-modal-divider { +.account-modal-divider { width: 100%; height: 1px; margin: 19px 0 8px 0; background-color: $alto; } -.account-details-modal-wrapper .identicon { - position: relative; - left: 0; - right: 0; - margin: 0 auto; - top: -32px; - margin-bottom: -32px; -} - -.account-details-modal-close::after { - content: '\00D7'; - font-size: 40px; - color: $dusty-gray; - position: absolute; - top: 10px; - right: 12px; - cursor: pointer; -} - // New Account Modal .new-account-modal-wrapper { display: flex; |