added hoverable info icons to DateSelector and NCSelector

hackforla · Feb 23, 2020 · 2ecad4b · 2ecad4b
1 parent 2f583b0
commit 2ecad4b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git a/src/components/main/menu/DateSelector/DateSelector.jsx b/src/components/main/menu/DateSelector/DateSelector.jsx
@@ -10,6 +10,8 @@ import {
 import Dropdown from '../../../common/Dropdown';
 import Modal from '../../../common/Modal';
 import DateRangePicker from './DateRangePicker';
+import Icon from '../../../common/Icon';
+import HoverOverInfo from '../../../common/HoverOverInfo';
 
 import COLORS from '../../../../styles/COLORS';
 
@@ -88,9 +90,20 @@ const DateSelector = ({
       }}
     >
       <div className="date-selector-title">
-        <span className="has-text-weight-bold is-size-6">
+        <span
+          className="has-text-weight-bold is-size-6"
+          style={{ paddingRight: '10px' }}>
           Date Range Selection
         </span>
+        <HoverOverInfo
+          title="Date Range Selection"
+          text="This filter allows the user to choose a date range for 311 data.">
+          <Icon
+            id="type-selector-info-icon"
+            icon="info-circle"
+            size="small"
+          />
+        </HoverOverInfo>
       </div>
       <div className="date-selector-dates" style={{ padding: '15px 0 10px' }}>
         <span className="has-text-weight-normal">

diff --git a/src/components/main/menu/NCSelector.jsx b/src/components/main/menu/NCSelector.jsx
@@ -6,6 +6,8 @@ import { updateNC } from '../../../redux/reducers/data';
 
 import { COUNCILS } from '../../common/CONSTANTS';
 import Checkbox from '../../common/Checkbox';
+import Icon from '../../common/Icon';
+import HoverOverInfo from '../../common/HoverOverInfo';
 
 const NCSelector = ({
   updateNCList,
@@ -68,9 +70,18 @@ const NCSelector = ({
     <div className="nc-selector" style={{ width: '349px' }}>
       <div className="nc-title">
         <p className="is-size-6" style={{ padding: '15px 0' }}>
-          <strong>
+          <strong style={{ paddingRight: '10px' }}>
             Neighborhood Council (NC) Selection
           </strong>
+          <HoverOverInfo
+            title="Neighborhood Council (NC) Selection"
+            text="This filter allows the user to select specific neighborhood councils.">
+            <Icon
+              id="type-selector-info-icon"
+              icon="info-circle"
+              size="small"
+            />
+          </HoverOverInfo>
         </p>
       </div>