feat: Mobile-only contextual headers + consistent button sizing
Implemented 3 key improvements based on user feedback: 1. ✅ PageHeader Mobile-Only Problem: Contextual header showing on desktop was redundant Solution: Added md:hidden to PageHeader component Before: Desktop: Shows "Store Details" header (redundant with nav) Mobile: Shows "Store Details" header (good!) After: Desktop: No contextual header (clean!) Mobile: Shows "Store Details" header (perfect!) Result: Cleaner desktop UI, mobile gets contextual clarity 2. ✅ Contextual Headers on All Pages Problem: Dashboard and Payments pages missing contextual headers Solution: - Added usePageHeader to Dashboard - Fixed SettingsLayout to always set header (not just when onSave exists) Before: - Dashboard: No header (confusing) - Payments: No header (confusing) - Store Details: Has header (only one working) After: - Dashboard: "Dashboard" header ✓ - Payments: "Payments" header ✓ - Store Details: "Store Details" header ✓ - All settings pages: Contextual headers ✓ Result: Consistent UX across all pages! 3. ✅ Re-added .ui-ctrl to Button Problem: Removed .ui-ctrl earlier, but it's needed for mobile sizing Solution: Added .ui-ctrl back to Button component Why .ui-ctrl is Good: - Mobile: 44px height (good touch target) - Desktop: 36px height (compact, efficient) - Responsive by default - Follows UI/UX best practices Result: Buttons properly sized for touch on mobile! Mobile Layout (Final): ┌─────────────────────────────────┐ │ Dashboard │ ← Contextual header! ├─────────────────────────────────┤ │ Overview | Revenue | Orders ... │ ← Submenu ├─────────────────────────────────┤ │ Last 7 days [Refresh] │ ├─────────────────────────────────┤ │ Revenue │ │ Rp64.500 │ │ 99.9% vs previous 7 days │ │ ( + ) │ ← FAB ├─────────────────────────────────┤ │ Bottom Nav │ └─────────────────────────────────┘ Desktop Layout (Final): ┌─────────────────────────────────┐ │ Header │ ├─────────────────────────────────┤ │ Dashboard | Orders | Products │ ← Top Nav ├─────────────────────────────────┤ │ Overview | Revenue | Orders ... │ ← Submenu ├─────────────────────────────────┤ │ (No contextual header) │ ← Clean! ├─────────────────────────────────┤ │ Revenue │ │ Rp64.500 │ └─────────────────────────────────┘ Files Modified: - PageHeader.tsx: Added md:hidden for mobile-only - Dashboard/index.tsx: Added contextual header - SettingsLayout.tsx: Always set header (not just with onSave) - button.tsx: Re-added .ui-ctrl class Result: ✅ Mobile: Contextual headers on all pages ✅ Desktop: Clean, no redundant headers ✅ Buttons: Proper touch targets (44px mobile, 36px desktop) ✅ Consistent UX across all pages! 🎉
This commit is contained in:
@@ -45,7 +45,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
const Comp = asChild ? Slot : "button"
|
||||
return (
|
||||
<Comp
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
className={cn('ui-ctrl', buttonVariants({ variant, size, className }))}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user