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'