diff --git a/CHANGELOG.md b/CHANGELOG.md index a98b261e..1c39495e 100644 --- a/CHANGELOG.md +++ b/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* diff --git a/src/servers/DeleteServerModal.tsx b/src/servers/DeleteServerModal.tsx index 2c2c2eee..4d74869e 100644 --- a/src/servers/DeleteServerModal.tsx +++ b/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 ( - + Remove server

Are you sure you want to remove {server ? server.name : ''}?

@@ -36,7 +35,7 @@ const DeleteServerModal = ({ server, toggle, isOpen, deleteServer, history }: De - + ); }; diff --git a/src/short-urls/UseExistingIfFoundInfoIcon.tsx b/src/short-urls/UseExistingIfFoundInfoIcon.tsx index 3db7c9b1..2d003a1e 100644 --- a/src/short-urls/UseExistingIfFoundInfoIcon.tsx +++ b/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 }) => ( - + Info

@@ -34,7 +33,7 @@ const InfoModal = ({ isOpen, toggle }: { isOpen: boolean; toggle: () => void }) - + ); const UseExistingIfFoundInfoIcon = () => { diff --git a/src/short-urls/helpers/DeleteShortUrlModal.tsx b/src/short-urls/helpers/DeleteShortUrlModal.tsx index 621a03fb..435b3318 100644 --- a/src/short-urls/helpers/DeleteShortUrlModal.tsx +++ b/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 ( - +

Delete short URL @@ -68,7 +67,7 @@ const DeleteShortUrlModal = ( -
+ ); }; diff --git a/src/short-urls/helpers/EditMetaModal.tsx b/src/short-urls/helpers/EditMetaModal.tsx index 8b8d1b4c..688cf9be 100644 --- a/src/short-urls/helpers/EditMetaModal.tsx +++ b/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 ( - + Edit metadata for @@ -95,7 +94,7 @@ const EditMetaModal = ( - + ); }; diff --git a/src/short-urls/helpers/EditShortUrlModal.tsx b/src/short-urls/helpers/EditShortUrlModal.tsx index cee662d4..0a09e27e 100644 --- a/src/short-urls/helpers/EditShortUrlModal.tsx +++ b/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 ( - + Edit long URL for @@ -50,7 +49,7 @@ const EditShortUrlModal = ({ isOpen, toggle, shortUrl, shortUrlEdition, editShor - + ); }; diff --git a/src/short-urls/helpers/EditTagsModal.tsx b/src/short-urls/helpers/EditTagsModal.tsx index bc6875ed..a390499c 100644 --- a/src/short-urls/helpers/EditTagsModal.tsx +++ b/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) => ( .catch(() => {}); return ( - + Edit tags for @@ -47,7 +46,7 @@ const EditTagsModal = (TagsSelector: FC) => ( {saving ? 'Saving tags...' : 'Save tags'} - + ); }; diff --git a/src/short-urls/helpers/QrCodeModal.tsx b/src/short-urls/helpers/QrCodeModal.tsx index 9b1c7bad..4bde939e 100644 --- a/src/short-urls/helpers/QrCodeModal.tsx +++ b/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 ( - + QR code for {shortUrl} @@ -99,7 +98,7 @@ const QrCodeModal = ({ shortUrl: { shortUrl }, toggle, isOpen, selectedServer }:
{size}x{size}
- + ); }; diff --git a/src/tags/helpers/DeleteTagConfirmModal.tsx b/src/tags/helpers/DeleteTagConfirmModal.tsx index dc4d2838..c4ef46ab 100644 --- a/src/tags/helpers/DeleteTagConfirmModal.tsx +++ b/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; @@ -22,7 +21,7 @@ const DeleteTagConfirmModal = ( }; return ( - + Delete tag @@ -40,7 +39,7 @@ const DeleteTagConfirmModal = ( {deleting ? 'Deleting tag...' : 'Delete tag'} - + ); }; diff --git a/src/tags/helpers/EditTagModal.tsx b/src/tags/helpers/EditTagModal.tsx index 938d8b6d..7cbd5169 100644 --- a/src/tags/helpers/EditTagModal.tsx +++ b/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 ( - +
Edit tag @@ -69,7 +68,7 @@ const EditTagModal = ({ getColorForKey }: ColorGenerator) => ( -
+ ); }; diff --git a/src/utils/BlurredModal.scss b/src/utils/BlurredModal.scss deleted file mode 100644 index 66d4e435..00000000 --- a/src/utils/BlurredModal.scss +++ /dev/null @@ -1,11 +0,0 @@ -@import './base'; - -@media (min-width: $smMin) { - #root { - transition: filter 300ms; - } - - .with-modal #root { - filter: blur(1.5px); - } -} diff --git a/src/utils/BlurredModal.tsx b/src/utils/BlurredModal.tsx deleted file mode 100644 index 62f68373..00000000 --- a/src/utils/BlurredModal.tsx +++ /dev/null @@ -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 = ({ children, ...rest }) => ( - - {children} - -); diff --git a/src/visits/helpers/MapModal.tsx b/src/visits/helpers/MapModal.tsx index 4d29be2a..ae57ed12 100644 --- a/src/visits/helpers/MapModal.tsx +++ b/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) => ( - +

{title} @@ -52,7 +51,7 @@ const MapModal = ({ toggle, isOpen, title, locations = [] }: MapModalProps) => ( ))} - + ); export default MapModal; diff --git a/test/servers/DeleteServerModal.test.tsx b/test/servers/DeleteServerModal.test.tsx index fc844b32..14eed177 100644 --- a/test/servers/DeleteServerModal.test.tsx +++ b/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('', () => { let wrapper: ShallowWrapper; @@ -28,7 +27,7 @@ describe('', () => { 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); diff --git a/test/short-urls/helpers/EditMetaModal.test.tsx b/test/short-urls/helpers/EditMetaModal.test.tsx index b06f2a40..b5553125 100644 --- a/test/short-urls/helpers/EditMetaModal.test.tsx +++ b/test/short-urls/helpers/EditMetaModal.test.tsx @@ -71,7 +71,7 @@ describe('', () => { 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 }); diff --git a/test/short-urls/helpers/EditShortUrlModal.test.tsx b/test/short-urls/helpers/EditShortUrlModal.test.tsx index 0400d379..2ab14c4b 100644 --- a/test/short-urls/helpers/EditShortUrlModal.test.tsx +++ b/test/short-urls/helpers/EditShortUrlModal.test.tsx @@ -67,7 +67,7 @@ describe('', () => { 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 }); diff --git a/test/short-urls/helpers/EditTagsModal.test.tsx b/test/short-urls/helpers/EditTagsModal.test.tsx index bbff8bb7..fddccad0 100644 --- a/test/short-urls/helpers/EditTagsModal.test.tsx +++ b/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('', () => { let wrapper: ShallowWrapper; @@ -98,7 +98,7 @@ describe('', () => { saving: false, error: false, }); - const modal = wrapper.find(BlurredModal); + const modal = wrapper.find(Modal); modal.simulate('closed'); expect(editShortUrlTags).not.toHaveBeenCalled(); diff --git a/test/short-urls/helpers/QrCodeModal.test.tsx b/test/short-urls/helpers/QrCodeModal.test.tsx index 67089d06..d84b5572 100644 --- a/test/short-urls/helpers/QrCodeModal.test.tsx +++ b/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('', () => { let wrapper: ShallowWrapper; @@ -81,7 +80,7 @@ describe('', () => { 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([ diff --git a/test/tags/helpers/DeleteTagConfirmModal.test.tsx b/test/tags/helpers/DeleteTagConfirmModal.test.tsx index 090e31e4..866dadce 100644 --- a/test/tags/helpers/DeleteTagConfirmModal.test.tsx +++ b/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('', () => { let wrapper: ShallowWrapper; @@ -69,7 +68,7 @@ describe('', () => { 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(); diff --git a/test/visits/helpers/MapModal.test.tsx b/test/visits/helpers/MapModal.test.tsx index da6c18ec..71cdda26 100644 --- a/test/visits/helpers/MapModal.test.tsx +++ b/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('', () => { let wrapper: ShallowWrapper; @@ -33,7 +33,7 @@ describe('', () => { 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);