Linlin Fix project table header UI, button styling, and member filtering

[linlin-husky]

Description

• Standardized the table header sorting and filtering buttons to a uniform 30x30px size with clean Flexbox alignment (resolving issues 1.1 & 1.2).
• Applied a dedicated modular CSS class (badgeTextBlack) combined with !important to permanently lock active member count badge text color to black across both light and dark modes (resolving issue 1.3).
• Corrected and verified the logic for sorting projects by active member counts within generateProjectList (resolving issue 1.4).
• Cleaned up redundant CSS selectors and legacy styles for better maintainability.

Fixes # PR#3499 (UI/UX and filtering issues in Projects table)

Related PRs (if any):

This frontend PR is related to previous PRs:
PR3320
PR1257
latest PR3449

Main changes explained:

• Updated projects.module.css to add .badgeTextBlack, standardize 30x30 dropdown/sort buttons, and remove default carets/artifacts.
• Updated Project.jsx to incorporate the modular black text class for member count badges.
• Updated Projects.jsx to ensure robust sorting and filtering integration for project lists and members.

How to test:

1. Check into the current branch.
2. Run npm install to install dependencies, then run the app locally (npm run start:local).
3. Clear site data/cache.
4. Log in as an admin user.
5. Go to Dashboard -> Other Links -> Projects.
6. Verify that all table header sorting/filtering buttons are uniformly aligned (30x30px).
7. Toggle Dark Mode and verify that the active member count numbers on the green badges remain strictly black and high-contrast.
8. Test filtering by user/project name, status, category, and sorting by active members.

Screenshots or videos of changes:

Screen.Recording.2026-09-04.at.12.45.13.PM.mov

Note:

• Special attention has been paid to Dark Mode compatibility. The active member count badge text color is explicitly locked to black across both light and dark themes to ensure maximum contrast and accessibility.
• All header sorting and filtering buttons are strictly standardized to 30x30px with centered alignment to prevent layout shifts.
  (Attach your screenshots showing the code and the UI areas here)

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	537d0fe
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a9af5da1f26140008affafd
😎 Deploy Preview	https://deploy-preview-5504--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

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

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
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