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 1/2] 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} />
From 95872d8ea3ed76f50ece53173e0871f2f83269b6 Mon Sep 17 00:00:00 2001
From: pajasevi <pajaseviwow@gmail.com>
Date: Sat, 30 Dec 2017 19:53:57 +0100
Subject: [PATCH 2/2] fix(unified-close-icons): Removed duplicate declaration,
fix for stylelint
---
app/components/ChannelForm/ChannelForm.scss | 29 ++++++++++-----------
1 file changed, 14 insertions(+), 15 deletions(-)
diff --git a/app/components/ChannelForm/ChannelForm.scss b/app/components/ChannelForm/ChannelForm.scss
index d6a06f91..4e7ecdce 100644
--- a/app/components/ChannelForm/ChannelForm.scss
+++ b/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;
}