feature(channelform): enable search for peers in channel form

app/app.global.scss

@@ -76,7 +76,7 @@ body {
 
 // buttons
 
-.buttonPrimary {
+.buttonPrimary, .buttonSecondary {
   -webkit-user-select: none;
   cursor: pointer;
   display: block;
@@ -90,17 +90,32 @@ body {
   transition: none;
   position: relative;
   color: white;
-  background-color: $main;
-  box-shadow: 0 3px 0 0 $darkestgrey;
   margin-bottom: 5px;
 
   &:active {
-   box-shadow: inset 0 1px 1px 1px $darkestgrey;
    transform: translate(0px, 3px);
    outline: 0;
   }
 }
 
+.buttonPrimary {
+  background-color: $main;
+  box-shadow: 0 3px 0 0 darken($main, 10%);
+
+  &:active {
+   box-shadow: inset 0 1px 1px 1px darken($main, 10%);
+  }
+}
+
+.buttonSecondary {
+  background-color: $secondary;
+  box-shadow: 0 3px 0 0 darken($secondary, 10%);
+
+  &:active {
+   box-shadow: inset 0 1px 1px 1px darken($secondary, 10%);
+  }
+}
+
 .buttonContainer.circleContainer {
   display: inline-block;
   width: auto;

app/components/ChannelForm/Footer.scss

@@ -1,3 +1,5 @@
+@import '../../variables.scss';
+
 .footer {
   display: flex;
   flex-direction: row;
@@ -9,6 +11,7 @@
 
     div {
       padding: 18px 60px 15px 60px;
+      color: $black;
     }
   }
 }

app/components/ChannelForm/StepOne.js

@@ -1,46 +1,69 @@
-import React from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { MdSearch } from 'react-icons/lib/md'
 import styles from './StepOne.scss'
 
-const StepOne = ({ peers, changeStep, setNodeKey }) => {
+class StepOne extends Component {
-  const peerClicked = (peer) => {
+  constructor(props) {
+    super(props);
+    this.state = {
+      peers: props.peers,
+      searchQuery: ''
+    }
+
+    this.onSearchQuery = this.onSearchQuery.bind(this)
+    this.peerClicked = this.peerClicked.bind(this)
+  }
+
+  onSearchQuery(searchQuery) {
+    const peers = this.props.peers.filter(peer => peer.pub_key.includes(searchQuery))
+
+    this.setState({ peers, searchQuery })
+  }
+
+  peerClicked(peer) {
+    const { setNodeKey, changeStep } = this.props
+
     setNodeKey(peer.pub_key)
     changeStep(2)
   }
 
-  return (
+  render() {
-    <div>
+    const { peers, searchQuery } = this.state
-      <div className={styles.search}>
+    
-        <label className={`${styles.label} ${styles.input}`} htmlFor='peersSearch'>
+    return (
-          <MdSearch />
+      <div>
-        </label>
+        <div className={styles.search}>
-        <input
+          <label className={`${styles.label} ${styles.input}`} htmlFor='peersSearch'>
-          value={''}
+            <MdSearch />
-          onChange={event => console.log('event: ', event)}
+          </label>
-          className={`${styles.text} ${styles.input}`}
+          <input
-          placeholder='Search your peers by their public key'
+            value={searchQuery}
-          type='text'
+            onChange={event => this.onSearchQuery(event.target.value)}
-          id='peersSearch'
+            className={`${styles.text} ${styles.input}`}
-        />
+            placeholder='Search your peers by their public key'
-      </div>
+            type='text'
+            id='peersSearch'
+          />
+        </div>
 
-      <ul className={styles.peers}>
+        <ul className={styles.peers}>
-        {peers.length &&
+          {peers.length > 0 &&
-          peers.map(peer => (
+            peers.map(peer => (
-            <li
+              <li
-              key={peer.peer_id}
+                key={peer.peer_id}
-              className={styles.peer}
+                className={styles.peer}
-              onClick={() => peerClicked(peer)}
+                onClick={() => this.peerClicked(peer)}
-            >
+              >
-              <h4>{peer.address}</h4>
+                <h4>{peer.address}</h4>
-              <h1>{peer.pub_key}</h1>
+                <h1>{peer.pub_key}</h1>
-            </li>
+              </li>
-          )
+            )
-        )}
+          )}
-      </ul>
+        </ul>
-    </div>
+      </div>
-  )
+    )
+  }
 }
 
 StepOne.propTypes = {}

app/components/ChannelForm/StepOne.scss

@@ -1,8 +1,6 @@
 @import '../../variables.scss';
 
 .peers {
-  // margin-bottom: 50px;
-
   h2 {
     text-transform: uppercase;
     font-weight: 200;

app/components/ChannelForm/StepThree.scss

@@ -5,7 +5,7 @@
   padding: 20px;
 
   .explainer {
-    margin: 20px 0 50px 0;
+    margin: 0px 0 50px 0;
     padding-bottom: 20px;
     border-bottom: 1px solid $lightgrey;
 

app/components/ChannelForm/StepTwo.scss

@@ -5,7 +5,7 @@
   padding: 20px;
 
   .explainer {
-    margin: 20px 0 50px 0;
+    margin: 0px 0 50px 0;
     padding-bottom: 20px;
     border-bottom: 1px solid $lightgrey;
 

app/components/Wallet/Wallet.scss

@@ -52,9 +52,9 @@
 
 .rightContent {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
-  justify-content: center;
+  justify-content: flex-end;
-  align-items: center;
+  align-items: right;
   height: calc(100% - 50px);
 
   div {