feature(channels header): hard code mock channels route header

app/app.global.scss

@@ -72,4 +72,31 @@ body {
   100% {
     transform: rotate(360deg);
   }
-}
+}
+
+// buttons
+
+.buttonPrimary {
+  -webkit-user-select: none;
+  cursor: pointer;
+  display: block;
+  padding-left: 30px;
+  padding-right: 30px;
+  padding-top: 18px;
+  padding-bottom: 15px;
+  border-radius: 2px;
+  text-align: center;
+  font-size: 18px;
+  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;
+  }
+}

app/routes/channels/components/Channels.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import { FaAlignJustify, FaThLarge } from 'react-icons/lib/fa'
 import { MdSearch } from 'react-icons/lib/md'
 import styles from './Channels.scss'
 
@@ -16,7 +17,7 @@ class Channels extends Component {
     return (
       <div className={styles.container}>
         <div className={styles.search}>
-          <label className={`${styles.label} ${styles.input}`} htmlFor='invoiceSearch'>
+          <label className={`${styles.label} ${styles.input}`} htmlFor='channelSearch'>
             <MdSearch />
           </label>
           <input
@@ -25,10 +26,28 @@ class Channels extends Component {
             className={`${styles.text} ${styles.input}`}
             placeholder='Search channels by funding transaction, channel id, remote public key, etc'
             type='text'
-            id='invoiceSearch'
+            id='channelSearch'
           />
         </div>
-        channels
+        <header className={styles.header}>
+          <div className={styles.layoutsContainer}>
+            <span className={styles.active}>
+              <FaAlignJustify />
+            </span>
+            <span>
+              <FaThLarge />
+            </span>
+          </div>
+          <div className={styles.createChannelContainer}>
+            <div className='buttonPrimary'>
+              Create new channel
+            </div>
+          </div>
+        </header>
+
+        <div className={styles.channels}>
+          channels
+        </div>
       </div>
     )
   }

app/routes/channels/components/Channels.scss

@@ -6,7 +6,7 @@
 
 .search {
   height: 75px;
-  padding: 2px;
+  padding: 2px 25px;
   border-bottom: 1px solid $darkgrey;
 
   .input {
@@ -32,4 +32,37 @@
     height: 68px;
     font-size: 18px;
   }
+}
+
+.header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.layoutsContainer {
+  padding: 40px;
+
+  span {
+    font-size: 30px;
+    color: $grey;
+    cursor: pointer;
+    transition: all 0.25s;
+
+    &:nth-child(1) {
+      margin-right: 20px;
+    }
+
+    &:hover {
+      color: $darkestgrey;
+    }
+
+    &.active {
+      color: $darkestgrey;
+    }
+  }
+}
+
+.createChannelContainer {
+  padding: 40px;
 }