added activity icons with library heroicons

[DNCoding2112]

🌱 Carbon Footprint Tracker - Pull Request

Description

Added a consistent icon system using Heroicons Outline to replace emojis throughout the application. Created activityIcons.tsx utility for modular and reusable icon management with color-coded impact levels (low/medium/high). Updated ActivityForm and Dashboard components to display professional, accessible icons with proper styling and hover effects.

Type of Change

• 🐛 Bug fix (non-breaking change which fixes an issue)
• ✨ New feature (non-breaking change which adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
• 📚 Documentation update
• 🎨 Style/UI update
• ♻️ Code refactoring
• ⚡ Performance improvement
• 🧪 Test addition or update

Related Issue

Fixes #13

Changes Made

• Created src/utils/activityIcons.tsx utility with Heroicons Outline (24px) integration
• Implemented color-coded icon system (green=low, yellow=medium, red=high impact)
• Updated src/components/forms/ActivityForm.tsx with:
  • Icon badges and impact level indicators
  • Bordered activity cards with color-coded borders
  • Gradient sliders matching impact colors
  • Impact legend in form header
• Updated src/components/dashboard/Dashboard.tsx activity history section with:
  • Icon display in activity badges
  • Color-coded borders for each activity type
  • Enhanced visual hierarchy
• Added consistent 24x24px sizing for all activity icons
• Maintained compatibility with existing validation and ShareButton features

Screenshots (if applicable)

Testing

• I have tested this change locally
• I have tested on mobile devices
• I have tested on different browsers
• All existing tests pass
• I have added new tests (if applicable)

Checklist

• My code follows the project's style guidelines
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

Additional Notes

I integrated Icons, rebased with latest version of main, there is a pre existing error in activity form, but this PR is only about integrating icons(ui), and I will be creating a separate issue for the same.

Dependencies Added

• @heroicons/react (v2.0+) - MIT licensed icon library

Design Decisions

• Used Heroicons Outline style for modern, clean appearance
• Color coding based on typical CO2 emissions per activity unit:
  • Low Impact (Green): Emails, Cloud Storage
  • Medium Impact (Yellow): Coding, Social Media
  • High Impact (Red): Streaming, Video Calls, Gaming
• Icons are fully accessible with semantic SVG implementation
• Maintained backward compatibility with existing form validation and dashboard features

Technical Implementation

• Exported reusable ActivityIcon component with props for size and background display
• Created helper functions (getActivityIconConfig, getActivitiesByImpact) for easy icon management
• Used Tailwind CSS utility classes for consistent styling
• Gradient sliders dynamically colored based on activity impact level

Files Modified

1. NEW: src/utils/activityIcons.tsx (icon system utility)
2. UPDATED: src/components/forms/ActivityForm.tsx (icons + validation preserved)
3. UPDATED: src/components/dashboard/Dashboard.tsx (activity history icons + ShareButton preserved)

---

For Maintainers

• Code review completed
• Tests passing
• Documentation updated
• Ready to merge

---

Thank you for contributing to making digital sustainability more accessible! 🌍

This repository participates in Hacktoberfest 2025! 🎃