diff --git a/src/components/CommunityPortal/Reports/Participation/DropOffTracking.jsx b/src/components/CommunityPortal/Reports/Participation/DropOffTracking.jsx index 2ceb747caaa..bbc662e44e4 100644 --- a/src/components/CommunityPortal/Reports/Participation/DropOffTracking.jsx +++ b/src/components/CommunityPortal/Reports/Participation/DropOffTracking.jsx @@ -1,9 +1,12 @@ import { useState } from 'react'; import { useSelector } from 'react-redux'; import styles from './Participation.module.css'; +import iconStyles from './DropOffTracking.module.css'; import { ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react'; import mockEvents from './mockData'; import { filterEventsByDate } from './FilterByDate'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faCalendarCheck, faClock } from '@fortawesome/free-solid-svg-icons'; function DropOffTracking() { const [selectedEvent, setSelectedEvent] = useState('All Events'); @@ -55,30 +58,52 @@ function DropOffTracking() { darkMode ? styles.trackingContainerDark : '' }`} > -
+

Drop-off and no-show rate tracking

-
- - +
+
+ + +
+
+ + +
diff --git a/src/components/CommunityPortal/Reports/Participation/DropOffTracking.module.css b/src/components/CommunityPortal/Reports/Participation/DropOffTracking.module.css new file mode 100644 index 00000000000..8ea474faf23 --- /dev/null +++ b/src/components/CommunityPortal/Reports/Participation/DropOffTracking.module.css @@ -0,0 +1,40 @@ +/* Drop-off and no-show tracking: filter icons inside each dropdown */ +.trackingFilterField { + position: relative; + display: inline-flex; + align-items: center; +} + +.trackingFilterIcon { + position: absolute; + left: 10px; + top: 50%; + transform: translateY(-50%); + width: 12px; + height: 12px; + color: #6b7280; + pointer-events: none; +} + +.trackingFilterIconDark { + color: #cbd5e1; +} + +.trackingFilterField .trackingFilterDropdownWithIcon { + margin-left: 0 !important; + padding-left: 1.9rem !important; +} + +/* Keep the title and the filters from overlapping: the filters sit side by + side, and move below the title when the card is too narrow. */ +.trackingHeaderWrap { + flex-wrap: wrap; + gap: 8px 16px; +} + +.trackingFiltersRow { + display: flex; + align-items: center; + gap: 10px; + flex-shrink: 0; +}