feature(peers): style peers

app/components/Peers/Peer.scss

@@ -2,14 +2,18 @@
 
 .peer {
 	position: relative;
-	background: $white;
+	margin: 5px 0;
 	padding: 10px;
-	border-top: 1px solid $grey;
+	border-top: 1px solid $white;
 	cursor: pointer;
 	transition: all 0.25s;
+	list-style: none;
+	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+  transition: 0.3s;
 
 	&:hover {
 		opacity: 0.75;
+		box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
 	}
 
 	&:first-child {

app/routes/peers/components/Peers.js

@@ -4,16 +4,23 @@ import PropTypes from 'prop-types'
 import { MdSearch } from 'react-icons/lib/md'
 
 import PeerForm from 'components/Peers/PeerForm'
+import Peer from 'components/Peers/Peer'
 
 import styles from './Peers.scss'
 
 class Peers extends Component {
+  componentWillMount() {
+    this.props.fetchPeers()
+  }
+
   render() {
     const { 
       peerFormProps,
       setPeerForm,
+      setPeer,
       peers: { peers }
     } = this.props
+
     console.log('props: ', this.props)
 
     return (
@@ -43,7 +50,12 @@ class Peers extends Component {
         </header>
 
         <div className={styles.peers}>
-
+          {
+            peers.map(peer => {
+              console.log('peer: ', peer)
+              return (<Peer key={peer.peer_id} peer={peer} setPeer={setPeer} />)
+            })
+          }
         </div>
       </div>
     )

app/routes/peers/components/Peers.scss

@@ -39,4 +39,8 @@
   .addPeerContainer {
     padding: 40px;
   }
+}
+
+.peers {
+  padding: 40px;
 }