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