forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-14 03:23:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added proper blurred background for modals

Browse Source
This commit is contained in:
Alejandro Celaya
2021-02-20 13:22:45 +01:00
committed by Alejandro Celaya
parent e7466ced18
commit f97ef8df83
20 changed files with 79 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/short-urls/helpers/QrCodeModal.tsx
View File

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