dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Image upload, remove WP login branding, implement dark mode

Browse Source 
## 1. Fix Image Upload ✅

**Issue:** Image upload failing due to missing nonce

**Fix:**
- Better nonce detection (wpApiSettings, WooNooW, meta tag)
- Added credentials: 'same-origin'
- Better error handling with error messages
- Clarified image size recommendations (not strict requirements)

**Changes:**
- Logo: "Recommended size: 200x60px (or similar ratio)"
- Icon: "Recommended: 32x32px or larger square image"

---

## 2. Remove WordPress Login Page Branding ✅

**Issue:** Misunderstood - implemented WP login branding instead of SPA login

**Fix:**
- Removed all WordPress login page customization
- Removed login_enqueue_scripts hook
- Removed login_headerurl filter
- Removed login_headertext filter
- Removed customize_login_page() method
- Removed login_logo_url() method
- Removed login_logo_title() method

**Note:** WooNooW uses standalone SPA login, not WordPress login page

---

## 3. Implement Dark/Light Mode ✅

### Components Created:

**ThemeProvider.tsx:**
- Theme context (light, dark, system)
- Automatic system theme detection
- localStorage persistence (woonoow_theme)
- Applies .light or .dark class to <html>
- Listens for system theme changes

**ThemeToggle.tsx:**
- Dropdown menu with 3 options:
  - ☀️ Light
  - 🌙 Dark
  - 🖥️ System
- Shows current selection with checkmark
- Icon changes based on actual theme

### Integration:
- Wrapped App with ThemeProvider in main.tsx
- Added ThemeToggle to header (before fullscreen button)
- Uses existing dark mode CSS variables (already configured)

### Features:
- ✅ Light mode
- ✅ Dark mode
- ✅ System preference (auto)
- ✅ Persists in localStorage
- ✅ Smooth transitions
- ✅ Icon updates dynamically

### CSS:
- Already configured: darkMode: ["class"] in tailwind.config.js
- Dark mode variables already defined in index.css
- No additional CSS needed

---

## Result

✅ Image upload fixed with better error handling
✅ WordPress login branding removed (not needed)
✅ Dark/Light mode fully functional
✅ Theme toggle in header
✅ System preference support
✅ Persists across sessions

**Ready to test!**
This commit is contained in:
dwindown
2025-11-10 23:18:56 +07:00
parent e369d31974
commit 64cfa39b75
7 changed files with 145 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
admin-spa/src/routes/Settings/Store.tsx
View File

@@ -325,7 +325,7 @@ export default function StoreDetailsPage() {
title="Brand"
description="Logo, icon, and colors for your store"
>
<SettingsSection label="Store logo" description="Recommended: 200x60px PNG with transparent background">
<SettingsSection label="Store logo" description="Recommended size: 200x60px (or similar ratio). PNG with transparent background works best.">
<ImageUpload
value={settings.storeLogo}
onChange={(url) => updateSetting('storeLogo', url)}
@@ -334,7 +334,7 @@ export default function StoreDetailsPage() {
/>
</SettingsSection>
<SettingsSection label="Store icon" description="Favicon for browser tabs (32x32px)">
<SettingsSection label="Store icon" description="Favicon for browser tabs. Recommended: 32x32px or larger square image.">
<ImageUpload
value={settings.storeIcon}
onChange={(url) => updateSetting('storeIcon', url)}