fix: dark mode theming, icon/animation polish, and cleanup fixes

[vinodhan07]

Summary

Fixes the dark mode bug where Community filter tabs and Dashboard/Analytics charts stayed
hardcoded to light-theme colors, plus several small improvements/fixes found along the way.

Closes #

1. Dark mode fix (the reported bug)

• CommunityHub.jsx: removed inline hardcoded styles on the filter buttons; now driven by
  .filter-tabs button / .filter-tabs button.active classes using the existing theme
  variables (--card, --ink, --line, --brand).
• Dashboard.jsx / AnalyticsInsights.jsx: CartesianGrid stroke and axis tick colors now
  use var(--line) / var(--muted) instead of hardcoded hex, so charts stay legible in
  both themes.
• Fixed Dashboard.jsx's CustomTooltip, which referenced nonexistent CSS variables
  (--bg-card, --text-primary, etc.) and silently fell back to hardcoded light colors.

2. Smooth micro-animations

• Filter tabs get a hover lift + press-down feedback.
• Chart cards and community report cards fade/rise in on mount, with a staggered delay
  across report cards.

3. Emoji → icon conversion

• Replaced ~30 emoji used as UI icons (game HUD, mission/policy icons, Scenario Simulator,
  footer) with lucide-react icons for consistent, theme-reactive rendering.

4. Small fixes found while testing

• HealthAdvisory.jsx: fixed a React key warning — key={section.id} referenced a field
  that doesn't exist on the sections array, so every card rendered with key={undefined}.
• styles.css: fixed Safari support for backdrop-filter on the hero eyebrow badge and
  sticky nav bar (missing/misordered -webkit-backdrop-filter prefix).

Test plan

• npm run build succeeds with no errors
• Toggled dark/light mode across Community, Dashboard, and Analytics — all legible in
  both themes, no regression in light mode
• Played a full Game mission start-to-finish to confirm all icon replacements render,
  including dynamic success/failure states
• Verified Scenario Simulator presets, sliders, and city comparison
• Confirmed the HealthAdvisory console warning is gone and backdrop-filter still renders
• No console errors in any of the above flows

[vercel]

@vinodhan07 is attempting to deploy a commit to the Aditya Mahajan's projects Team on Vercel.

A member of the Team first needs to authorize it.

[vinodhan07]

Hi @Aditya8369 👋

I've fixed this issue — the Community filter tabs and Dashboard/Analytics charts now
properly respond to the dark/light theme toggle using the existing --card, --ink,
--line, and --brand CSS variables instead of hardcoded hex colors.

While testing, I also picked up a few related improvements in the same files:

• Smooth micro-animations on the filter tabs and chart/report cards
• Replaced ~30 emoji used as UI icons across the app with lucide-react icons, so they
  render consistently and recolor correctly with the theme
• Fixed a React key-prop bug in HealthAdvisory.jsx and a Safari backdrop-filter
  compatibility issue in styles.css

I opened PR #122 earlier but closed it due to some confusion on my end with the deployment
authorization step — I've reopened a clean PR with the same commits here: PR #123

Everything's been tested locally (build passes, no console errors, verified both themes
across all the changed screens). Happy to make any changes you'd like — let me know if
anything needs adjusting!

[Aditya8369]

@vinodhan07 can you tell issue no.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
pollution-control-hub	Ready	Preview, Comment	Jul 9, 2026 6:06pm

[github-actions]

🎉 Your PR just got merged, @vinodhan07 — thank you for contributing to Pollution Control Hub!

Your work is now part of the project. Here's what to do next:

• ⭐ If you haven't already, consider giving the repo a star — it helps us grow.
• 📢 Share your contribution on LinkedIn, Twitter, or wherever you hang out. You shipped open source!
• 🔍 Browse other open issues if you want to keep contributing.

We really appreciate you taking the time. See you in the next PR! 🚀