spouliot/PowderCoatingLogix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix dark mode hover colors in coat/powder dropdown menus

Browse Source 
Replace all hardcoded light-mode colors (#f0f4ff, #e8eeff, #fff8e1, #fff)
with Bootstrap CSS variables (--bs-secondary-bg, --bs-primary-bg-subtle,
--bs-warning-bg-subtle, --bs-body-bg) so dropdown containers and hover
states render correctly in both light and dark mode.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Pouliot
2026-06-03 15:12:24 -04:00
parent 87bbf158a4
commit 0d5553f3b2
1 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/PowderCoating.Web/wwwroot/js/item-wizard.js
+9 -9
View File
@@ -691,7 +691,7 @@ function renderSalesFields() {
</button> </button>
</div> </div>
<div id="wzMerchDropdown" <div id="wzMerchDropdown"
style="display:none;max-height:220px;overflow-y:auto;z-index:1060;background:#fff;border:1px solid #dee2e6;border-radius:0.375rem;box-shadow:0 4px 12px rgba(0,0,0,.12);position:fixed;"> style="display:none;max-height:220px;overflow-y:auto;z-index:1060;background:var(--bs-body-bg);color:var(--bs-body-color);border:1px solid var(--bs-border-color);border-radius:0.375rem;box-shadow:0 4px 12px rgba(0,0,0,.12);position:fixed;">
</div> </div>
</div> </div>
<div class="text-danger d-none mt-1" id="err_salesCatalogItemId">Please select an item.</div> <div class="text-danger d-none mt-1" id="err_salesCatalogItemId">Please select an item.</div>
@@ -773,7 +773,7 @@ function wzMerchComboRender(query) {
`<div class="wz-merch-opt" style="padding:.35rem .75rem .35rem 1.25rem;font-size:.875rem;cursor:pointer;" `<div class="wz-merch-opt" style="padding:.35rem .75rem .35rem 1.25rem;font-size:.875rem;cursor:pointer;"
data-id="${m.id}" data-name="${escHtml(m.name)}" data-price="${m.price}" data-sku="${escHtml(m.sku || '')}" data-id="${m.id}" data-name="${escHtml(m.name)}" data-price="${m.price}" data-sku="${escHtml(m.sku || '')}"
onmousedown="event.preventDefault();wzMerchComboSelect(this)" onmousedown="event.preventDefault();wzMerchComboSelect(this)"
onmouseenter="this.style.background='#f0f4ff'" onmouseenter="this.style.background='var(--bs-secondary-bg)'"
onmouseleave="this.style.background=''"> onmouseleave="this.style.background=''">
${escHtml(m.name)}${m.sku ? ` <span class="text-muted">[${escHtml(m.sku)}]</span>` : ''} <span class="text-muted">— $${parseFloat(m.price).toFixed(2)}</span> ${escHtml(m.name)}${m.sku ? ` <span class="text-muted">[${escHtml(m.sku)}]</span>` : ''} <span class="text-muted">— $${parseFloat(m.price).toFixed(2)}</span>
</div>` </div>`
@@ -1909,7 +1909,7 @@ function buildCoatRowHtml(i, coat) {
<input type="hidden" id="coat_inventoryItemId_${i}"> <input type="hidden" id="coat_inventoryItemId_${i}">
<div id="coat_powder_dropdown_${i}" <div id="coat_powder_dropdown_${i}"
class="powder-combo-dropdown" class="powder-combo-dropdown"
style="display:none;max-height:220px;overflow-y:auto;z-index:1060;border-radius:0.375rem;box-shadow:0 4px 12px rgba(0,0,0,.12);"> style="display:none;max-height:220px;overflow-y:auto;z-index:1060;background:var(--bs-body-bg);color:var(--bs-body-color);border:1px solid var(--bs-border-color);border-radius:0.375rem;box-shadow:0 4px 12px rgba(0,0,0,.12);">
</div> </div>
</div> </div>
</div> </div>
@@ -1968,7 +1968,7 @@ function buildCoatRowHtml(i, coat) {
</div> </div>
<div id="coat_catalog_results_${i}" <div id="coat_catalog_results_${i}"
class="powder-combo-dropdown" class="powder-combo-dropdown"
style="display:none;max-height:220px;overflow-y:auto;z-index:1060;border-radius:0.375rem;box-shadow:0 4px 12px rgba(0,0,0,.12);"> style="display:none;max-height:220px;overflow-y:auto;z-index:1060;background:var(--bs-body-bg);color:var(--bs-body-color);border:1px solid var(--bs-border-color);border-radius:0.375rem;box-shadow:0 4px 12px rgba(0,0,0,.12);">
</div> </div>
</div> </div>
<div class="col-sm-6"> <div class="col-sm-6">
@@ -2166,7 +2166,7 @@ function powderComboRender(i, query) {
data-val="${escHtml(String(p.value))}" data-val="${escHtml(String(p.value))}"
data-txt="${escHtml(p.text)}" data-txt="${escHtml(p.text)}"
onmousedown="event.preventDefault(); powderComboSelect(${i}, this.dataset.val, this.dataset.txt)" onmousedown="event.preventDefault(); powderComboSelect(${i}, this.dataset.val, this.dataset.txt)"
onmouseenter="this.style.background=document.documentElement.getAttribute('data-bs-theme')==='dark'?'#2c3a5a':'#f0f4ff'" onmouseenter="this.style.background='var(--bs-secondary-bg)'"
onmouseleave="this.classList.contains('pw-active')?null:this.style.background=''"> onmouseleave="this.classList.contains('pw-active')?null:this.style.background=''">
${escHtml(displayText)}${badge} ${escHtml(displayText)}${badge}
</div>`; </div>`;
@@ -2214,12 +2214,12 @@ function powderComboKey(event, i) {
event.preventDefault(); event.preventDefault();
idx = Math.min(idx + 1, items.length - 1); idx = Math.min(idx + 1, items.length - 1);
items.forEach(it => { it.classList.remove('pw-active'); it.style.background = ''; }); items.forEach(it => { it.classList.remove('pw-active'); it.style.background = ''; });
if (items[idx]) { items[idx].classList.add('pw-active'); items[idx].style.background = '#e8eeff'; items[idx].scrollIntoView({ block: 'nearest' }); } if (items[idx]) { items[idx].classList.add('pw-active'); items[idx].style.background = 'var(--bs-primary-bg-subtle)'; items[idx].scrollIntoView({ block: 'nearest' }); }
} else if (event.key === 'ArrowUp') { } else if (event.key === 'ArrowUp') {
event.preventDefault(); event.preventDefault();
idx = Math.max(idx - 1, 0); idx = Math.max(idx - 1, 0);
items.forEach(it => { it.classList.remove('pw-active'); it.style.background = ''; }); items.forEach(it => { it.classList.remove('pw-active'); it.style.background = ''; });
if (items[idx]) { items[idx].classList.add('pw-active'); items[idx].style.background = '#e8eeff'; items[idx].scrollIntoView({ block: 'nearest' }); } if (items[idx]) { items[idx].classList.add('pw-active'); items[idx].style.background = 'var(--bs-primary-bg-subtle)'; items[idx].scrollIntoView({ block: 'nearest' }); }
} else if (event.key === 'Enter') { } else if (event.key === 'Enter') {
event.preventDefault(); event.preventDefault();
const active = dd.querySelector('.pw-active') || items[0]; const active = dd.querySelector('.pw-active') || items[0];
@@ -2272,7 +2272,7 @@ function customPowderCatalogSearch(i, query) {
const price = r.unitPrice ? `<span class="text-muted small ms-1">$${parseFloat(r.unitPrice).toFixed(2)}/lb</span>` : ''; const price = r.unitPrice ? `<span class="text-muted small ms-1">$${parseFloat(r.unitPrice).toFixed(2)}/lb</span>` : '';
return `<div class="powder-opt" style="padding:.4rem .75rem;font-size:.83rem;white-space:normal;line-height:1.3;cursor:pointer;" return `<div class="powder-opt" style="padding:.4rem .75rem;font-size:.83rem;white-space:normal;line-height:1.3;cursor:pointer;"
onmousedown="event.preventDefault(); applyCustomCatalogResult(${i}, ${JSON.stringify(r).replace(/"/g, '&quot;')})" onmousedown="event.preventDefault(); applyCustomCatalogResult(${i}, ${JSON.stringify(r).replace(/"/g, '&quot;')})"
onmouseenter="this.style.background='#f0f4ff'" onmouseenter="this.style.background='var(--bs-secondary-bg)'"
onmouseleave="this.style.background=''"> onmouseleave="this.style.background=''">
<strong>${escHtml(r.colorName)}</strong> — ${escHtml(r.vendorName)} <strong>${escHtml(r.colorName)}</strong> — ${escHtml(r.vendorName)}
<span class="text-muted small ms-1">${escHtml(r.sku || '')}</span> <span class="text-muted small ms-1">${escHtml(r.sku || '')}</span>
@@ -2363,7 +2363,7 @@ function powderCatalogSearch(i, query) {
: ''; : '';
return `<div class="powder-opt" style="padding:.35rem .75rem;font-size:.83rem;white-space:normal;line-height:1.3;cursor:pointer;" return `<div class="powder-opt" style="padding:.35rem .75rem;font-size:.83rem;white-space:normal;line-height:1.3;cursor:pointer;"
onmousedown="event.preventDefault(); createIncomingFromCatalog(${i}, ${r.id})" onmousedown="event.preventDefault(); createIncomingFromCatalog(${i}, ${r.id})"
onmouseenter="this.style.background='#fff8e1'" onmouseenter="this.style.background='var(--bs-warning-bg-subtle)'"
onmouseleave="this.style.background=''"> onmouseleave="this.style.background=''">
<i class="bi bi-truck text-warning me-1"></i> <i class="bi bi-truck text-warning me-1"></i>
<strong>${escHtml(r.colorName)}</strong> — ${escHtml(r.vendorName)} ${escHtml(r.sku || '')} <strong>${escHtml(r.colorName)}</strong> — ${escHtml(r.vendorName)} ${escHtml(r.sku || '')}