Fix/game UI redesign

[Umeshinduranga]

This pull request significantly improves the UI and UX for the game cards and game overlay components in the recovery system frontend. The changes modernize the visual design, introduce consistent accent colors and iconography, and streamline interaction patterns for actions like playing, favoriting, and sharing games. Additionally, the code is refactored for clarity and maintainability, with unified button styles and improved use of React state.

UI/UX Enhancements

• Game cards (GameCard.tsx) and overlay (GameOverlay.tsx) now use consistent accent colors and Lucide icons for each game, improving visual branding and clarity. [1] [2]
• Action buttons (play, favorite, share, hide) are visually unified and provide clearer feedback on hover and selection. Dropdown menus in GameCard.tsx are replaced with icon-labeled options, and favorite/save actions in GameOverlay.tsx use stateful heart icons. [1] [2]
• Game difficulty, estimated time, and category are displayed as distinct badges, making information more accessible at a glance.
• Footer sections for cards and overlays now show active player counts, ratings, and earned points in a more readable and visually appealing manner. [1] [2]

Code Refactoring and Consistency

• Button components are simplified and unified, with custom hover logic and consistent font usage. Redundant components (DDBtn, BackBtn, FavBtn) are removed in favor of inline button implementations. [1] [2]
• Category and icon mappings are centralized and standardized, reducing duplication and making it easier to add new games or categories. [1] [2]
• Layout and spacing are improved throughout, with updated padding, border radius, and font settings for a cleaner look and feel. [1] [2]

[vercel]

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

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
re-life-website	Ignored		Mar 20, 2026 7:28pm

[Umeshinduranga]

Reviewed