diff --git a/app/components/Wallet/ReceiveModal.js b/app/components/Wallet/ReceiveModal.js index 3910fe72..84cc94ba 100644 --- a/app/components/Wallet/ReceiveModal.js +++ b/app/components/Wallet/ReceiveModal.js @@ -2,7 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import copy from 'copy-to-clipboard' import QRCode from 'qrcode.react' -import { FaCopy } from 'react-icons/lib/fa' +import copyIcon from 'icons/copy.svg' import Isvg from 'react-inlinesvg' import x from 'icons/x.svg' @@ -44,6 +44,7 @@ class ReceiveModal extends React.Component { const { qrCodeType } = this.state if (!isOpen) { return null } + return (
@@ -51,42 +52,51 @@ class ReceiveModal extends React.Component {
-
-
- -
- -
-
-
-

Deposit Address

- newAddress('np2wkh')}>New Address -
-

- {address} - copyOnClick(address)} className='hint--left' data-hint='Copy address'> - - -

-
+
+
+
+

JimmyMow

+ +
+
Node Pubkey
+
Deposit Address
+
+
-
-

Node Public Key

-

- {pubkey} - copyOnClick(pubkey)} className='hint--left' data-hint='Copy pubkey'> - - -

-
+
+ +
+
+
+
+

Node Public Key

+

+ {pubkey} + copyOnClick(pubkey)} className={`${styles.copy} hint--left`} data-hint='Copy pubkey'> + + +

+
+ +
+

Deposit Address

+

+ {address} + copyOnClick(address)} className={`${styles.copy} hint--left`} data-hint='Copy address'> + + +

+
+
+
) } diff --git a/app/components/Wallet/ReceiveModal.scss b/app/components/Wallet/ReceiveModal.scss index 91ac1971..e104c6f4 100644 --- a/app/components/Wallet/ReceiveModal.scss +++ b/app/components/Wallet/ReceiveModal.scss @@ -25,93 +25,105 @@ } } -.header { - background: $lightgrey; - padding: 10px 40px 40px; - text-align: center; - - .qrcodes { - text-align: center; - margin-top: 20px; - } - - .tabs { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - margin-top: 20px; - - li { - margin: 0 20px; - color: $darkestgrey; - transition: all 0.25s; - - &:hover { - color: $black; +.content { + display: flex; + flex-direction: row; + align-items: center; + background: $spaceblue; + width: 85%; + margin: 15% auto 50px auto; + color: $white; + + .left { + width: 25%; + padding: 30px 40px; + + .header { + + h2 { + text-align: center; } - &.active { - color: $black; - font-weight: bold; + .qrCodeOptions { + display: flex; + flex-direction: row; + justify-content: space-around; + margin: 20px 0; + + div { + font-size: 10px; + opacity: 0.5; + cursor: pointer; + transition: all 0.25s; + + &:hover { + opacity: 0.75; + } + + &.active { + opacity: 1.0; + } + } } } - } -} - -section { - margin: 25px 0; - padding: 25px; - - h4 { - font-size: 14px; - font-weight: bold; - letter-spacing: 1.5px; - margin-bottom: 10px; - - span { - color: $blue; - cursor: pointer; + + .qrCodeContainer { + text-align: center; } } - p { - display: flex; - flex-direction: row; - font-family: 'Roboto'; - font-size: 14px; - font-weight: 200; - background: $lightgrey; + .right { + width: 75%; + min-height: 220px; + border-left: 1px solid $spaceborder; + padding: 30px 40px; - span { - padding: 15px; - } + .pubkey, .address { + padding: 25px; - span:nth-child(1) { - flex: 9; - overflow-x: scroll; - } - - span:nth-child(2) { - background: $darkgrey; - color: $black; - cursor: pointer; - transition: all 0.25s; + h4 { + font-size: 12px; + margin-bottom: 10px; - &:hover { - background: $darkestgrey; + span { + cursor: pointer; + } } } - } -} + + p { + display: flex; + flex-direction: row; + align-items: center; + font-family: 'Roboto'; + font-size: 10px; + font-weight: 200; + background: $bluegrey; + + .data, .copy { + padding: 15px; + } -.addressHeader { - display: flex; - flex-direction: row; - justify-content: space-between; + .data { + flex: 9; + overflow-x: scroll; + } + + .copy { + background: #383b47; + color: $white; + cursor: pointer; + transition: all 0.25s; - .newAddress { - text-decoration: underline; - font-size: 12px; + &:hover { + background: lighten(#383b47, 5%); + } + + svg { + height: 12px; + width: 12px; + } + } + } } } diff --git a/app/icons/copy.svg b/app/icons/copy.svg new file mode 100644 index 00000000..4e0b09f1 --- /dev/null +++ b/app/icons/copy.svg @@ -0,0 +1 @@ + \ No newline at end of file