Hactoberfest sencond week
For the second week, I worked on the same issue due to a miscommunication. I tackled critical visual bugs and implemented architectural improvements to PhysicsHub that improved the user experience, especially in dark mode.
What I Fixed
Dark Mode Visibility Issues
The Stars components scattered across various pages were practically invisible in dark mode. I updated them to use a brighter color (#AEE3FF) that maintains proper visibility in both light and dark themes. No more squinting to see those decorative stars!
The homepage had another issue—the radial glow effect wasn't showing up in dark mode at all. After digging into the z-index layering and transparency settings, I resolved the conflicts that were hiding this visual element.
React Architecture Overhaul
The project was repeating Header and Footer components on every single page, which isn't just inefficient—it makes maintenance a nightmare. I refactored the entire structure to use a centralized Layout component. Now the header and footer live in one place, wrapping all page content automatically.
This also fixed footer positioning issues. Using proper flexbox layout, the footer now consistently stays at the bottom of the page regardless of content height.
Why This Matters
Dark mode shouldn't feel like a half-finished feature. These visibility fixes ensure users get a consistent, polished experience whether they prefer light or dark themes.
The architectural changes might seem invisible to users, but they make the codebase significantly cleaner and easier to maintain. Future contributors won't have to update headers and footers in multiple places, and the layout behavior is now predictable across all pages.
Hacktoberfest 2025 Contribution
Issue #15 | Pull Request #70
Top comments (0)