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 {
-
-
-
-
-
- -
- Wallet address
-
- -
- Node pubkey
-
-
-
-
-
-
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