fix: thorough dark mode fixes across all OWL templates and CSS

- Replace Bootstrap badge classes with theme-aware woo-badge classes in
  product mapping tabs
- Replace <code> with theme-aware .woo-code class
- Replace all text-muted with woo-text-muted using CSS custom properties
- Add client action wrapper background
- Add theme-aware select/checkbox/strong/input overrides
- Add .woo-code, .woo-text-muted, .woo-text-faint utility classes

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsinghpal
2026-03-31 22:12:10 -04:00
parent 645119c9b7
commit c5d2ac1d6b
5 changed files with 86 additions and 7 deletions

View File

@@ -125,7 +125,7 @@
<t t-esc="inst.last_sync"/>
</t>
<t t-else="">
<span class="text-muted">Never</span>
<span class="woo-text-muted">Never</span>
</t>
</td>
</tr>

View File

@@ -78,17 +78,17 @@
<button class="woo-tab" t-att-class="state.activeTab === 'mapped' ? 'active' : ''"
t-on-click="() => this.setTab('mapped')">
Mapped Products
<span class="ms-1 badge bg-secondary" t-esc="state.mappedProducts.length"/>
<span class="ms-1 woo-badge woo-badge-mapped" t-esc="state.mappedProducts.length"/>
</button>
<button class="woo-tab" t-att-class="state.activeTab === 'unmatched' ? 'active' : ''"
t-on-click="() => this.setTab('unmatched')">
Unmatched Products
<span class="ms-1 badge bg-warning text-dark" t-esc="state.wooProducts.length"/>
<span class="ms-1 woo-badge woo-badge-unmapped" t-esc="state.wooProducts.length"/>
</button>
<button class="woo-tab" t-att-class="state.activeTab === 'conflicts' ? 'active' : ''"
t-on-click="() => this.setTab('conflicts')">
Conflicts
<span class="ms-1 badge bg-danger" t-esc="state.conflictCount"/>
<span class="ms-1 woo-badge woo-badge-conflict" t-esc="state.conflictCount"/>
</button>
</div>
@@ -144,7 +144,7 @@
t-on-change="() => this.toggleSelectMapped(p.id)"/>
</td>
<td><t t-esc="p.woo_product_name"/></td>
<td><code><t t-esc="p.woo_sku"/></code></td>
<td><span class="woo-code"><t t-esc="p.woo_sku"/></span></td>
<td><t t-esc="p.odoo_product_name"/></td>
<td><t t-esc="p.instance_name"/></td>
<td>
@@ -177,7 +177,7 @@
<i class="fa fa-link me-1"/> Map Selected
</button>
<t t-if="!canMap">
<small class="text-muted align-self-center">
<small class="woo-text-muted align-self-center">
Select one Odoo product and one WooCommerce product to map them.
</small>
</t>
@@ -215,7 +215,7 @@
<!-- Divider -->
<div class="woo-split-divider">
<i class="fa fa-exchange text-muted"/>
<i class="fa fa-exchange woo-text-muted"/>
</div>
<!-- WooCommerce products panel -->