Added proper blurred background for modals

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

View File

@@ -1,8 +1,9 @@
import { FC } from 'react';
import { Modal, ModalBody } from 'reactstrap';
import { 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 {
@@ -36,7 +37,7 @@ const calculateMapProps = (locations: CityStats[]): MapContainerProps => {
};
const MapModal = ({ toggle, isOpen, title, locations = [] }: MapModalProps) => (
<Modal toggle={toggle} isOpen={isOpen} className="map-modal__modal" contentClassName="map-modal__modal-content">
<BlurredModal 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}
@@ -51,7 +52,7 @@ const MapModal = ({ toggle, isOpen, title, locations = [] }: MapModalProps) => (
))}
</MapContainer>
</ModalBody>
</Modal>
</BlurredModal>
);
export default MapModal;