diff --git a/app/components/Channels/Channel.scss b/app/components/Channels/Channel.scss index e7eefe52..e985cf8e 100644 --- a/app/components/Channels/Channel.scss +++ b/app/components/Channels/Channel.scss @@ -2,15 +2,17 @@ .channel { position: relative; - background: $lightgrey; + background: $white; margin: 5px 0; padding: 10px; border-top: 1px solid $white; cursor: pointer; transition: all 0.25s; + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); &:hover { opacity: 0.75; + box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); } &:first-child { diff --git a/app/components/Peers/PeerModal.js b/app/components/Peers/PeerModal.js index ed578209..1d6ea161 100644 --- a/app/components/Peers/PeerModal.js +++ b/app/components/Peers/PeerModal.js @@ -1,6 +1,9 @@ import React from 'react' import PropTypes from 'prop-types' + import ReactModal from 'react-modal' +import { MdClose } from 'react-icons/lib/md' + import styles from './PeerModal.scss' const PeerModal = ({ isOpen, resetPeer, peer, disconnect }) => { @@ -16,7 +19,8 @@ const PeerModal = ({ isOpen, resetPeer, peer, disconnect }) => { bottom: 'auto', width: '40%', margin: '50px auto', - padding: '40px' + borderRadius: 'none', + padding: '0' } } @@ -30,32 +34,35 @@ const PeerModal = ({ isOpen, resetPeer, peer, disconnect }) => { parentSelector={() => document.body} style={customStyles} > +
+ resetPeer(null)}> + + +
{ - peer ? -
-
-

{peer.address}

-

{peer.pub_key}

-
+ peer && +
+
+

{peer.address}

+

{peer.pub_key}

+
-
-
-
Satoshis Received
-
{peer.sat_recv}
-
Satoshis Sent
-
{peer.sat_sent}
-
Bytes Received
-
{peer.bytes_recv}
-
Bytes Sent
-
{peer.bytes_sent}
-
-
-
disconnect({ pubkey: peer.pub_key })}> -
Disconnect peer
-
+
+
+
Satoshis Received
+
{peer.sat_recv}
+
Satoshis Sent
+
{peer.sat_sent}
+
Bytes Received
+
{peer.bytes_recv}
+
Bytes Sent
+
{peer.bytes_sent}
+
+
+
disconnect({ pubkey: peer.pub_key })}> +
Disconnect peer
- : - null +
} ) diff --git a/app/components/Peers/PeerModal.scss b/app/components/Peers/PeerModal.scss index e1d41492..fdf247e3 100644 --- a/app/components/Peers/PeerModal.scss +++ b/app/components/Peers/PeerModal.scss @@ -1,16 +1,25 @@ @import '../../variables.scss'; -.peer { - padding: 40px; +.closeContainer { + background: $lightgrey; + text-align: right; + padding: 10px; + + span { + color: $darkestgrey; + font-size: 20px; + cursor: pointer; + } } .header { - margin-bottom: 50px; + background: $lightgrey; + padding: 20px; h1 { color: $black; text-align: center; - margin-bottom: 5px; + margin-bottom: 20px; font-weight: bold; } @@ -22,8 +31,9 @@ } .details { - width: 75%; - margin: 20px auto; + dl { + padding: 40px 40px 40px 40px; + } dt { text-align: left; @@ -38,36 +48,28 @@ dd { text-align: right; font-weight: 400; - padding: 19px 0; + padding: 30px 0 10px 0; margin-left: 0; - border-top: 1px solid $darkgrey; + border-bottom: 1px solid $darkgrey; } } .close { text-align: center; + padding-bottom: 40px; div { - width: 35%; margin: 0 auto; cursor: pointer; - height: 55px; - min-height: 55px; - text-transform: none; font-size: 18px; - transition: opacity .2s ease-out; - background: $red; - color: $white; + color: $red; border: none; - font-weight: 500; padding: 0; text-align: center; - line-height: 55px; transition: all 0.25s; - border-radius: 5px; &:hover { - background: darken($red, 10%); + color: lighten($red, 10%); } } } diff --git a/app/routes/activity/components/components/Modal/Invoice/Invoice.js b/app/routes/activity/components/components/Modal/Invoice/Invoice.js index a22cac3c..ddb78493 100644 --- a/app/routes/activity/components/components/Modal/Invoice/Invoice.js +++ b/app/routes/activity/components/components/Modal/Invoice/Invoice.js @@ -6,7 +6,6 @@ import 'moment-timezone' import QRCode from 'qrcode.react' -import { MdCheck } from 'react-icons/lib/md' import { FaCircle } from 'react-icons/lib/fa' import CurrencyIcon from 'components/CurrencyIcon'