Merge pull request #1703 from bphan002/1696-update-styling-on-date-pi…

…cker-warningtooltip 1696 update styling on date picker warningtooltip
hackforla · Mar 30, 2024 · 59467bd · 59467bd
2 parents fb5b3d8 + 2c6b433
commit 59467bd
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 4 deletions.
diff --git a/components/DateSelector/DateSelector.jsx b/components/DateSelector/DateSelector.jsx
@@ -8,8 +8,9 @@ import {
   updateStartDate as reduxUpdateStartDate,
   updateEndDate as reduxUpdateEndDate,
 } from '@reducers/filters';
-import Tooltip from '@mui/material/Tooltip';
+import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import { styled } from '@mui/material/styles';
 import options from './options';
 import useStyles from './useStyles';
 import DateRanges from './DateRanges';
@@ -38,13 +39,57 @@ function DateSelector({
 
   const { option, selected } = classes;
 
+  const ArrowToolTip = styled(({ className }) => (
+    <Tooltip
+      placement="top-end"
+      arrow
+      classes={{ popper: className }}
+      title={
+        (
+          <div>
+            <p className={classes.tooltipParagraph}>
+              <strong>
+                Currently, 311-Data loads only 311 service
+                request data from 2024 onward.
+              </strong>
+            </p>
+            <p className={classes.tooltipParagraph}>
+              For updates on the release of available 311
+              Data, please follow our
+              {` `}
+              <a href='https://www.linkedin.com/company/hack-for-la/'>
+                LinkedIn Page
+              </a>
+            .
+            </p>
+          </div>
+        )
+      }
+    >
+      <InfoOutlinedIcon
+        className={classes.iconStyle}
+        fontSize="inherit"
+      />
+    </Tooltip>
+  ))(({ theme }) => ({
+    [`& .${tooltipClasses.arrow}`]: {
+      '&::before': {
+        backgroundColor: theme.palette.common.white,
+      },
+    },
+    [`& .${tooltipClasses.tooltip}`]: {
+      backgroundColor: theme.palette.common.white,
+      color: theme.palette.common.black,
+      marginLeft: '-4px',
+      maxWidth: '275px',
+      padding: '5px',
+    },
+  }));
   return (
     <>
       <span className={classes.label}>
         Date Range&nbsp;
-        <Tooltip title="311-Data is currently only able to load 311 service request data in 2024 and onwards. For updates on the release of available 311 Data, please follow our LinkedIn page at https://www.linkedin.com/company/hack-for-la/.">
-          <InfoOutlinedIcon className={classes.iconStyle} fontSize="inherit" />
-        </Tooltip>
+        <ArrowToolTip />
       </span>
       <SelectorBox onToggle={() => setExpanded(!expanded)} expanded={expanded}>
         <SelectorBox.Display>

diff --git a/components/DateSelector/useStyles.js b/components/DateSelector/useStyles.js
@@ -40,6 +40,9 @@ const useStyles = makeStyles(theme => ({
   selected: {
     backgroundColor: `${theme.palette.selected.primary} !important`,
   },
+  tooltipParagraph: {
+    margin: '1px',
+  },
 }));
 
 export default useStyles;