fix: Complete UI/UX polish - all 7 issues resolved
## ✅ Issue 1: Customers Submenu Missing in WP-Admin **Problem:** Tax and Customer submenus only visible in standalone mode **Root Cause:** PHP navigation registry did not include Customers **Fixed:** Added Customers to NavigationRegistry.php settings children **Result:** Customers submenu now shows in all modes ## ✅ Issue 2: App Logo/Title in Topbar **Problem:** Should show logo → store name → "WooNooW" fallback **Fixed:** Header component now: - Fetches branding from /store/branding endpoint - Shows logo image if available - Falls back to store name text - Updates on store settings change event **Result:** Proper branding hierarchy in app header ## ✅ Issue 3: Zone Card Header Density on Mobile **Problem:** "Indonesia Addons" row with 3 icons too cramped on mobile **Fixed:** Shipping.tsx zone card header: - Reduced gap from gap-3 to gap-2/gap-1 on mobile - Smaller font size on mobile (text-sm md:text-lg) - Added min-w-0 for proper text truncation - flex-shrink-0 on icon buttons **Result:** Better mobile spacing and readability ## ✅ Issue 4: Go to WP Admin Button **Problem:** Should show in standalone mode, not wp-admin **Fixed:** More page now shows "Go to WP Admin" button: - Only in standalone mode - Before Logout button - Links to /wp-admin **Result:** Easy access to WP Admin from standalone mode ## ✅ Issue 5: Customer Settings 403 Error **Problem:** Permission check failing for customer-settings endpoint **Fixed:** StoreController.php check_permission(): - Added fallback: manage_woocommerce OR manage_options - Ensures administrators always have access **Result:** Customer Settings page loads successfully ## ✅ Issue 6: Dark Mode Logo Upload Field **Problem:** No UI to upload dark mode logo **Fixed:** Store settings page now has: - "Store logo (Light mode)" field - "Store logo (Dark mode)" field (optional) - Backend support in StoreSettingsProvider - Full save/load functionality **Result:** Users can upload separate logos for light/dark modes ## ✅ Issue 7: Login Card Background Too Dark **Problem:** Login card same color as background in dark mode **Fixed:** Login.tsx card styling: - Changed from dark:bg-gray-800 (solid) - To dark:bg-gray-900/50 (semi-transparent) - Added backdrop-blur-xl for glass effect - Added border for definition **Result:** Login card visually distinct with modern glass effect --- ## Summary **All 7 Issues Resolved:** 1. ✅ Customers submenu in all modes 2. ✅ Logo/title hierarchy in topbar 3. ✅ Mobile zone card spacing 4. ✅ Go to WP Admin in standalone 5. ✅ Customer Settings permission fix 6. ✅ Dark mode logo upload field 7. ✅ Lighter login card background **Files Modified:** - NavigationRegistry.php - Added Customers to nav - App.tsx - Logo/branding in header - Shipping.tsx - Mobile spacing - More/index.tsx - WP Admin button - StoreController.php - Permission fallback - Store.tsx - Dark logo field - StoreSettingsProvider.php - Dark logo backend - Login.tsx - Card background **Ready for production!** 🎉
This commit is contained in:
@@ -291,13 +291,13 @@ export default function ShippingPage() {
|
||||
key={zone.id}
|
||||
className="border rounded-lg p-3 md:p-4 hover:border-primary/50 transition-colors"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3 mb-3 md:mb-4">
|
||||
<div className="flex items-start gap-2 md:gap-3 flex-1">
|
||||
<div className="flex items-start justify-between gap-2 md:gap-3 mb-3 md:mb-4">
|
||||
<div className="flex items-start gap-2 md:gap-3 flex-1 min-w-0">
|
||||
<div className="p-1.5 md:p-2 bg-primary/10 rounded-lg text-primary flex-shrink-0">
|
||||
<Globe className="h-4 w-4 md:h-5 md:w-5" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<h3 className="font-semibold text-base md:text-lg">{zone.name}</h3>
|
||||
<h3 className="font-semibold text-sm md:text-lg">{zone.name}</h3>
|
||||
<p className="text-xs md:text-sm text-muted-foreground truncate">
|
||||
<span className="font-medium">{__('Available to:')}</span> {zone.regions}
|
||||
</p>
|
||||
@@ -306,7 +306,7 @@ export default function ShippingPage() {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex gap-1 md:gap-2 flex-shrink-0">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
|
||||
Reference in New Issue
Block a user