Skip to content

Commit ddb63ab

Browse files
committed
fix: use CSS classes for statistics button state instead of inline styles
- Add active/inactive CSS classes with !important declarations - Replace inline style updates with CSS class toggling - Prevent hover/focus CSS from overriding button state - Add better debugging for CSS class changes - Ensure visual state persists through user interactions
1 parent e4ce959 commit ddb63ab

1 file changed

Lines changed: 23 additions & 6 deletions

File tree

public/js/price-analytics.js

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -656,6 +656,17 @@ class PriceAnalytics {
656656
fill: none;
657657
}
658658
659+
/* Button active state styles */
660+
#stats-toggle-button.active {
661+
background: rgba(52, 152, 219, 0.9) !important;
662+
color: white !important;
663+
}
664+
665+
#stats-toggle-button.inactive {
666+
background: rgba(255, 255, 255, 0.9) !important;
667+
color: black !important;
668+
}
669+
659670
/* Ensure emoji display properly with Noto Color Emoji */
660671
.noto-emoji, .price-stats-overlay .noto-emoji {
661672
font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Twemoji Mozilla", emoji, sans-serif !important;
@@ -1263,15 +1274,21 @@ class PriceAnalytics {
12631274
const button = document.getElementById('stats-toggle-button');
12641275
if (button) {
12651276
const isActive = this.overlayVisible;
1266-
const newBg = isActive ? 'rgba(52, 152, 219, 0.9)' : 'rgba(255, 255, 255, 0.9)';
1267-
const newColor = isActive ? 'white' : 'black';
12681277

1269-
console.log('📊 Updating stats button - overlayVisible:', isActive, 'new bg:', newBg);
1278+
console.log('📊 Updating stats button - overlayVisible:', isActive);
12701279

1271-
button.style.background = newBg;
1272-
button.style.color = newColor;
1280+
// Use CSS classes to override any hover/focus styles
1281+
if (isActive) {
1282+
button.classList.remove('inactive');
1283+
button.classList.add('active');
1284+
console.log('📊 Added active class to stats button');
1285+
} else {
1286+
button.classList.remove('active');
1287+
button.classList.add('inactive');
1288+
console.log('📊 Added inactive class to stats button');
1289+
}
12731290

1274-
console.log('📊 Stats button updated - background:', button.style.background, 'color:', button.style.color);
1291+
console.log('📊 Stats button classes:', button.className);
12751292
} else {
12761293
console.warn('📊 Stats button not found in DOM');
12771294
}

0 commit comments

Comments
 (0)