Merge pull request #148 from pajasevi/feature/unified-close-icons

Unified close icons

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}>

app/components/ChannelForm/ChannelForm.scss

@@ -1,7 +1,6 @@
 @import '../../variables.scss';
 
 .modal {
-  position: relative;
   width: 40%;
   margin: 50px auto;
   position: absolute;
@@ -38,21 +37,21 @@
 }
 
 .header {
-   padding: 20px;
-   background: $lightgrey;
-   text-align: center;
-   font-family: 'Jigsaw Light';
-   text-transform: uppercase;
-   position: relative;
-   z-index: -2;
+  padding: 20px;
+  background: $lightgrey;
+  text-align: center;
+  font-family: 'Jigsaw Light';
+  text-transform: uppercase;
+  position: relative;
+  z-index: -2;
 }
 
 .progress {
-   transition: all 0.2s ease;
-   background: $main;
-   position: absolute;
-   height: 100%;
-   top: 0;
-   left: 0;
-   z-index: -1;
+  transition: all 0.2s ease;
+  background: $main;
+  position: absolute;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: -1;
 }

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}>

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

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>
 

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;

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>
       {

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>
 

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} />