From 2c53fc0eaa858e0c9c3442450d5f12e46a4a453f Mon Sep 17 00:00:00 2001
From: pajasevi <pajaseviwow@gmail.com>
Date: Sat, 30 Dec 2017 19:51:29 +0100
Subject: [PATCH] feature(unified-close-icons): Unified close icons

---
 app/components/ChannelForm/ChannelForm.js     |  2 +-
 app/components/Form/Form.js                   |  4 ++--
 app/components/ModalRoot/ModalRoot.js         |  4 ++--
 app/components/Peers/PeerForm.js              |  5 +++++
 app/components/Peers/PeerForm.scss            | 22 +++++++++++++++++++
 app/components/Peers/PeerModal.js             |  4 ++--
 app/components/Wallet/ReceiveModal.js         |  5 ++---
 .../components/components/Modal/Modal.js      |  4 ++--
 8 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/app/components/ChannelForm/ChannelForm.js b/app/components/ChannelForm/ChannelForm.js
index b1a98f65..5b25cde0 100644
--- a/app/components/ChannelForm/ChannelForm.js
+++ b/app/components/ChannelForm/ChannelForm.js
@@ -51,7 +51,7 @@ const ChannelForm = ({
       className={styles.modal}
     >
       <div onClick={closeChannelForm} className={styles.modalClose}>
-        <FaClose className={styles.close} />
+        <FaClose />
       </div>
 
       <header className={styles.header}>
diff --git a/app/components/Form/Form.js b/app/components/Form/Form.js
index dfc9476b..ba97fdb1 100644
--- a/app/components/Form/Form.js
+++ b/app/components/Form/Form.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { MdClose } from 'react-icons/lib/md'
+import { FaClose } from 'react-icons/lib/fa'
 
 import PayForm from './PayForm'
 import RequestForm from './RequestForm'
@@ -21,7 +21,7 @@ const Form = ({ formType, formProps, closeForm }) => {
     <div className={`${styles.outtercontainer} ${formType && styles.open}`}>
       <div className={styles.innercontainer}>
         <div className={styles.esc} onClick={closeForm}>
-          <MdClose />
+          <FaClose />
         </div>
 
         <div className={styles.content}>
diff --git a/app/components/ModalRoot/ModalRoot.js b/app/components/ModalRoot/ModalRoot.js
index b7e9a6ae..4e6abae1 100644
--- a/app/components/ModalRoot/ModalRoot.js
+++ b/app/components/ModalRoot/ModalRoot.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { MdClose } from 'react-icons/lib/md'
+import { FaClose } from 'react-icons/lib/fa'
 import SuccessfulSendCoins from './SuccessfulSendCoins'
 import SuccessfulSendPayment from './SuccessfulSendPayment'
 import WalletDetails from './WalletDetails'
@@ -21,7 +21,7 @@ const ModalRoot = ({ modalType, modalProps, hideModal, currentTicker, currency }
     <div className={styles.container}>
       <div className={styles.content}>
         <div className={styles.esc} onClick={hideModal}>
-          <MdClose />
+          <FaClose />
         </div>
 
         <SpecificModal
diff --git a/app/components/Peers/PeerForm.js b/app/components/Peers/PeerForm.js
index e8c1ec6e..b1a9472e 100644
--- a/app/components/Peers/PeerForm.js
+++ b/app/components/Peers/PeerForm.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import ReactModal from 'react-modal'
+import { FaClose } from 'react-icons/lib/fa'
 import styles from './PeerForm.scss'
 
 const PeerForm = ({ form, setForm, connect }) => {
@@ -20,6 +21,10 @@ const PeerForm = ({ form, setForm, connect }) => {
         parentSelector={() => document.body}
         className={styles.modal}
       >
+        <div onClick={() => setForm({ isOpen: false })} className={styles.modalClose}>
+          <FaClose />
+        </div>
+
         <div className={styles.form} onKeyPress={event => event.charCode === 13 && submit()}>
           <h1 className={styles.title}>Connect to a peer</h1>
 
diff --git a/app/components/Peers/PeerForm.scss b/app/components/Peers/PeerForm.scss
index 74b11929..3c3df00f 100644
--- a/app/components/Peers/PeerForm.scss
+++ b/app/components/Peers/PeerForm.scss
@@ -16,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;
+}
+
 .title {
 	text-align: center;
 	font-size: 24px;
diff --git a/app/components/Peers/PeerModal.js b/app/components/Peers/PeerModal.js
index 1d6ea161..5a957f9a 100644
--- a/app/components/Peers/PeerModal.js
+++ b/app/components/Peers/PeerModal.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import ReactModal from 'react-modal'
-import { MdClose } from 'react-icons/lib/md'
+import { FaClose } from 'react-icons/lib/fa'
 
 import styles from './PeerModal.scss'
 
@@ -36,7 +36,7 @@ const PeerModal = ({ isOpen, resetPeer, peer, disconnect }) => {
     >
       <div className={styles.closeContainer}>
         <span onClick={() => resetPeer(null)}>
-          <MdClose />
+          <FaClose />
         </span>
       </div>
       {
diff --git a/app/components/Wallet/ReceiveModal.js b/app/components/Wallet/ReceiveModal.js
index 6274e827..42adfd23 100644
--- a/app/components/Wallet/ReceiveModal.js
+++ b/app/components/Wallet/ReceiveModal.js
@@ -4,8 +4,7 @@ import ReactModal from 'react-modal'
 import copy from 'copy-to-clipboard'
 import QRCode from 'qrcode.react'
 import { showNotification } from 'notifications'
-import { MdClose } from 'react-icons/lib/md'
-import { FaCopy } from 'react-icons/lib/fa'
+import { FaCopy, FaClose } from 'react-icons/lib/fa'
 import styles from './ReceiveModal.scss'
 
 const ReceiveModal = ({ isOpen, hideActivityModal, pubkey, address, newAddress, qrCodeType, changeQrCode }) => {
@@ -42,7 +41,7 @@ const ReceiveModal = ({ isOpen, hideActivityModal, pubkey, address, newAddress,
     >
       <div className={styles.closeContainer}>
         <span onClick={() => hideActivityModal()}>
-          <MdClose />
+          <FaClose />
         </span>
       </div>
 
diff --git a/app/routes/activity/components/components/Modal/Modal.js b/app/routes/activity/components/components/Modal/Modal.js
index 223b8045..4ec34da6 100644
--- a/app/routes/activity/components/components/Modal/Modal.js
+++ b/app/routes/activity/components/components/Modal/Modal.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import ReactModal from 'react-modal'
-import { MdClose } from 'react-icons/lib/md'
+import { FaClose } from 'react-icons/lib/fa'
 
 import Transaction from './Transaction'
 import Payment from './Payment'
@@ -48,7 +48,7 @@ const Modal = ({ modalType, modalProps, hideActivityModal, ticker, currentTicker
     >
       <div className={styles.closeContainer}>
         <span onClick={() => hideActivityModal()}>
-          <MdClose />
+          <FaClose />
         </span>
       </div>
       <SpecificModal {...modalProps} ticker={ticker} currentTicker={currentTicker} />