From 1a7979d290570dfdd85062c8d8cf4fda9512c437 Mon Sep 17 00:00:00 2001
From: Sauhard74 <sauhard74best@gmail.com>
Date: Wed, 9 Oct 2024 02:31:16 +0530
Subject: [PATCH 1/3] changes the user inteerface of the popup also chamnged
 the wording in toggle between on and off

---
 popup.js  |  3 ++-
 style.css | 50 +++++++++++++++++++++++++++++---------------------
 2 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/popup.js b/popup.js
index 01ff7cd..9b9c7f9 100644
--- a/popup.js
+++ b/popup.js
@@ -13,8 +13,9 @@ 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 ? '#4CAF50' : '#333';
     }
 
     toggleAdBlockerInput.addEventListener('change', () => {
diff --git a/style.css b/style.css
index 477d48d..d1cc705 100644
--- a/style.css
+++ b/style.css
@@ -2,32 +2,38 @@ body {
     margin: 0;
     padding: 20px;
     font-family: Arial, sans-serif;
-    background-color: #f4f4f4; 
-    color: #333; 
-    width: 200px; 
+    background-color: #f0f0f0;
+    color: #333;
+    width: 250px;
 }
 
 .popup-container {
     text-align: center;
+    background-color: #ffffff;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 
 h1 {
-    font-size: 18px;
-    margin-bottom: 10px;
+    font-size: 24px;
+    margin-bottom: 20px;
+    color: #4CAF50;
 }
 
 .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 +50,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;
 }

From 3ff58ec501bc30f3b52307941acb2f9064981074 Mon Sep 17 00:00:00 2001
From: Sauhard74 <sauhard74best@gmail.com>
Date: Wed, 9 Oct 2024 02:36:17 +0530
Subject: [PATCH 2/3] better ui and toggle between on and off

---
 popup.js  |  2 +-
 style.css | 15 ++++++++-------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/popup.js b/popup.js
index 9b9c7f9..4eb60db 100644
--- a/popup.js
+++ b/popup.js
@@ -15,7 +15,7 @@ document.addEventListener('DOMContentLoaded', () => {
     function updateUI(enabled) {
         toggleAdBlockerInput.checked = enabled;
         statusText.textContent = enabled ? 'Blocker is ON' : 'Blocker is OFF';
-        statusText.style.color = enabled ? '#4CAF50' : '#333';
+        statusText.style.color = enabled ? '#00ff00' : '#ff0000';
     }
 
     toggleAdBlockerInput.addEventListener('change', () => {
diff --git a/style.css b/style.css
index d1cc705..4966e52 100644
--- a/style.css
+++ b/style.css
@@ -1,24 +1,25 @@
 body {
     margin: 0;
     padding: 20px;
-    font-family: Arial, sans-serif;
-    background-color: #f0f0f0;
-    color: #333;
-    width: 250px;
+    font-family: 'Courier New', monospace;
+    background-color: #1a1a1a;
+    color: #00ff00;
+    width: 300px;
 }
 
 .popup-container {
     text-align: center;
-    background-color: #ffffff;
+    background-color: #2a2a2a;
     border-radius: 8px;
     padding: 20px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
 }
 
 h1 {
     font-size: 24px;
     margin-bottom: 20px;
-    color: #4CAF50;
+    color: #00ff00;
+    text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
 }
 
 .toggle-container {

From 07678f0077539593d59466e164031556117d3efe Mon Sep 17 00:00:00 2001
From: Sauhard74 <sauhard74best@gmail.com>
Date: Wed, 9 Oct 2024 02:38:51 +0530
Subject: [PATCH 3/3] TOGGLE

---
 popup.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/popup.js b/popup.js
index 4eb60db..fa9121e 100644
--- a/popup.js
+++ b/popup.js
@@ -19,12 +19,14 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     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);
     });
 });