From 663cb758b345d7138b9e9c68489e1859dbfaa78e Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Mon, 11 Sep 2017 00:45:06 -0700 Subject: Style send token screen --- .../dropdowns/components/account-dropdowns.js | 11 +++---- ui/app/components/dropdowns/components/dropdown.js | 6 +++- ui/app/components/input-number.js | 1 + ui/app/components/modals/account-details-modal.js | 34 ++++++++-------------- ui/app/components/modals/modal.js | 5 ++++ ui/app/css/itcss/components/modal.scss | 12 +++++++- ui/app/css/itcss/components/send.scss | 19 ++++++++++++ 7 files changed, 57 insertions(+), 31 deletions(-) diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index 1961a61b5..48354ff94 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -232,6 +232,8 @@ class AccountDropdowns extends Component { const dropdownMenuItemStyle = { fontFamily: 'DIN OT', fontSize: 16, + lineHeight: '24px', + padding: '8px', } return h( @@ -347,15 +349,9 @@ class AccountDropdowns extends Component { [ enableAccountsSelector && h( 'i.fa.fa-angle-down', - // 'div.cursor-pointer.color-orange.accounts-selector', { style: { - // fontSize: '135%', - // background: 'url(images/switch_acc.svg) white center center no-repeat', - // height: '25px', - // width: '25px', - // transform: 'scale(0.75)', - // marginRight: '3px', + cursor: 'pointer', }, onClick: (event) => { event.stopPropagation() @@ -372,6 +368,7 @@ class AccountDropdowns extends Component { { style: { fontSize: '135%', + cursor: 'pointer', }, onClick: (event) => { event.stopPropagation() diff --git a/ui/app/components/dropdowns/components/dropdown.js b/ui/app/components/dropdowns/components/dropdown.js index c4b2c2550..991c89cb8 100644 --- a/ui/app/components/dropdowns/components/dropdown.js +++ b/ui/app/components/dropdowns/components/dropdown.js @@ -40,7 +40,11 @@ class Dropdown extends Component { h( '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); } ` ), diff --git a/ui/app/components/input-number.js b/ui/app/components/input-number.js index e3bbaf380..63e841288 100644 --- a/ui/app/components/input-number.js +++ b/ui/app/components/input-number.js @@ -49,6 +49,7 @@ InputNumber.prototype.render = function () { onClick: () => this.setValue(value + step), }), h('i.fa.fa-angle-down', { + style: { cursor: 'pointer' }, onClick: () => this.setValue(value - step), }), ]), diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js index 838000fed..ec7e4b500 100644 --- a/ui/app/components/modals/account-details-modal.js +++ b/ui/app/components/modals/account-details-modal.js @@ -39,21 +39,17 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModa AccountDetailsModal.prototype.render = function () { const { selectedIdentity, network } = this.props - return h('div', {}, [ - h('div.account-details-modal-wrapper', { - }, [ + return h('div', { style: { borderRadius: '4px' }}, [ + h('div.account-details-modal-wrapper', [ - h('div', {}, [ + h('div', [ // Needs a border; requires changes to svg - h( - Identicon, - { - address: selectedIdentity.address, - diameter: 64, - style: {}, - }, - ), + h(Identicon, { + address: selectedIdentity.address, + diameter: 64, + style: {}, + }), ]), @@ -66,26 +62,20 @@ AccountDetailsModal.prototype.render = function () { message: this.props.selectedIdentity.name, data: this.props.selectedIdentity.address, }, - }, []), + }), // divider - h('div.account-details-modal-divider', { - style: {}, - }, []), + h('div.account-details-modal-divider'), h('button.btn-clear', { onClick: () => { const url = genAccountLink(selectedIdentity.address, network) global.platform.openWindow({ url }) }, - }, [ - 'View account on Etherscan', - ]), + }, [ 'View account on Etherscan' ]), // Holding on redesign for Export Private Key functionality - h('button.btn-clear', {}, [ - 'Export private key', - ]), + h('button.btn-clear', [ 'Export private key' ]), ]), ]) diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 85bed66e1..477dcbe86 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -62,6 +62,9 @@ const MODALS = { boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', borderRadius: '4px', }, + contentStyle: { + borderRadius: '4px', + } }, NEW_ACCOUNT: { @@ -117,6 +120,7 @@ Modal.prototype.render = function () { const children = modal.contents const modalStyle = modal[isMobileView() ? 'mobileModalStyle' : 'laptopModalStyle'] + const contentStyle = modal.contentStyle || {}; return h(FadeModal, { @@ -127,6 +131,7 @@ Modal.prototype.render = function () { this.modalRef = ref }, modalStyle, + contentStyle, backdropStyle: BACKDROPSTYLE, }, children, diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 46f8b9d84..6d2205164 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -180,6 +180,10 @@ border: 1px solid $silver; border-radius: 4px; font-family: 'Montserrat UltraLight'; + + button { + cursor: pointer; + } } .account-details-modal-wrapper .qr-header { @@ -231,7 +235,12 @@ } .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 { @@ -241,6 +250,7 @@ position: absolute; top: 10px; right: 12px; + cursor: pointer; } // New Account Modal diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 86170890c..a2a77f763 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -243,4 +243,23 @@ line-height: 40px; 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; + } + } } -- cgit