From 71564d0444aa89e07a4548589cc6f917b35a4736 Mon Sep 17 00:00:00 2001
From: Marcus Quinn <marcus@agentdesign.co.uk>
Date: Sun, 16 Mar 2025 03:11:06 +0000
Subject: [PATCH] Fix toggle switch size and clickability

---
 admin/css/wp-allstars-admin.css | 14 +++++++++-----
 admin/js/wp-allstars-admin.js   | 28 ++++++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/admin/css/wp-allstars-admin.css b/admin/css/wp-allstars-admin.css
index ef9f24e..2b81338 100644
--- a/admin/css/wp-allstars-admin.css
+++ b/admin/css/wp-allstars-admin.css
@@ -87,15 +87,19 @@
 .wp-toggle-switch {
     position: relative;
     display: inline-block;
-    width: 40px;
-    height: 24px;
+    width: 36px;
+    height: 20px;
     flex-shrink: 0;
+    cursor: pointer;
 }
 
 .wp-toggle-switch input {
     opacity: 0;
     width: 0;
     height: 0;
+    margin: 0;
+    padding: 0;
+    position: absolute;
 }
 
 .wp-toggle-slider {
@@ -107,14 +111,14 @@
     bottom: 0;
     background-color: #ccc;
     transition: .3s;
-    border-radius: 24px;
+    border-radius: 20px;
 }
 
 .wp-toggle-slider:before {
     position: absolute;
     content: "";
-    height: 20px;
-    width: 20px;
+    height: 16px;
+    width: 16px;
     left: 2px;
     bottom: 2px;
     background-color: white;
diff --git a/admin/js/wp-allstars-admin.js b/admin/js/wp-allstars-admin.js
index c5ff284..53b24b8 100644
--- a/admin/js/wp-allstars-admin.js
+++ b/admin/js/wp-allstars-admin.js
@@ -34,11 +34,39 @@ jQuery(document).ready(function($) {
     // Handle toggle switch clicks
     $('.wp-toggle-switch').on('click', function(e) {
         e.stopPropagation();
+        var $checkbox = $(this).find('input[type="checkbox"]');
+        var isChecked = $checkbox.is(':checked');
+        
+        $checkbox.prop('checked', !isChecked).trigger('change');
     });
 
     // Handle checkbox changes
     $('.wp-toggle-switch input[type="checkbox"]').on('change', function(e) {
         e.stopPropagation();
+        var $input = $(this);
+        var option = $input.attr('name');
+        var value = $input.is(':checked') ? 1 : 0;
+        
+        $.ajax({
+            url: ajaxurl,
+            type: 'POST',
+            data: {
+                action: 'wp_allstars_update_option',
+                option: option,
+                value: value,
+                _wpnonce: wpAllstars.nonce
+            },
+            success: function(response) {
+                if (response.success) {
+                    showNotification('Saved');
+                } else {
+                    showNotification('Error saving settings', true);
+                }
+            },
+            error: function() {
+                showNotification('Error saving settings', true);
+            }
+        });
     });
 
     // Handle panel toggle