CHANGED THE UI TO A COOLER THEME ALSO MADE SURE THE TOGGLE IS WORKING WITH UI CHANGES

popup.js

@@ -13,17 +13,20 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     function updateUI(enabled) {
-        toggleAdBlockerInput.checked = enabled; 
+        toggleAdBlockerInput.checked = enabled;
         statusText.textContent = enabled ? 'Blocker is ON' : 'Blocker is OFF';
+        statusText.style.color = enabled ? '#00ff00' : '#ff0000';
     }
 
     toggleAdBlockerInput.addEventListener('change', () => {
-        const isEnabled = toggleAdBlockerInput.checked; 
-        toggleAdBlocker(isEnabled); 
+        const isEnabled = toggleAdBlockerInput.checked;
+        updateUI(isEnabled); // Immediately update UI
+        toggleAdBlocker(isEnabled);
     });
 
     chrome.storage.local.get('adBlockerEnabled', (data) => {
-        const adBlockerEnabled = data.adBlockerEnabled || false; 
+        const adBlockerEnabled = data.adBlockerEnabled || false;
+        toggleAdBlockerInput.checked = adBlockerEnabled; // Set the initial state of the toggle
         updateUI(adBlockerEnabled);
     });
 });

style.css

@@ -1,33 +1,40 @@
 body {
     margin: 0;
     padding: 20px;
-    font-family: Arial, sans-serif;
-    background-color: #f4f4f4; 
-    color: #333; 
-    width: 200px; 
+    font-family: 'Courier New', monospace;
+    background-color: #1a1a1a;
+    color: #00ff00;
+    width: 300px;
 }
 
 .popup-container {
     text-align: center;
+    background-color: #2a2a2a;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
 }
 
 h1 {
-    font-size: 18px;
-    margin-bottom: 10px;
+    font-size: 24px;
+    margin-bottom: 20px;
+    color: #00ff00;
+    text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
 }
 
 .toggle-container {
     display: flex;
     align-items: center;
     justify-content: center;
+    margin-bottom: 20px;
 }
 
 .switch {
     position: relative;
     display: inline-block;
-    width: 50px;
-    height: 24px;
-    margin-right: 10px; 
+    width: 60px;
+    height: 34px;
+    margin-right: 15px;
 }
 
 .switch input {
@@ -44,31 +51,33 @@ h1 {
     right: 0;
     bottom: 0;
     background-color: #ccc;
-    border-radius: 24px;
-    transition: .4s; 
+    border-radius: 34px;
+    transition: .4s;
 }
 
 .slider:before {
     position: absolute;
     content: "";
-    height: 20px; 
-    width: 20px; 
-    left: 2px;
-    bottom: 2px;
-    background-color: white; 
-    border-radius: 50%; 
-    transition: .4s; 
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    border-radius: 50%;
+    transition: .4s;
 }
 
 input:checked + .slider {
-    background-color: #4CAF50; 
+    background-color: #4CAF50;
 }
 
 input:checked + .slider:before {
-    transform: translateX(26px); 
+    transform: translateX(26px);
 }
 
 #status {
-    font-size: 14px; 
-    margin-top: 10px; 
+    font-size: 18px;
+    font-weight: bold;
+    margin-top: 10px;
+    color: #4CAF50;
 }