Fix hover mode

- Refresh the page every time hover mode or percentage mode is toggled

Author: Mihir

src/main.css

@@ -54,6 +54,16 @@
     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06) !important;
 }
 
+/* Hover mode - hide badge by default */
+.affordable-badge.hover-mode {
+    display: none !important;
+}
+
+/* Show badge on parent hover when in hover mode */
+.affordable-hover-container:hover .affordable-badge.hover-mode {
+    display: inline-flex !important;
+}
+
 .affordable-badge__swatch {
     width: 6px !important;
     height: 0.9em !important;

src/main.js

@@ -355,15 +355,10 @@ function append(elementInfo, element, productPrice, settings, isPriceRange) {
     desiredElement.appendChild(badge);
 
     if (settings.hoverMode) {
-        // Hover Mode Attributes
-        badge.style.display = 'none';
-        desiredElement.addEventListener('mouseover', function handleMouseOver() {
-            badge.style.display = 'inline-flex';
-        });
+        // Hover Mode - use CSS classes for visibility control
+        badge.classList.add('hover-mode');
+        desiredElement.classList.add('affordable-hover-container');
         desiredElement.setAttribute("title", `It will take you ${getTimeTakenToEarn(productPrice, settings.salary)} to earn ${productPrice}`);
-        desiredElement.addEventListener('mouseout', function handleMouseOut() {
-            badge.style.display = 'none';
-        });
     } else if (!isPriceRange) {
         badge.setAttribute("style", "display:inline-flex");
         desiredElement.setAttribute("title", `It will take you ${getTimeTakenToEarn(productPrice, settings.salary)} to earn ${productPrice}`);
@@ -444,4 +439,9 @@ function undoUpdates() {
         element.classList.remove("affordable-highlight-tertiary")
     })
 
+    elements = document.querySelectorAll(".affordable-hover-container")
+    elements.forEach((element) => {
+        element.classList.remove("affordable-hover-container")
+    })
+
 }

src/settingsPage.js

@@ -135,6 +135,7 @@ function addHoverModeUpdateListener() {
             chrome.storage.sync.set({ settings });
         })
         sendMessage()
+        chrome.tabs.reload();
     });
 }
 
@@ -197,6 +198,7 @@ function addPercentageModeListener() {
             chrome.storage.sync.set({ settings });
         })
         sendMessage()
+        chrome.tabs.reload();
     });
 }