Files
WooNooW/includes
dwindown dd2ff2074f fix: Login logo 401, link focus styles, payment/shipping active colors
## 1. Fix Logo 401 Error on Login 

**Issue:** Logo image returns 401 Unauthorized on login page

**Root Cause:** `/store/settings` endpoint requires authentication

**Solution:** Created public branding endpoint
```php
// GET /woonoow/v1/store/branding (PUBLIC)
public function get_branding() {
    return [
        'store_name' => get_option('blogname'),
        'store_logo' => get_option('woonoow_store_logo'),
        'store_icon' => get_option('woonoow_store_icon'),
        'store_tagline' => get_option('woonoow_store_tagline'),
    ];
}
```

**Frontend:** Updated Login.tsx to use `/store/branding` instead

**Result:** Logo loads without authentication 

---

## 2. Override WordPress Link Focus Styles 

**Issue:** WordPress common.css applies focus/active styles to links

**Solution:** Added CSS override
```css
a:focus,
a:active {
  outline: none !important;
  box-shadow: none !important;
}
```

**Result:** Clean focus states, no WordPress interference

---

## 3. Active Color for Manual Payment Methods 

**Issue:** Manual payments use static gray icon, online payments use green/primary

**Solution:** Applied same active color logic
```tsx
<div className={`p-2 rounded-lg ${
  gateway.enabled
    ? 'bg-green-500/20 text-green-500'
    : 'bg-primary/10 text-primary'
}`}>
  <Banknote className="h-5 w-5" />
</div>
```

**Result:**
-  Enabled = Green background + green icon
-  Disabled = Primary background + primary icon
-  Consistent with online payments

---

## 4. Active Color for Shipping Icons 

**Issue:** Shipping icons always gray, no visual indicator of enabled state

**Solution:** Applied active color to all shipping icons
- Zone summary view
- Desktop accordion view
- Mobile accordion view

```tsx
<div className={`p-2 rounded-lg ${
  rate.enabled
    ? 'bg-green-500/20 text-green-500'
    : 'bg-primary/10 text-primary'
}`}>
  <Truck className="h-4 w-4" />
</div>
```

**Result:**
-  Enabled shipping = Green icon
-  Disabled shipping = Primary icon
-  Consistent visual language across payments & shipping

---

## 5. Notification Strategy 

**Acknowledged:** Clean structure, ready for implementation

---

## Summary

 Public branding endpoint (no auth required)
 Logo loads on login page
 WordPress link focus styles overridden
 Manual payments have active colors
 Shipping methods have active colors
 Consistent visual language (green = active, primary = inactive)

**Visual Consistency Achieved:**
- Payments (manual & online) ✓
- Shipping methods ✓
- All use same color system ✓
2025-11-11 00:03:14 +07:00
..