map-size-changed (#899)

* map-size-changed

* updated passing styles  to map component

* changed inline style

* changed to max height

* fixed map height from widget only

* deleted redundant variable

src/components/molecules/LocationMap.tsx

@@ -1,11 +1,13 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import { IPoint } from 'models/Point';
 import { MostSevereAccidentsMarker } from 'components/atoms';
 import { ClockPosition } from 'models/ClockPosition';
 import Map from './map/Map';
+import { CSSProperties } from '@material-ui/core/styles/withStyles';
 
 interface IProps {
   items: IPoint[] | any;
+  customHeightStyle?: CSSProperties;
 }
 
 const LocationMap: FC<IProps> = ({ items }) => {

src/components/molecules/map/Map.tsx

@@ -27,7 +27,7 @@ interface IProps {
   data?: IPoint[];
 }
 
-const Map: FC<IProps> = ({ zoom = INITIAL_ZOOM, center=INITIAL_CENTER, data, children }) => {
+const Map: FC<IProps> = ({ zoom = INITIAL_ZOOM, center = INITIAL_CENTER, data, children }) => {
   const classes = useStyles();
 
   const bounds = getBounds(data);

src/components/molecules/widgets/MostSevereAccidentsMapWidget.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import LocationMap from 'components/molecules/LocationMap';
 import { IWidgetMostSevereAccidentsData } from 'models/WidgetData';
 import { Box } from '@material-ui/core';
@@ -32,15 +32,20 @@ const useStyles = makeStyles({
   logoTextSpace: {
     marginInlineStart: '5px',
   },
+  mapBox: {
+    height: '85%',
+    paddingTop: '2rem',
+  },
 });
 
 const MostSevereAccidentsMapWidget: FC<IProps> = ({ data, sizeOptions }) => {
   const classes = useStyles();
   const { items } = data;
   const { t } = useTranslation();
+
   return (
     <Box height={'100%'}>
-      <Box height={'95%'}>
+      <Box className={classes.mapBox}>
         <LocationMap items={items} />
       </Box>
       <Box className={classes.iconsContainer}>