From dda54963f348849cb8ff19d7d99ce8bd84c0def8 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Thu, 26 Oct 2017 12:57:06 -0500
Subject: [PATCH] feature(close icon): close icon on new channel form

---
 app/components/ChannelForm/ChannelForm.js   |  6 ++++++
 app/components/ChannelForm/ChannelForm.scss | 23 +++++++++++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/app/components/ChannelForm/ChannelForm.js b/app/components/ChannelForm/ChannelForm.js
index ebd2a9cc..8c677aa7 100644
--- a/app/components/ChannelForm/ChannelForm.js
+++ b/app/components/ChannelForm/ChannelForm.js
@@ -2,6 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import ReactModal from 'react-modal'
 
+import { FaClose } from 'react-icons/lib/fa'
+
 import StepOne from './StepOne'
 import StepTwo from './StepTwo'
 import StepThree from './StepThree'
@@ -46,6 +48,10 @@ const ChannelForm = ({
       parentSelector={() => document.body}
       className={styles.modal}
     >
+      <div onClick={closeChannelForm} className={styles.modalClose}>
+        <FaClose className={styles.close} />
+      </div>
+
       <header className={styles.header}>
         <h3>{channelFormHeader}</h3>
         <div className={styles.progress} style={{ width: `${channelFormProgress}%` }}></div>
diff --git a/app/components/ChannelForm/ChannelForm.scss b/app/components/ChannelForm/ChannelForm.scss
index b0b366b1..b5c78e32 100644
--- a/app/components/ChannelForm/ChannelForm.scss
+++ b/app/components/ChannelForm/ChannelForm.scss
@@ -1,6 +1,7 @@
 @import '../../variables.scss';
 
 .modal {
+  position: relative;
   width: 40%;
   min-height: 600px;
   margin: 50px auto;
@@ -15,6 +16,28 @@
   border: 1px solid $darkgrey;
 }
 
+.modalClose {
+  position: absolute;
+  top: -13px;
+  right: -13px;
+  display: block;
+  font-size: 16px;
+  line-height: 27px;
+  width: 32px;
+  height: 32px;
+  background: $white;
+  border-radius: 50%;
+  color: $darkestgrey;
+  cursor: pointer;
+  text-align: center;
+  z-index: 2;
+  transition: all 0.25s;
+}
+
+.modalClose:hover {
+  background: $darkgrey;
+}
+
 .header {
    padding: 20px;
    background: $lightgrey;