fix(peers modal): redesign peers modal

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 {

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}
     >
+      <div className={styles.closeContainer}>
+        <span onClick={() => resetPeer(null)}>
+          <MdClose />
+        </span>
+      </div>
       {
-        peer ?
+        peer &&
-          <div className={styles.peer}>
+        <div className={styles.peer}>
-            <header className={styles.header}>
+          <header className={styles.header}>
-              <h1 data-hint='Peer address' className='hint--top-left'>{peer.address}</h1>
+            <h1 data-hint='Peer address' className='hint--top-left'>{peer.address}</h1>
-              <h2 data-hint='Peer public key' className='hint--top-left'>{peer.pub_key}</h2>
+            <h2 data-hint='Peer public key' className='hint--top-left'>{peer.pub_key}</h2>
-            </header>
+          </header>
 
-            <div className={styles.details}>
+          <div className={styles.details}>
-              <dl>
+            <dl>
-                <dt>Satoshis Received</dt>
+              <dt>Satoshis Received</dt>
-                <dd>{peer.sat_recv}</dd>
+              <dd>{peer.sat_recv}</dd>
-                <dt>Satoshis Sent</dt>
+              <dt>Satoshis Sent</dt>
-                <dd>{peer.sat_sent}</dd>
+              <dd>{peer.sat_sent}</dd>
-                <dt>Bytes Received</dt>
+              <dt>Bytes Received</dt>
-                <dd>{peer.bytes_recv}</dd>
+              <dd>{peer.bytes_recv}</dd>
-                <dt>Bytes Sent</dt>
+              <dt>Bytes Sent</dt>
-                <dd>{peer.bytes_sent}</dd>
+              <dd>{peer.bytes_sent}</dd>
-              </dl>
+            </dl>
-            </div>
+          </div>
-            <div className={styles.close} onClick={() => disconnect({ pubkey: peer.pub_key })}>
+          <div className={styles.close} onClick={() => disconnect({ pubkey: peer.pub_key })}>
-              <div>Disconnect peer</div>
+            <div>Disconnect peer</div>
-            </div>
           </div>
-          :
+        </div>
-          null
       }
     </ReactModal>
   )

app/components/Peers/PeerModal.scss

@@ -1,16 +1,25 @@
 @import '../../variables.scss';
 
-.peer {
+.closeContainer {
-	padding: 40px;
+  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%;
+  dl {
-	margin: 20px auto;
+    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;
+    color: $red;
-		background: $red;
-    color: $white;
     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%);
     }
 	}
 }

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'