From f2ef242b2efa3a831ef8a016888c40abac429a74 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Wed, 29 Nov 2017 18:21:55 -0600
Subject: [PATCH] fix(peers header): fix some styles

---
 app/components/Peers/Peers.js                 |  1 +
 app/icons/user.svg                            |  1 +
 app/routes/peers/components/Peers.js          | 42 +++++++++++++++-
 app/routes/peers/components/Peers.scss        | 48 ++++++++++++++++++-
 app/routes/peers/containers/PeersContainer.js |  1 +
 5 files changed, 91 insertions(+), 2 deletions(-)
 create mode 100644 app/icons/user.svg

diff --git a/app/components/Peers/Peers.js b/app/components/Peers/Peers.js
index 45115cec..4bff0b77 100644
--- a/app/components/Peers/Peers.js
+++ b/app/components/Peers/Peers.js
@@ -36,6 +36,7 @@ const Peers = ({
   return (
     <div className={styles.peers}>
       <PeerModal isOpen={peerModalOpen} resetPeer={setPeer} peer={modalPeer} disconnect={disconnect} />
+      
       <PeerForm form={peerForm} setForm={setPeerForm} connect={connect} />
       <div className={styles.header}>
         <h3>Peers</h3>
diff --git a/app/icons/user.svg b/app/icons/user.svg
new file mode 100644
index 00000000..7bb5f291
--- /dev/null
+++ b/app/icons/user.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
\ No newline at end of file
diff --git a/app/routes/peers/components/Peers.js b/app/routes/peers/components/Peers.js
index c43e1989..af57095e 100644
--- a/app/routes/peers/components/Peers.js
+++ b/app/routes/peers/components/Peers.js
@@ -1,6 +1,9 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import Isvg from 'react-inlinesvg'
 
+import userIcon from 'icons/user.svg'
+import { FaUser, FaRepeat } from 'react-icons/lib/fa'
 import { MdSearch } from 'react-icons/lib/md'
 
 import PeerForm from 'components/Peers/PeerForm'
@@ -16,6 +19,7 @@ class Peers extends Component {
 
   render() {
     const { 
+      fetchPeers,
       peerFormProps,
       setPeerForm,
       setPeer,
@@ -24,9 +28,24 @@ class Peers extends Component {
 
       peerModalOpen,
       filteredPeers,
-      peers: { peer, searchQuery }
+      peers: { peer, searchQuery },
+      info: {  data: { identity_pubkey } }
     } = this.props
 
+    const refreshClicked = event => {
+      // store event in icon so we dont get an error when react clears it
+      const icon = event.currentTarget
+
+      // fetch peers
+      fetchPeers()
+
+      // clear animation after the second so we can reuse it
+      setTimeout(() => { icon.style.animation = '' }, 1000)
+
+      // spin icon for 1 sec
+      icon.style.animation = 'spin 1000ms linear 1'
+    }
+
     return (
       <div>
         <div className={styles.search}>
@@ -48,6 +67,19 @@ class Peers extends Component {
         </div>
 
         <header className={styles.header}>
+          <div className={styles.titleContainer}>
+            <div className={styles.left}>
+              <div className={styles.identityPubkey}>
+                <section className={styles.userIcon}>
+                  <Isvg src={userIcon} />
+                </section>
+                <section>
+                  <h4>Your node public key</h4>
+                  <h2>{identity_pubkey}</h2>
+                </section>
+              </div>
+            </div>
+          </div>
           <div className={styles.addPeerContainer}>
             <div className={`buttonPrimary ${styles.newPeerButton}`} onClick={() => setPeerForm({ isOpen: true })}>
               Add new peer
@@ -55,6 +87,14 @@ class Peers extends Component {
           </div>
         </header>
 
+        <div className={styles.refreshContainer}>
+          <span className={`${styles.refresh} hint--left`} data-hint='Refresh your peers list'>
+            <FaRepeat
+              onClick={refreshClicked}
+            />
+          </span>
+        </div>
+
         <div className={styles.peers}>
           {
             filteredPeers.map(filteredPeer => <Peer key={filteredPeer.peer_id} peer={filteredPeer} setPeer={setPeer} />)
diff --git a/app/routes/peers/components/Peers.scss b/app/routes/peers/components/Peers.scss
index e59fadc7..6b0857d2 100644
--- a/app/routes/peers/components/Peers.scss
+++ b/app/routes/peers/components/Peers.scss
@@ -34,7 +34,41 @@
 .header {
   display: flex;
   flex-direction: row;
-  justify-content: flex-end;
+  justify-content: space-between;
+
+  .titleContainer {
+    padding: 40px;
+
+    .left {
+      padding: 10px;
+    }
+    
+    .left, span {
+      display: inline-block;
+    }
+
+    .identityPubkey {
+      font-size: 30px;
+      margin-right: 10px;
+      display: flex;
+      flex-direction: row;
+
+      .userIcon {
+        margin-right: 10px;
+      }
+
+      section h4 {
+        font-size: 10px;
+        text-transform: uppercase;
+        letter-spacing: 1.2px;
+      }
+
+      section h2 {
+        font-size: 14px;
+        margin-top: 5px;
+      }
+    }
+  }
 
   .addPeerContainer {
     padding: 40px;
@@ -45,6 +79,18 @@
   }
 }
 
+.refreshContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  padding: 0 40px;
+
+  .refresh {
+    cursor: pointer;
+    color: $bluegrey;
+  }
+}
+
 .peers {
   padding: 40px;
 }
\ No newline at end of file
diff --git a/app/routes/peers/containers/PeersContainer.js b/app/routes/peers/containers/PeersContainer.js
index 585935bd..a436c812 100644
--- a/app/routes/peers/containers/PeersContainer.js
+++ b/app/routes/peers/containers/PeersContainer.js
@@ -26,6 +26,7 @@ const mapDispatchToProps = {
 
 const mapStateToProps = state => ({
   peers: state.peers,
+  info: state.info,
 
   peerModalOpen: peersSelectors.peerModalOpen(state),
   filteredPeers: peersSelectors.filteredPeers(state)