Merge pull request #12 from ManojithBhat/feature/ui-improve

Enhance UI

Author: vignesh1507

Diff for: popup.css

@@ -3,7 +3,7 @@ body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     margin: 0;
     padding: 20px;
-    background-color: #404040;
+    background-color: #f0f0f0;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -12,7 +12,7 @@ body {
 .container {
     text-align: center;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     align-items: center;
 }
 
@@ -45,7 +45,7 @@ h1 {
 }
 
 #toggleButton.active {
-    background-color: #dc3545;
+    background-color: #ca4a57;
 }
 
 #toggleButton:hover {

Diff for: popup.js

@@ -29,13 +29,13 @@ document.addEventListener('DOMContentLoaded', () => {
       buttonText.textContent = 'Turn Off';
       statusElement.textContent = 'ON';
       statusElement.classList.add('on');
-      document.querySelector('.icon').textContent = '✅';
+      document.querySelector('.icon').textContent = '🛑';
     } else {
       toggleButton.classList.remove('active');
       buttonText.textContent = 'Turn On';
       statusElement.textContent = 'OFF';
       statusElement.classList.remove('on');
-      document.querySelector('.icon').textContent = '🛑';
+      document.querySelector('.icon').textContent = '✅';
     }
   }
 });