929 front date selector bug fix

client/components/FilterMenu/index.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import PropTypes from 'proptypes';
 import { connect } from 'react-redux';
 import { toggleMenu as reduxToggleMenu } from '@reducers/ui';
-import DateSelector from '@components/DateSelector';
+import DateSelector from '@components/DateSelector/DateSelector';
 import Card from '@material-ui/core/Card';
 import CardHeader from '@material-ui/core/CardHeader';
 import CardContent from '@material-ui/core/CardContent';
@@ -33,11 +33,14 @@ const useStyles = makeStyles(theme => ({
     margin: 'auto',
   },
   headerTitle: {
+    ...theme.typography.h1,
     marginLeft: theme.gaps.xs,
-    fontSize: 20,
-    fontWeight: 600,
     letterSpacing: '2px',
   },
+  headerContent: {
+    display: 'flex',
+    alignItems: 'center',
+  },
   button: {
     padding: theme.gaps.xs,
     paddingRight: 0,
@@ -63,13 +66,14 @@ const FilterMenu = ({ toggleMenu }) => {
           root: classes.header,
           action: classes.headerAction,
         }}
+        disableTypography
         title={(
-          <>
+          <div className={classes.headerContent}>
             <GearButton aria-label="toggle map menu" onClick={toggleMenu} />
-            <Typography className={classes.headerTitle} component="span">
+            <Typography className={classes.headerTitle} variant="h1">
               FILTERS
             </Typography>
-          </>
+          </div>
         )}
         action={(
           <IconButton

client/components/common/DatePicker/DatePicker.jsx

@@ -80,7 +80,6 @@ const renderSelectedDays = (dates, classes, range) => {
 const DatePicker = ({
   dates, onSelect, open, onToggle, range,
 }) => {
-  const [coord, setCoord] = useState({});
   const [selectedDays, setSelectedDays] = useState(() => dates);
   const [showCalendar, setShowCalendar] = useState(() => open);
   const classes = useStyles();
@@ -97,17 +96,17 @@ const DatePicker = ({
     setSelectedDays(() => dates);
   }, [dates]);
 
-  useEffect(() => {
+  const getCoordinates = () => {
     if (ref.current) {
       const { left, top, height } = ref.current.getClientRects()[0];
       const offsetFromSelectorDisplay = 2;
-
-      setCoord(() => ({
+      return {
         left,
         top: top + height + offsetFromSelectorDisplay,
-      }));
+      };
     }
-  }, []);
+    return {};
+  };
 
   const toggleCalendar = () => {
     setShowCalendar(prevState => !prevState);
@@ -131,7 +130,7 @@ const DatePicker = ({
       >
         <CalendarIcon />
       </IconButton>
-      <div style={coord} className={classes.selectorPopUp}>
+      <div style={getCoordinates()} className={classes.selectorPopUp}>
         {showCalendar ? (
           <ReactDayPicker
             range={range}

client/components/common/ReactDayPicker/Styles.jsx

@@ -50,7 +50,7 @@ const Styles = ({ range }) => {
       color: #a8a8a8;
     }
 
-    /* Day cel hover */
+    /* Day cell hover */
 
     .DayPicker:not(.DayPicker--interactionDisabled)
       .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
@@ -88,10 +88,10 @@ const Styles = ({ range }) => {
       left: 1.5rem;
     }
 
-    /*Rounded border with volume for selected start end days */
+    /*Rounded border with volume for selected start and end days */
 
-    .Range .DayPicker-Day.DayPicker-Day--start.DayPicker-Day--selected:before,
-    .Range .DayPicker-Day.DayPicker-Day--end.DayPicker-Day--selected:before {
+    .Range .DayPicker-Day.DayPicker-Day--start.DayPicker-Day--selected:not(.DayPicker-Day--outside):before,
+    .Range .DayPicker-Day.DayPicker-Day--end.DayPicker-Day--selected:not(.DayPicker-Day--outside):before {
       content: "";
       position: absolute;
       border: 2px solid white;
@@ -129,7 +129,7 @@ const Styles = ({ range }) => {
     }
 
 
-    /* Layout styling, Initial styling was table based. See doc:  */
+    /* Layout styling, Initial styling was table based. See docs:  */
     /* https://react-day-picker.js.org/examples/selected-range-enter  */ 
 
     .Range .DayPicker-Caption,

client/components/common/SelectorBox.jsx

@@ -18,26 +18,19 @@ const useStyles = makeStyles(theme => ({
   header: {
     backgroundColor: theme.palette.primary.dark,
     color: theme.palette.text.primary,
-    padding: 5,
-    paddingLeft: 10,
-    fontSize: '1rem',
+    padding: theme.gaps.xs,
+    paddingLeft: theme.gaps.sm,
     marginBottom: 2,
-    borderRadius: 5,
+    borderRadius: theme.borderRadius.sm,
   },
   content: {
-    borderRadius: 5,
+    borderRadius: theme.borderRadius.sm,
     backgroundColor: theme.palette.primary.dark,
-    padding: '10px 10px',
+    padding: theme.gaps.sm,
   },
   headerAction: {
     margin: 'auto',
   },
-  headerTitle: {
-    marginLeft: 10,
-    fontSize: 20,
-    fontWeight: 600,
-    letterSpacing: '2px',
-  },
   button: {
     padding: '0 0 0 5px',
     '&:hover': {
@@ -74,7 +67,8 @@ const SelectorBox = ({
   };
 
   const renderDisplay = () => {
-    const element = children.find(child => child.type.name === 'Display');
+    const element = children.find(child => child.type.displayName === 'Display');
+
     return (
       <CardHeader
         disableTypography
@@ -103,10 +97,12 @@ const SelectorBox = ({
       />
     );
   };
+
   const renderCollapse = () => {
-    const element = children.find(child => child.type.name === 'Collapse');
+    const element = children.find(child => child.type.displayName === 'Collapse');
     return element;
   };
+
   return (
     <Context.Provider value={{ expanded, classes }}>
       <Card className={classes.card}>
@@ -135,6 +131,7 @@ function Display({ children }) {
   return <div>{children}</div>;
 }
 
+Display.displayName = 'Display';
 Display.propTypes = {
   children: PropTypes.node,
 };
@@ -153,6 +150,7 @@ function Collapse({ children }) {
   );
 }
 
+Collapse.displayName = 'Collapse';
 Collapse.propTypes = {
   children: PropTypes.node,
 };