Added proper blurred background for modals

src/short-urls/UseExistingIfFoundInfoIcon.tsx

@@ -1,11 +1,12 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
-import { Modal, ModalBody, ModalHeader } from 'reactstrap';
-import './UseExistingIfFoundInfoIcon.scss';
+import { ModalBody, ModalHeader } from 'reactstrap';
 import { useToggle } from '../utils/helpers/hooks';
+import { BlurredModal } from '../utils/BlurredModal';
+import './UseExistingIfFoundInfoIcon.scss';
 
 const InfoModal = ({ isOpen, toggle }: { isOpen: boolean; toggle: () => void }) => (
-  <Modal isOpen={isOpen} toggle={toggle} centered size="lg">
+  <BlurredModal isOpen={isOpen} toggle={toggle} centered size="lg">
     <ModalHeader toggle={toggle}>Info</ModalHeader>
     <ModalBody>
       <p>
@@ -33,7 +34,7 @@ const InfoModal = ({ isOpen, toggle }: { isOpen: boolean; toggle: () => void })
         </li>
       </ul>
     </ModalBody>
-  </Modal>
+  </BlurredModal>
 );
 
 const UseExistingIfFoundInfoIcon = () => {

src/short-urls/helpers/DeleteShortUrlModal.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import { ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import { identity, pipe } from 'ramda';
 import { ShortUrlDeletion } from '../reducers/shortUrlDeletion';
 import { ShortUrlModalProps } from '../data';
@@ -7,6 +7,7 @@ import { handleEventPreventingDefault, OptionalString } from '../../utils/utils'
 import { Result } from '../../utils/Result';
 import { isInvalidDeletionError } from '../../api/utils';
 import { ShlinkApiError } from '../../api/ShlinkApiError';
+import { BlurredModal } from '../../utils/BlurredModal';
 
 interface DeleteShortUrlModalConnectProps extends ShortUrlModalProps {
   shortUrlDeletion: ShortUrlDeletion;
@@ -32,7 +33,7 @@ const DeleteShortUrlModal = (
   });
 
   return (
-    <Modal isOpen={isOpen} toggle={close} centered>
+    <BlurredModal isOpen={isOpen} toggle={close} centered>
       <form onSubmit={handleDeleteUrl}>
         <ModalHeader toggle={close}>
           <span className="text-danger">Delete short URL</span>
@@ -67,7 +68,7 @@ const DeleteShortUrlModal = (
           </button>
         </ModalFooter>
       </form>
-    </Modal>
+    </BlurredModal>
   );
 };
 

src/short-urls/helpers/EditMetaModal.tsx

@@ -1,5 +1,5 @@
 import { ChangeEvent, useState } from 'react';
-import { Modal, ModalBody, ModalFooter, ModalHeader, FormGroup, Input, UncontrolledTooltip } from 'reactstrap';
+import { ModalBody, ModalFooter, ModalHeader, FormGroup, Input, UncontrolledTooltip } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
 import { ExternalLink } from 'react-external-link';
@@ -12,6 +12,7 @@ import { ShortUrl, ShortUrlMeta, ShortUrlModalProps } from '../data';
 import { handleEventPreventingDefault, Nullable, OptionalString } from '../../utils/utils';
 import { Result } from '../../utils/Result';
 import { ShlinkApiError } from '../../api/ShlinkApiError';
+import { BlurredModal } from '../../utils/BlurredModal';
 
 interface EditMetaModalConnectProps extends ShortUrlModalProps {
   shortUrlMeta: ShortUrlMetaEdition;
@@ -42,7 +43,7 @@ const EditMetaModal = (
   }).then(close);
 
   return (
-    <Modal isOpen={isOpen} toggle={close} centered>
+    <BlurredModal isOpen={isOpen} toggle={close} centered>
       <ModalHeader toggle={close}>
         <FontAwesomeIcon icon={infoIcon} id="metaTitleInfo" /> Edit metadata for <ExternalLink href={url} />
         <UncontrolledTooltip target="metaTitleInfo" placement="bottom">
@@ -94,7 +95,7 @@ const EditMetaModal = (
           <button className="btn btn-primary" type="submit" disabled={saving}>{saving ? 'Saving...' : 'Save'}</button>
         </ModalFooter>
       </form>
-    </Modal>
+    </BlurredModal>
   );
 };
 

src/short-urls/helpers/EditShortUrlModal.tsx

@@ -1,11 +1,12 @@
 import { useState } from 'react';
-import { Modal, ModalBody, ModalFooter, ModalHeader, FormGroup, Input, Button } from 'reactstrap';
+import { ModalBody, ModalFooter, ModalHeader, FormGroup, Input, Button } from 'reactstrap';
 import { ExternalLink } from 'react-external-link';
 import { ShortUrlEdition } from '../reducers/shortUrlEdition';
 import { handleEventPreventingDefault, hasValue, OptionalString } from '../../utils/utils';
 import { ShortUrlModalProps } from '../data';
 import { Result } from '../../utils/Result';
 import { ShlinkApiError } from '../../api/ShlinkApiError';
+import { BlurredModal } from '../../utils/BlurredModal';
 
 interface EditShortUrlModalProps extends ShortUrlModalProps {
   shortUrlEdition: ShortUrlEdition;
@@ -20,7 +21,7 @@ const EditShortUrlModal = ({ isOpen, toggle, shortUrl, shortUrlEdition, editShor
   const doEdit = async () => editShortUrl(shortUrl.shortCode, shortUrl.domain, longUrl).then(toggle);
 
   return (
-    <Modal isOpen={isOpen} toggle={toggle} centered size="lg">
+    <BlurredModal isOpen={isOpen} toggle={toggle} centered size="lg">
       <ModalHeader toggle={toggle}>
         Edit long URL for <ExternalLink href={url} />
       </ModalHeader>
@@ -49,7 +50,7 @@ const EditShortUrlModal = ({ isOpen, toggle, shortUrl, shortUrlEdition, editShor
           <Button color="primary" disabled={saving || !hasValue(longUrl)}>{saving ? 'Saving...' : 'Save'}</Button>
         </ModalFooter>
       </form>
-    </Modal>
+    </BlurredModal>
   );
 };
 

src/short-urls/helpers/EditTagsModal.tsx

@@ -1,5 +1,5 @@
 import { FC, useEffect, useState } from 'react';
-import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import { ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import { ExternalLink } from 'react-external-link';
 import { ShortUrlTags } from '../reducers/shortUrlTags';
 import { ShortUrlModalProps } from '../data';
@@ -7,6 +7,7 @@ import { OptionalString } from '../../utils/utils';
 import { TagsSelectorProps } from '../../tags/helpers/TagsSelector';
 import { Result } from '../../utils/Result';
 import { ShlinkApiError } from '../../api/ShlinkApiError';
+import { BlurredModal } from '../../utils/BlurredModal';
 
 interface EditTagsModalProps extends ShortUrlModalProps {
   shortUrlTags: ShortUrlTags;
@@ -28,7 +29,7 @@ const EditTagsModal = (TagsSelector: FC<TagsSelectorProps>) => (
     .catch(() => {});
 
   return (
-    <Modal isOpen={isOpen} toggle={toggle} centered>
+    <BlurredModal isOpen={isOpen} toggle={toggle} centered>
       <ModalHeader toggle={toggle}>
         Edit tags for <ExternalLink href={url} />
       </ModalHeader>
@@ -46,7 +47,7 @@ const EditTagsModal = (TagsSelector: FC<TagsSelectorProps>) => (
           {saving ? 'Saving tags...' : 'Save tags'}
         </button>
       </ModalFooter>
-    </Modal>
+    </BlurredModal>
   );
 };
 

src/short-urls/helpers/QrCodeModal.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react';
-import { DropdownItem, FormGroup, Modal, ModalBody, ModalHeader, Row } from 'reactstrap';
+import { DropdownItem, FormGroup, ModalBody, ModalHeader, Row } from 'reactstrap';
 import { ExternalLink } from 'react-external-link';
 import classNames from 'classnames';
 import { ShortUrlModalProps } from '../data';
@@ -9,6 +9,7 @@ import { DropdownBtn } from '../../utils/DropdownBtn';
 import { CopyToClipboardIcon } from '../../utils/CopyToClipboardIcon';
 import { buildQrCodeUrl, QrCodeCapabilities, QrCodeFormat } from '../../utils/helpers/qrCodes';
 import './QrCodeModal.scss';
+import { BlurredModal } from '../../utils/BlurredModal';
 
 interface QrCodeModalConnectProps extends ShortUrlModalProps {
   selectedServer: ReachableServer;
@@ -37,7 +38,7 @@ const QrCodeModal = ({ shortUrl: { shortUrl }, toggle, isOpen, selectedServer }:
   }, [ totalSize ]);
 
   return (
-    <Modal isOpen={isOpen} toggle={toggle} centered size={modalSize}>
+    <BlurredModal isOpen={isOpen} toggle={toggle} centered size={modalSize}>
       <ModalHeader toggle={toggle}>
         QR code for <ExternalLink href={shortUrl}>{shortUrl}</ExternalLink>
       </ModalHeader>
@@ -98,7 +99,7 @@ const QrCodeModal = ({ shortUrl: { shortUrl }, toggle, isOpen, selectedServer }:
           <div className="mt-2">{size}x{size}</div>
         </div>
       </ModalBody>
-    </Modal>
+    </BlurredModal>
   );
 };