Rolled-back blurred modal

CHANGELOG.md

@@ -9,7 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 * [#379](https://github.com/shlinkio/shlink-web-client/issues/379) and [#384](https://github.com/shlinkio/shlink-web-client/issues/384) Improved QR code modal, including controls to customize size, format and margin, as well as a button to copy the link to the clipboard.
 * [#385](https://github.com/shlinkio/shlink-web-client/issues/385) Added setting to determine if "validate URL" should be enabled or disabled by default.
 * [#386](https://github.com/shlinkio/shlink-web-client/issues/386) Added new card in overview section to display amount of orphan visits when using Shlink 2.6.0 or higher.
-* [#177](https://github.com/shlinkio/shlink-web-client/issues/177) Added dark theme. **[BETA]**
+* [#177](https://github.com/shlinkio/shlink-web-client/issues/177) Added dark theme.
 
 ### Changed
 * *Nothing*

src/servers/DeleteServerModal.tsx

@@ -1,6 +1,5 @@
-import { ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import { RouterProps } from 'react-router';
-import { BlurredModal } from '../utils/BlurredModal';
 import { ServerWithId } from './data';
 
 export interface DeleteServerModalProps {
@@ -21,7 +20,7 @@ const DeleteServerModal = ({ server, toggle, isOpen, deleteServer, history }: De
   };
 
   return (
-    <BlurredModal isOpen={isOpen} toggle={toggle} centered>
+    <Modal isOpen={isOpen} toggle={toggle} centered>
       <ModalHeader toggle={toggle}><span className="text-danger">Remove server</span></ModalHeader>
       <ModalBody>
         <p>Are you sure you want to remove <b>{server ? server.name : ''}</b>?</p>
@@ -36,7 +35,7 @@ const DeleteServerModal = ({ server, toggle, isOpen, deleteServer, history }: De
         <button className="btn btn-link" onClick={toggle}>Cancel</button>
         <button className="btn btn-danger" onClick={() => closeModal()}>Delete</button>
       </ModalFooter>
-    </BlurredModal>
+    </Modal>
   );
 };
 

src/short-urls/UseExistingIfFoundInfoIcon.tsx

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

src/short-urls/helpers/DeleteShortUrlModal.tsx

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

src/short-urls/helpers/EditMetaModal.tsx

@@ -1,5 +1,5 @@
 import { ChangeEvent, useState } from 'react';
-import { ModalBody, ModalFooter, ModalHeader, FormGroup, Input, UncontrolledTooltip } from 'reactstrap';
+import { Modal, 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,7 +12,6 @@ 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;
@@ -43,7 +42,7 @@ const EditMetaModal = (
   }).then(close);
 
   return (
-    <BlurredModal isOpen={isOpen} toggle={close} centered>
+    <Modal isOpen={isOpen} toggle={close} centered>
       <ModalHeader toggle={close}>
         <FontAwesomeIcon icon={infoIcon} id="metaTitleInfo" /> Edit metadata for <ExternalLink href={url} />
         <UncontrolledTooltip target="metaTitleInfo" placement="bottom">
@@ -95,7 +94,7 @@ const EditMetaModal = (
           <button className="btn btn-primary" type="submit" disabled={saving}>{saving ? 'Saving...' : 'Save'}</button>
         </ModalFooter>
       </form>
-    </BlurredModal>
+    </Modal>
   );
 };
 

src/short-urls/helpers/EditShortUrlModal.tsx

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

src/short-urls/helpers/EditTagsModal.tsx

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

src/short-urls/helpers/QrCodeModal.tsx

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

src/tags/helpers/DeleteTagConfirmModal.tsx

@@ -1,9 +1,8 @@
-import { ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import { TagDeletion } from '../reducers/tagDelete';
 import { TagModalProps } from '../data';
 import { Result } from '../../utils/Result';
 import { ShlinkApiError } from '../../api/ShlinkApiError';
-import { BlurredModal } from '../../utils/BlurredModal';
 
 interface DeleteTagConfirmModalProps extends TagModalProps {
   deleteTag: (tag: string) => Promise<void>;
@@ -22,7 +21,7 @@ const DeleteTagConfirmModal = (
   };
 
   return (
-    <BlurredModal toggle={toggle} isOpen={isOpen} centered>
+    <Modal toggle={toggle} isOpen={isOpen} centered>
       <ModalHeader toggle={toggle}>
         <span className="text-danger">Delete tag</span>
       </ModalHeader>
@@ -40,7 +39,7 @@ const DeleteTagConfirmModal = (
           {deleting ? 'Deleting tag...' : 'Delete tag'}
         </button>
       </ModalFooter>
-    </BlurredModal>
+    </Modal>
   );
 };
 

src/tags/helpers/EditTagModal.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { ModalBody, ModalFooter, ModalHeader, Popover } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, ModalHeader, Popover } from 'reactstrap';
 import { ChromePicker } from 'react-color';
 import { faPalette as colorIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -10,7 +10,6 @@ import { TagModalProps } from '../data';
 import { TagEdition } from '../reducers/tagEdit';
 import { Result } from '../../utils/Result';
 import { ShlinkApiError } from '../../api/ShlinkApiError';
-import { BlurredModal } from '../../utils/BlurredModal';
 import './EditTagModal.scss';
 
 interface EditTagModalProps extends TagModalProps {
@@ -32,7 +31,7 @@ const EditTagModal = ({ getColorForKey }: ColorGenerator) => (
     .catch(() => {}));
 
   return (
-    <BlurredModal isOpen={isOpen} toggle={toggle} centered onClosed={hideColorPicker}>
+    <Modal isOpen={isOpen} toggle={toggle} centered onClosed={hideColorPicker}>
       <form onSubmit={saveTag}>
         <ModalHeader toggle={toggle}>Edit tag</ModalHeader>
         <ModalBody>
@@ -69,7 +68,7 @@ const EditTagModal = ({ getColorForKey }: ColorGenerator) => (
           <button type="submit" className="btn btn-primary" disabled={editing}>{editing ? 'Saving...' : 'Save'}</button>
         </ModalFooter>
       </form>
-    </BlurredModal>
+    </Modal>
   );
 };
 

src/utils/BlurredModal.scss

@@ -1,11 +0,0 @@
-@import './base';
-
-@media (min-width: $smMin) {
-  #root {
-    transition: filter 300ms;
-  }
-
-  .with-modal #root {
-    filter: blur(1.5px);
-  }
-}

src/utils/BlurredModal.tsx

@@ -1,12 +0,0 @@
-import { FC } from 'react';
-import { ModalProps, Modal } from 'reactstrap'; // eslint-disable-line import/named
-import './BlurredModal.scss';
-
-const onEnter = () => document.body.classList.add('with-modal');
-const onExit = () => document.body.classList.remove('with-modal');
-
-export const BlurredModal: FC<ModalProps> = ({ children, ...rest }) => (
-  <Modal {...rest} modalTransition={{ onEnter, onExit }}>
-    {children}
-  </Modal>
-);

src/visits/helpers/MapModal.tsx

@@ -1,9 +1,8 @@
 import { FC } from 'react';
-import { ModalBody } from 'reactstrap';
+import { Modal, ModalBody } from 'reactstrap';
 import { MapContainer, TileLayer, Marker, Popup, MapContainerProps } from 'react-leaflet';
 import { prop } from 'ramda';
 import { CityStats } from '../types';
-import { BlurredModal } from '../../utils/BlurredModal';
 import './MapModal.scss';
 
 interface MapModalProps {
@@ -37,7 +36,7 @@ const calculateMapProps = (locations: CityStats[]): MapContainerProps => {
 };
 
 const MapModal = ({ toggle, isOpen, title, locations = [] }: MapModalProps) => (
-  <BlurredModal toggle={toggle} isOpen={isOpen} className="map-modal__modal" contentClassName="map-modal__modal-content">
+  <Modal toggle={toggle} isOpen={isOpen} className="map-modal__modal" contentClassName="map-modal__modal-content">
     <ModalBody className="map-modal__modal-body">
       <h3 className="map-modal__modal-title">
         {title}
@@ -52,7 +51,7 @@ const MapModal = ({ toggle, isOpen, title, locations = [] }: MapModalProps) => (
         ))}
       </MapContainer>
     </ModalBody>
-  </BlurredModal>
+  </Modal>
 );
 
 export default MapModal;

test/servers/DeleteServerModal.test.tsx

@@ -1,10 +1,9 @@
 import { shallow, ShallowWrapper } from 'enzyme';
-import { ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import { History } from 'history';
 import { Mock } from 'ts-mockery';
 import DeleteServerModal from '../../src/servers/DeleteServerModal';
 import { ServerWithId } from '../../src/servers/data';
-import { BlurredModal } from '../../src/utils/BlurredModal';
 
 describe('<DeleteServerModal />', () => {
   let wrapper: ShallowWrapper;
@@ -28,7 +27,7 @@ describe('<DeleteServerModal />', () => {
   afterEach(jest.clearAllMocks);
 
   it('renders a modal window', () => {
-    expect(wrapper.find(BlurredModal)).toHaveLength(1);
+    expect(wrapper.find(Modal)).toHaveLength(1);
     expect(wrapper.find(ModalHeader)).toHaveLength(1);
     expect(wrapper.find(ModalBody)).toHaveLength(1);
     expect(wrapper.find(ModalFooter)).toHaveLength(1);

test/short-urls/helpers/EditMetaModal.test.tsx

@@ -71,7 +71,7 @@ describe('<EditMetaModal />', () => {
 
   it.each([
     [ '.btn-link', 'onClick' ],
-    [ 'BlurredModal', 'toggle' ],
+    [ 'Modal', 'toggle' ],
     [ 'ModalHeader', 'toggle' ],
   ])('resets meta when modal is toggled in any way', (componentToFind, propToCall) => {
     const wrapper = createWrapper({ saving: false, error: false });

test/short-urls/helpers/EditShortUrlModal.test.tsx

@@ -67,7 +67,7 @@ describe('<EditShortUrlModal />', () => {
 
   it.each([
     [ '[color="link"]', 'onClick' ],
-    [ 'BlurredModal', 'toggle' ],
+    [ 'Modal', 'toggle' ],
     [ 'ModalHeader', 'toggle' ],
   ])('toggles modal with different mechanisms', (componentToFind, propToCall) => {
     const wrapper = createWrapper({}, { saving: false, error: false });

test/short-urls/helpers/EditTagsModal.test.tsx

@@ -4,7 +4,7 @@ import createEditTagsModal from '../../../src/short-urls/helpers/EditTagsModal';
 import { ShortUrl } from '../../../src/short-urls/data';
 import { ShortUrlTags } from '../../../src/short-urls/reducers/shortUrlTags';
 import { OptionalString } from '../../../src/utils/utils';
-import { BlurredModal } from '../../../src/utils/BlurredModal';
+import { Modal } from 'reactstrap';
 
 describe('<EditTagsModal />', () => {
   let wrapper: ShallowWrapper;
@@ -98,7 +98,7 @@ describe('<EditTagsModal />', () => {
       saving: false,
       error: false,
     });
-    const modal = wrapper.find(BlurredModal);
+    const modal = wrapper.find(Modal);
 
     modal.simulate('closed');
     expect(editShortUrlTags).not.toHaveBeenCalled();

test/short-urls/helpers/QrCodeModal.test.tsx

@@ -1,13 +1,12 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { ExternalLink } from 'react-external-link';
-import { ModalBody, ModalHeader, Row } from 'reactstrap';
+import { Modal, ModalBody, ModalHeader, Row } from 'reactstrap';
 import { Mock } from 'ts-mockery';
 import QrCodeModal from '../../../src/short-urls/helpers/QrCodeModal';
 import { ShortUrl } from '../../../src/short-urls/data';
 import { ReachableServer } from '../../../src/servers/data';
 import { CopyToClipboardIcon } from '../../../src/utils/CopyToClipboardIcon';
 import { DropdownBtn } from '../../../src/utils/DropdownBtn';
-import { BlurredModal } from '../../../src/utils/BlurredModal';
 
 describe('<QrCodeModal />', () => {
   let wrapper: ShallowWrapper;
@@ -81,7 +80,7 @@ describe('<QrCodeModal />', () => {
     expect(wrapper.find('.mt-2').text()).toEqual(`${size}x${size}`);
     expect(wrapper.find('label').at(0).text()).toEqual(`Size: ${size}px`);
     expect(wrapper.find('label').at(1).text()).toEqual(`Margin: ${margin}px`);
-    expect(wrapper.find(BlurredModal).prop('size')).toEqual(modalSize);
+    expect(wrapper.find(Modal).prop('size')).toEqual(modalSize);
   });
 
   it.each([

test/tags/helpers/DeleteTagConfirmModal.test.tsx

@@ -1,8 +1,7 @@
 import { shallow, ShallowWrapper } from 'enzyme';
-import { ModalBody, ModalFooter } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter } from 'reactstrap';
 import DeleteTagConfirmModal from '../../../src/tags/helpers/DeleteTagConfirmModal';
 import { TagDeletion } from '../../../src/tags/reducers/tagDelete';
-import { BlurredModal } from '../../../src/utils/BlurredModal';
 
 describe('<DeleteTagConfirmModal />', () => {
   let wrapper: ShallowWrapper;
@@ -69,7 +68,7 @@ describe('<DeleteTagConfirmModal />', () => {
 
   it('does no further actions when modal is closed without deleting tag', () => {
     wrapper = createWrapper({ error: false, deleting: false });
-    const modal = wrapper.find(BlurredModal);
+    const modal = wrapper.find(Modal);
 
     modal.simulate('closed');
     expect(deleteTag).not.toHaveBeenCalled();

test/visits/helpers/MapModal.test.tsx

@@ -2,7 +2,7 @@ import { shallow, ShallowWrapper } from 'enzyme';
 import { Marker, Popup } from 'react-leaflet';
 import MapModal from '../../../src/visits/helpers/MapModal';
 import { CityStats } from '../../../src/visits/types';
-import { BlurredModal } from '../../../src/utils/BlurredModal';
+import { Modal } from 'reactstrap';
 
 describe('<MapModal />', () => {
   let wrapper: ShallowWrapper;
@@ -33,7 +33,7 @@ describe('<MapModal />', () => {
   afterEach(() => wrapper.unmount());
 
   it('renders modal with provided props', () => {
-    const modal = wrapper.find(BlurredModal);
+    const modal = wrapper.find(Modal);
     const header = wrapper.find('.map-modal__modal-title');
 
     expect(modal.prop('toggle')).toEqual(toggle);