From f33cc4897a3ac6e153b555cb6172e38840eed8fe Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Wed, 25 Oct 2017 20:33:42 -0500
Subject: [PATCH] feature(channels header): hard code mock channels route
 header

---
 app/app.global.scss                          | 29 +++++++++++++++-
 app/routes/channels/components/Channels.js   | 25 ++++++++++++--
 app/routes/channels/components/Channels.scss | 35 +++++++++++++++++++-
 3 files changed, 84 insertions(+), 5 deletions(-)

diff --git a/app/app.global.scss b/app/app.global.scss
index 0a946033..e1413042 100644
--- a/app/app.global.scss
+++ b/app/app.global.scss
@@ -72,4 +72,31 @@ body {
   100% {
     transform: rotate(360deg);
   }
-}
\ No newline at end of file
+}
+
+// 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;
+  }
+}
diff --git a/app/routes/channels/components/Channels.js b/app/routes/channels/components/Channels.js
index b3b692c4..5b6bbb57 100644
--- a/app/routes/channels/components/Channels.js
+++ b/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>
     )
   }
diff --git a/app/routes/channels/components/Channels.scss b/app/routes/channels/components/Channels.scss
index 99007251..db680ac4 100644
--- a/app/routes/channels/components/Channels.scss
+++ b/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;
 }
\ No newline at end of file