Description:
Summary
This PR enhances the StablePay Merchant Dashboard with a complete theme system, improved layout, and professional shadow design for better user experience.
Features Added
🌓 Theme System
-
Light/Dark Mode Toggle - Seamless switching between themes
-
System Theme Support - Automatically follows OS preference
-
Persistent Settings - Theme choice saved across sessions
-
Mobile & Desktop - Theme toggle available on all devices
Enhanced Shadows & Visual Design
-
Brand-Aligned Shadows - Orange-themed shadows matching StablePay colors
-
Light Mode - Clean, professional shadows for clarity
-
Dark Mode - Warm orange glow effects using brand colors (oklch(0.65 0.22 45))
-
Interactive Elements - Hover effects with shadow transitions
Layout Improvements
-
Seamless Sidebar - Removed gaps between sidebar and main content
-
Better Proportions - Optimized 25/75 sidebar-to-content ratio
-
Full Width Usage - Content extends to full viewport width
-
Responsive Design - Consistent across all screen sizes
Technical Improvements
Fixed Issues
✅ Icon Visibility - Overview page icon now visible in light mode
✅ Tab Button Text - WEEK/MONTH/YEAR buttons readable in light mode
✅ Theme Toggle Functionality - Clickable theme switcher in sidebar
✅ Dark Mode Shadows - Highly visible shadows with brand colors
Enhanced Components
-
Sidebar - Orange glow effects, full height, proper sizing
-
Navigation - Enhanced shadows for better depth
-
Cards & Stats - Improved elevation with hover effects
-
Charts - Better visual separation with accent shadows
-Buttons & Tabs - Brand-aligned interactive shadows
User Experience
-
Professional Appearance - Modern, cohesive design language
-
Brand Consistency - Orange theme throughout dark mode
-
Better Accessibility - High contrast, readable text in both themes
-
Smooth Interactions - Fluid theme switching and hover effects
Responsive Design
-
Mobile Header - Theme toggle in mobile navigation
-
Desktop Sidebar - Advanced theme options with dropdown
-
Consistent Shadows - Adaptive shadow system for all screen sizes
Before/After
-
Before: Basic dark theme, gaps in layout, invisible elements in light mode
-
After: Professional dual-theme system, seamless layout, brand-aligned shadows
Ready for Production
All components tested in both light and dark modes
Responsive design verified across devices
Brand colors properly integrated
No breaking changes to existing functionality
Description:
Summary
This PR enhances the StablePay Merchant Dashboard with a complete theme system, improved layout, and professional shadow design for better user experience.
Features Added
🌓 Theme System
Light/Dark Mode Toggle - Seamless switching between themes
System Theme Support - Automatically follows OS preference
Persistent Settings - Theme choice saved across sessions
Mobile & Desktop - Theme toggle available on all devices
Enhanced Shadows & Visual Design
Brand-Aligned Shadows - Orange-themed shadows matching StablePay colors
Light Mode - Clean, professional shadows for clarity
Dark Mode - Warm orange glow effects using brand colors (oklch(0.65 0.22 45))
Interactive Elements - Hover effects with shadow transitions
Layout Improvements
Seamless Sidebar - Removed gaps between sidebar and main content
Better Proportions - Optimized 25/75 sidebar-to-content ratio
Full Width Usage - Content extends to full viewport width
Responsive Design - Consistent across all screen sizes
Technical Improvements
Fixed Issues
✅ Icon Visibility - Overview page icon now visible in light mode
✅ Tab Button Text - WEEK/MONTH/YEAR buttons readable in light mode
✅ Theme Toggle Functionality - Clickable theme switcher in sidebar
✅ Dark Mode Shadows - Highly visible shadows with brand colors
Enhanced Components
Sidebar - Orange glow effects, full height, proper sizing
Navigation - Enhanced shadows for better depth
Cards & Stats - Improved elevation with hover effects
Charts - Better visual separation with accent shadows
-Buttons & Tabs - Brand-aligned interactive shadows
User Experience
Professional Appearance - Modern, cohesive design language
Brand Consistency - Orange theme throughout dark mode
Better Accessibility - High contrast, readable text in both themes
Smooth Interactions - Fluid theme switching and hover effects
Responsive Design
Mobile Header - Theme toggle in mobile navigation
Desktop Sidebar - Advanced theme options with dropdown
Consistent Shadows - Adaptive shadow system for all screen sizes
Before/After
Before: Basic dark theme, gaps in layout, invisible elements in light mode
After: Professional dual-theme system, seamless layout, brand-aligned shadows
Ready for Production
All components tested in both light and dark modes
Responsive design verified across devices
Brand colors properly integrated
No breaking changes to existing functionality