diff options
author | Alexander Tseung <alextsg@users.noreply.github.com> | 2018-03-13 02:25:12 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-03-13 02:25:12 +0800 |
commit | 08542c18e10c61b9e5862e95e7a5a18d479f2dc1 (patch) | |
tree | 481101a081ae9eb3ea168ae49dd0a532760711c8 /ui/app/components/modals | |
parent | ddc85354d3df508cbecc016fc0213a6560d885e1 (diff) | |
download | tangerine-wallet-browser-08542c18e10c61b9e5862e95e7a5a18d479f2dc1.tar.gz tangerine-wallet-browser-08542c18e10c61b9e5862e95e7a5a18d479f2dc1.tar.zst tangerine-wallet-browser-08542c18e10c61b9e5862e95e7a5a18d479f2dc1.zip |
Update deposit ether styling (#3510)
Diffstat (limited to 'ui/app/components/modals')
-rw-r--r-- | ui/app/components/modals/deposit-ether-modal.js | 111 | ||||
-rw-r--r-- | ui/app/components/modals/modal.js | 10 |
2 files changed, 68 insertions, 53 deletions
diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js index 7547dbcf5..ed73bc632 100644 --- a/ui/app/components/modals/deposit-ether-modal.js +++ b/ui/app/components/modals/deposit-ether-modal.js @@ -16,7 +16,7 @@ const SHAPESHIFT_ROW_TITLE = 'Deposit with ShapeShift' const SHAPESHIFT_ROW_TEXT = `If you own other cryptocurrencies, you can trade and deposit Ether directly into your MetaMask wallet. No Account Needed.` const FAUCET_ROW_TITLE = 'Test Faucet' -const facuetRowText = networkName => `Get Ether from a faucet for the ${networkName}` +const faucetRowText = networkName => `Get Ether from a faucet for the ${networkName}` function mapStateToProps (state) { return { @@ -83,7 +83,7 @@ DepositEtherModal.prototype.renderRow = function ({ ]), - h('div.deposit-ether-modal__buy-row__logo', [logo]), + h('div.deposit-ether-modal__buy-row__logo-container', [logo]), h('div.deposit-ether-modal__buy-row__description', [ @@ -109,17 +109,17 @@ DepositEtherModal.prototype.render = function () { const isTestNetwork = ['3', '4', '42'].find(n => n === network) const networkName = networkNames[network] - return h('div.deposit-ether-modal', {}, [ + return h('div.page-container.page-container--full-width', {}, [ - h('div.deposit-ether-modal__header', [ + h('div.page-container__header', [ - h('div.deposit-ether-modal__header__title', ['Deposit Ether']), + h('div.page-container__title', 'Deposit Ether'), - h('div.deposit-ether-modal__header__description', [ + h('div.page-container__subtitle', [ 'To interact with decentralized applications using MetaMask, you’ll need Ether in your wallet.', ]), - h('div.deposit-ether-modal__header__close', { + h('div.page-container__header-close', { onClick: () => { this.setState({ buyingWithShapeshift: false }) this.props.hideWarning() @@ -129,54 +129,67 @@ DepositEtherModal.prototype.render = function () { ]), - h('div.deposit-ether-modal__buy-rows', [ - - this.renderRow({ - logo: h('img.deposit-ether-modal__buy-row__eth-logo', { src: '../../../images/eth_logo.svg' }), - title: DIRECT_DEPOSIT_ROW_TITLE, - text: DIRECT_DEPOSIT_ROW_TEXT, - buttonLabel: 'View Account', - onButtonClick: () => this.goToAccountDetailsModal(), - hide: buyingWithShapeshift, - }), + h('.page-container__content', {}, [ + + h('div.deposit-ether-modal__buy-rows', [ + + this.renderRow({ + logo: h('div.deposit-ether-modal__logo', { + style: { + backgroundImage: 'url(\'../../../images/eth_logo.svg\')', + }, + }), + title: DIRECT_DEPOSIT_ROW_TITLE, + text: DIRECT_DEPOSIT_ROW_TEXT, + buttonLabel: 'View Account Details', + onButtonClick: () => this.goToAccountDetailsModal(), + hide: buyingWithShapeshift, + }), - this.renderRow({ - logo: h('i.fa.fa-tint.fa-2x'), - title: FAUCET_ROW_TITLE, - text: facuetRowText(networkName), - buttonLabel: 'Get Ether', - onButtonClick: () => toFaucet(network), - hide: !isTestNetwork || buyingWithShapeshift, - }), + this.renderRow({ + logo: h('i.fa.fa-tint.fa-3x.deposit-ether-modal__logo'), + title: FAUCET_ROW_TITLE, + text: faucetRowText(networkName), + buttonLabel: 'Continue to Test Faucet', + onButtonClick: () => toFaucet(network), + hide: !isTestNetwork || buyingWithShapeshift, + }), - this.renderRow({ - logo: h('img.deposit-ether-modal__buy-row__coinbase-logo', { - src: '../../../images/coinbase logo.png', + this.renderRow({ + logo: h('div.deposit-ether-modal__logo', { + style: { + backgroundImage: 'url(\'../../../images/coinbase logo.png\')', + height: '40px', + }, + }), + title: COINBASE_ROW_TITLE, + text: COINBASE_ROW_TEXT, + buttonLabel: 'Continue to Coinbase', + onButtonClick: () => toCoinbase(address), + hide: isTestNetwork || buyingWithShapeshift, }), - title: COINBASE_ROW_TITLE, - text: COINBASE_ROW_TEXT, - buttonLabel: 'Continue to Coinbase', - onButtonClick: () => toCoinbase(address), - hide: isTestNetwork || buyingWithShapeshift, - }), - this.renderRow({ - logo: h('img.deposit-ether-modal__buy-row__shapeshift-logo', { - src: '../../../images/shapeshift logo.png', + this.renderRow({ + logo: h('div.deposit-ether-modal__logo', { + style: { + backgroundImage: 'url(\'../../../images/shapeshift logo.png\')', + }, + }), + title: SHAPESHIFT_ROW_TITLE, + text: SHAPESHIFT_ROW_TEXT, + buttonLabel: 'Continue to Shapeshift', + onButtonClick: () => this.setState({ buyingWithShapeshift: true }), + hide: isTestNetwork, + hideButton: buyingWithShapeshift, + hideTitle: buyingWithShapeshift, + onBackClick: () => this.setState({ buyingWithShapeshift: false }), + showBackButton: this.state.buyingWithShapeshift, + className: buyingWithShapeshift && 'deposit-ether-modal__buy-row__shapeshift-buy', }), - title: SHAPESHIFT_ROW_TITLE, - text: SHAPESHIFT_ROW_TEXT, - buttonLabel: 'Buy with Shapeshift', - onButtonClick: () => this.setState({ buyingWithShapeshift: true }), - hide: isTestNetwork, - hideButton: buyingWithShapeshift, - hideTitle: buyingWithShapeshift, - onBackClick: () => this.setState({ buyingWithShapeshift: false }), - showBackButton: this.state.buyingWithShapeshift, - className: buyingWithShapeshift && 'deposit-ether-modal__buy-row__shapeshift-buy', - }), - buyingWithShapeshift && h(ShapeshiftForm), + buyingWithShapeshift && h(ShapeshiftForm), + + ]), ]), ]) diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 8e9e58985..ffe669610 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -92,18 +92,20 @@ const MODALS = { display: 'flex', }, laptopModalStyle: { - width: '900px', - maxWidth: '900px', + width: '850px', top: 'calc(10% + 10px)', left: '0', right: '0', margin: '0 auto', boxShadow: '0 0 6px 0 rgba(0,0,0,0.3)', - borderRadius: '8px', + borderRadius: '7px', transform: 'none', + height: 'calc(80% - 20px)', + overflowY: 'hidden', }, contentStyle: { - borderRadius: '8px', + borderRadius: '7px', + height: '100%', }, }, |