dd2ff2074f
## 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 ✓
170 lines
4.7 KiB
CSS
170 lines
4.7 KiB
CSS
/* Import design tokens for UI sizing and control defaults */
|
|
@import './components/ui/tokens.css';
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* WooNooW global theme (shadcn baseline, deduplicated) */
|
|
@layer base {
|
|
:root {
|
|
--background: 0 0% 100%;
|
|
--foreground: 222.2 84% 4.9%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 222.2 84% 4.9%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 222.2 84% 4.9%;
|
|
--primary: 222.2 47.4% 11.2%;
|
|
--primary-foreground: 210 40% 98%;
|
|
--secondary: 210 40% 96.1%;
|
|
--secondary-foreground: 222.2 47.4% 11.2%;
|
|
--muted: 210 40% 96.1%;
|
|
--muted-foreground: 215.4 16.3% 46.9%;
|
|
--accent: 210 40% 96.1%;
|
|
--accent-foreground: 222.2 47.4% 11.2%;
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
--border: 214.3 31.8% 91.4%;
|
|
--input: 214.3 31.8% 91.4%;
|
|
--ring: 222.2 84% 4.9%;
|
|
--chart-1: 12 76% 61%;
|
|
--chart-2: 173 58% 39%;
|
|
--chart-3: 197 37% 24%;
|
|
--chart-4: 43 74% 66%;
|
|
--chart-5: 27 87% 67%;
|
|
--radius: 0.5rem;
|
|
}
|
|
.dark {
|
|
--background: 222.2 84% 4.9%;
|
|
--foreground: 210 40% 98%;
|
|
--card: 222.2 84% 4.9%;
|
|
--card-foreground: 210 40% 98%;
|
|
--popover: 222.2 84% 4.9%;
|
|
--popover-foreground: 210 40% 98%;
|
|
--primary: 210 40% 98%;
|
|
--primary-foreground: 222.2 47.4% 11.2%;
|
|
--secondary: 217.2 32.6% 17.5%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
--muted: 217.2 32.6% 17.5%;
|
|
--muted-foreground: 215 20.2% 65.1%;
|
|
--accent: 217.2 32.6% 17.5%;
|
|
--accent-foreground: 210 40% 98%;
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
--border: 217.2 32.6% 17.5%;
|
|
--input: 217.2 32.6% 17.5%;
|
|
--ring: 212.7 26.8% 83.9%;
|
|
--chart-1: 220 70% 50%;
|
|
--chart-2: 160 60% 45%;
|
|
--chart-3: 30 80% 55%;
|
|
--chart-4: 280 65% 60%;
|
|
--chart-5: 340 75% 55%;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* { @apply border-border; }
|
|
body { @apply bg-background text-foreground; }
|
|
h1, h2, h3, h4, h5, h6 { @apply text-foreground; }
|
|
|
|
/* Override WordPress common.css focus/active styles */
|
|
a:focus,
|
|
a:active {
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
|
|
/* Command palette input: remove native borders/shadows to match shadcn */
|
|
.command-palette-search {
|
|
border: none !important;
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* ----------------------------------------------------
|
|
Print helpers (hide WP chrome, expand canvas, labels)
|
|
---------------------------------------------------- */
|
|
|
|
/* Page defaults for print */
|
|
@page {
|
|
size: auto; /* let the browser choose */
|
|
margin: 12mm; /* comfortable default */
|
|
}
|
|
|
|
@media print {
|
|
/* Hide WordPress admin chrome */
|
|
#adminmenuback,
|
|
#adminmenuwrap,
|
|
#adminmenu,
|
|
#wpadminbar,
|
|
#wpfooter,
|
|
#screen-meta,
|
|
.notice,
|
|
.update-nag { display: none !important; }
|
|
|
|
/* Reset layout to full-bleed for our app */
|
|
html, body, #wpwrap, #wpcontent { background: #fff !important; margin: 0 !important; padding: 0 !important; }
|
|
#woonoow-admin-app, #woonoow-admin-app > div { margin: 0 !important; padding: 0 !important; max-width: 100% !important; }
|
|
|
|
/* Hide elements flagged as no-print, reveal print-only */
|
|
.no-print { display: none !important; }
|
|
.print-only { display: block !important; }
|
|
|
|
/* Improve table row density on paper */
|
|
.print-tight tr > * { padding-top: 6px !important; padding-bottom: 6px !important; }
|
|
}
|
|
|
|
/* By default, label-only content stays hidden unless in print or label mode */
|
|
.print-only { display: none; }
|
|
|
|
/* Label mode toggled by router (?mode=label) */
|
|
.woonoow-label-mode .print-only { display: block; }
|
|
.woonoow-label-mode .no-print-label,
|
|
.woonoow-label-mode .wp-header-end,
|
|
.woonoow-label-mode .wrap { display: none !important; }
|
|
|
|
/* Optional page presets (opt-in by adding the class to a wrapper before printing) */
|
|
.print-a4 { }
|
|
.print-letter { }
|
|
.print-4x6 { }
|
|
@media print {
|
|
.print-a4 { }
|
|
.print-letter { }
|
|
/* Thermal label (4x6in) with minimal margins */
|
|
.print-4x6 { width: 6in; }
|
|
.print-4x6 * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
|
}
|
|
|
|
/* --- WooNooW: Popper menus & fullscreen fixes --- */
|
|
[data-radix-popper-content-wrapper] { z-index: 2147483647 !important; }
|
|
body.woonoow-fullscreen .woonoow-app { overflow: visible; }
|
|
|
|
/* --- WooCommerce Admin Notices --- */
|
|
.woocommerce-message,
|
|
.woocommerce-error,
|
|
.woocommerce-info {
|
|
position: relative;
|
|
border-left: 4px solid #00a32a;
|
|
padding: 12px 16px;
|
|
margin: 16px 0;
|
|
background: #f0f6fc;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.woocommerce-error {
|
|
border-left-color: #d63638;
|
|
background: #fcf0f1;
|
|
}
|
|
|
|
.woocommerce-info {
|
|
border-left-color: #2271b1;
|
|
background: #f0f6fc;
|
|
}
|
|
|
|
/* a[href] {
|
|
color: rgb(34 197 94);
|
|
font-weight: bold;
|
|
} */ |