UI Polish and Theme Toggle Fix on Top of API Integration

[xanderbilla]

This PR adds UI polish and fixes theme toggle synchronization issues, building on top of the existing API integration foundation in the main branch.

🔧 Changes Made

🌙 Theme Toggle Fix

• Fixed theme toggle button synchronization issue where the icon would sometimes show incorrect state in dark mode
• Replaced theme with resolvedTheme from next-themes for more reliable theme detection
• Added proper isDark boolean logic to eliminate hydration mismatches
• Ensures Sun icon shows in dark mode and Moon icon shows in light mode consistently

🎨 UI Design System Enhancement

• Enhanced AWS Cloudscape Design System integration on top of existing API structure
• Improved CSS custom properties for better visual hierarchy:
  • Light mode: Enhanced background (#fafbfc) and foreground (#16191f) colors
  • Refined glassmorphism effects with better opacity and blur values
  • Updated primary color to AWS Blue (#0972d3) for consistency
  • Improved neutral grays and surface colors for better contrast

🔧 Component Polish

• Updated filter buttons in bucket component with improved styling that works with the API data
• Fixed contact email display (removed "mail." prefix for cleaner presentation)
• Enhanced visual consistency across glassmorphism components while maintaining API functionality

🐛 Bug Fixes

• Theme Toggle Synchronization: Resolved critical issue where theme toggle button would show Moon icon even in dark mode
• Email Display: Corrected contact email from "mail.vikas99blr@gmail.com" to "vikas99blr@gmail.com"

🔗 Built On Top Of

This PR builds on the existing API integration work already in main branch, which includes:

• ✅ Complete API service layer integration
• ✅ Pagination and data fetching
• ✅ AWS S3 bucket management APIs
• ✅ Authentication middleware
• ✅ Hook-based data management

🎯 Technical Details

• Used resolvedTheme instead of theme property for accurate theme state detection
• Enhanced AWS Cloudscape design tokens while preserving API integration functionality
• Improved glassmorphism effects without affecting API performance
• Maintained all existing API endpoints and data flow

✅ Testing

• Theme toggle works correctly in both light and dark modes
• No hydration mismatches during SSR
• All existing API functionality preserved
• Visual consistency maintained across API-driven components
• Contact page displays correct email address

📱 Impact

This PR focuses on user experience improvements and visual polish without modifying the underlying API integration architecture already established in main.

---

Related Issues: Fixes theme toggle synchronization bug and provides UI polish for the API-integrated application

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nebulas3	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 12, 2025 10:50pm