Skip to content

Gayatri - Participation: add icons to Drop-off and No-show Rate Tracking filters #5786

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sawantgayatri19 wants to merge 1 commit into
base: development
Choose a base branch
from
Open

Gayatri - Participation: add icons to Drop-off and No-show Rate Tracking filters #5786

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 48 additions & 23 deletions src/components/CommunityPortal/Reports/Participation/DropOffTracking.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
Expand Down Expand Up @@ -55,30 +58,52 @@ function DropOffTracking() {
darkMode ? styles.trackingContainerDark : ''
}`}
>
<div className={`${styles.trackingHeader} ${darkMode ? styles.trackingHeaderDark : ''}`}>
<div
className={`${styles.trackingHeader} ${darkMode ? styles.trackingHeaderDark : ''} ${
iconStyles.trackingHeaderWrap
}`}
>
<h3>Drop-off and no-show rate tracking</h3>
<div className={styles.trackingFilters}>
<select
className={styles.filterDropdown}
value={selectedEvent}
onChange={e => setSelectedEvent(e.target.value)}
>
<option value="All Events">All Events</option>
<option value="Yoga Class">Yoga Class</option>
<option value="Cooking Workshop">Cooking Workshop</option>
<option value="Dance Class">Dance Class</option>
<option value="Fitness Bootcamp">Fitness Bootcamp</option>
</select>
<select
className={styles.filterDropdown}
value={selectedTime}
onChange={e => setSelectedTime(e.target.value)}
>
<option value="All Time">All Time</option>
<option value="Today">Today</option>
<option value="This Week">This Week</option>
<option value="This Month">This Month</option>
</select>
<div className={`${styles.trackingFilters} ${iconStyles.trackingFiltersRow}`}>
<div className={iconStyles.trackingFilterField}>
<FontAwesomeIcon
icon={faCalendarCheck}
className={`${iconStyles.trackingFilterIcon} ${
darkMode ? iconStyles.trackingFilterIconDark : ''
}`}
/>
<select
className={`${styles.filterDropdown} ${iconStyles.trackingFilterDropdownWithIcon}`}
aria-label="Filter by event"
value={selectedEvent}
onChange={e => setSelectedEvent(e.target.value)}
>
<option value="All Events">All Events</option>
<option value="Yoga Class">Yoga Class</option>
<option value="Cooking Workshop">Cooking Workshop</option>
<option value="Dance Class">Dance Class</option>
<option value="Fitness Bootcamp">Fitness Bootcamp</option>
</select>
</div>
<div className={iconStyles.trackingFilterField}>
<FontAwesomeIcon
icon={faClock}
className={`${iconStyles.trackingFilterIcon} ${
darkMode ? iconStyles.trackingFilterIconDark : ''
}`}
/>
<select
className={`${styles.filterDropdown} ${iconStyles.trackingFilterDropdownWithIcon}`}
aria-label="Filter by time"
value={selectedTime}
onChange={e => setSelectedTime(e.target.value)}
>
<option value="All Time">All Time</option>
<option value="Today">Today</option>
<option value="This Week">This Week</option>
<option value="This Month">This Month</option>
</select>
</div>
</div>
</div>

Expand Down
40 changes: 40 additions & 0 deletions src/components/CommunityPortal/Reports/Participation/DropOffTracking.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;

Check warning on line 24 in src/components/CommunityPortal/Reports/Participation/DropOffTracking.module.css

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Remove this "!important" and resolve the specificity conflict instead. 


See more on https://sonarcloud.io/project/issues?id=OneCommunityGlobal_HighestGoodNetworkApp&issues=AaGt7VR9oGioaSudC0Y9&open=AaGt7VR9oGioaSudC0Y9&pullRequest=5786
padding-left: 1.9rem !important;

Check warning on line 25 in src/components/CommunityPortal/Reports/Participation/DropOffTracking.module.css

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Remove this "!important" and resolve the specificity conflict instead. 


See more on https://sonarcloud.io/project/issues?id=OneCommunityGlobal_HighestGoodNetworkApp&issues=AaGt7VR9oGioaSudC0Y-&open=AaGt7VR9oGioaSudC0Y-&pullRequest=5786
}

/* 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;
}
Loading