Diya 🔥 fix(filterUI): Fixed Filter UI on Weekly Summary Reports Page

[DiyaWadhwani]

Description

Improves the layout and visual consistency of the Weekly Summaries Report page filter section. Addresses feedback about font sizes, organization, toggle consistency, and dropdown alignment.

Related PRs (if any):

None

Main changes explained:

WeeklySummariesReport.jsx

• Moved Bio Status, Trophies, and Over Hours toggle filters from the right column to the left column, below the team code selector
• Moved Select Extra Members and Logged Hours Range into their own row with consistent marginTop spacing so both columns align vertically
• Added marginTop to Select Color label on the right column to align with the left column's dropdown which sits below the Show Chart header row

WeeklySummariesReport.module.css

• Changed filterRow to flex-direction: column so Filter by Special Colors and Select All (Visible Users) always stack vertically instead of wrapping onto the same row
• Fixed align-items: left → align-items: flex-start
• Added min-height and height overrides for the MultiSelect dropdown container to match the react-select dropdown height of 50px

WeeklySummariesToggleFilter.jsx

• Used SlideToggle component instead of CSS switch toggles so all toggles on the page are the same size and style, with a "Filter by:" label prefix matching the Special Colors row format

SlideToggle.module.scss

• Added a neutral gray .default color for non-color toggles, and fix all lint errors (hex shorthand, double-slash comments, pseudo-element notation, longhand inset properties)

How to test:

1. Check out the current branch
2. Run npm install and start the dev server with npm run start:local
3. Clear site data/cache
4. Log in as an Owner or Administrator
5. Navigate to Reports → Weekly Summaries
6. Verify Filter by: Bio Status / Trophies / Over Hours toggles appear on the left side below the team code selector
7. Verify all toggles (Filter by, Filter by Special Colors) are the same size and style
8. Verify the "Select All (Visible Users)" dots appear on a separate row below Filter by Special Colors when team codes are selected
9. Verify all dropdowns are the same height
10. Verify any text entry into the dropdown doesn't create extra spacing
11. Verify the layout looks properly aligned at normal and reduced screen widths

Screenshots or videos of changes:

Before:

After:

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	315f255
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69e1724c5079880008e0f94a
😎 Deploy Preview	https://deploy-preview-5161--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[sonarqubecloud]

Quality Gate passed

Issues
7 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud