Merge pull request #1838 from hackforla/1835-fix-filter-modal-date-range

1835 Fix Filter modal's date range buttons style not being applied

Author: Brandoncyu

components/DateSelector/DateSelector.jsx

@@ -11,7 +11,7 @@ import {
 import Typography from '@mui/material/Typography';
 import ArrowToolTip from '@components/common/ArrowToolTip';
 import options from './options';
-import makeStyles from '@mui/styles/makeStyles';
+import useStyles from './useStyles';
 import DateRanges from './DateRanges';
 
 const dateFormat = 'YYYY-MM-DD';
@@ -22,16 +22,6 @@ function DateSelector({
   updateEndDate,
 }) {
   const [expanded, setExpanded] = useState(false);
-  const useStyles = makeStyles(theme => ({
-  iconStyle: {
-    verticalAlign: 'middle',
-  },
-    header: {
-      fontSize: '12.47px',
-      fontWeight: theme.typography.fontWeightMedium,
-      marginBottom: '8px',
-    },
-  }));
   const classes = useStyles();
 
   const handleOptionSelect = optionDates => {

components/DateSelector/useStyles.js

@@ -43,6 +43,14 @@ const useStyles = makeStyles(theme => ({
   tooltipParagraph: {
     margin: '1px',
   },
+  iconStyle: {
+    verticalAlign: 'middle',
+  },
+    header: {
+      fontSize: '12.47px',
+      fontWeight: theme.typography.fontWeightMedium,
+      marginBottom: '8px',
+    },
 }));
 
 export default useStyles;