From 81e464b0fb8d1dc92d595aad576cec6e08c1e702 Mon Sep 17 00:00:00 2001
From: Marcus Quinn <marcus@agentdesign.co.uk>
Date: Sun, 16 Mar 2025 03:22:17 +0000
Subject: [PATCH] Refactor settings components to share consistent styles and
 layout

---
 admin/css/wp-allstars-admin.css | 83 +++++++++++++++------------------
 admin/settings.php              | 34 ++++++++------
 2 files changed, 58 insertions(+), 59 deletions(-)

diff --git a/admin/css/wp-allstars-admin.css b/admin/css/wp-allstars-admin.css
index b677270..06dab38 100644
--- a/admin/css/wp-allstars-admin.css
+++ b/admin/css/wp-allstars-admin.css
@@ -135,33 +135,44 @@ input:checked + .wp-toggle-slider:before {
     transform: translateX(16px);
 }
 
-/* Simple Setting Row (No Panel) */
-.wp-setting-row {
-    display: flex;
-    align-items: center;
-    padding: 15px;
+/* Base Setting Styles (Shared between simple and expandable) */
+.wp-setting-base {
     background: #fff;
     border: 1px solid #ccc;
     border-radius: 8px;
     margin-bottom: 15px;
 }
 
-.wp-setting-row:hover {
+.wp-setting-base:hover {
     border-color: #2271b1;
     box-shadow: 0 2px 6px rgba(0,0,0,0.15);
 }
 
-.wp-setting-content {
-    flex-grow: 1;
-    margin-left: 10px;
+.wp-setting-header {
+    padding: 15px;
+    position: relative;
 }
 
-.wp-setting-title {
+.wp-setting-main {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-right: 15px;
+}
+
+.wp-setting-left {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.wp-setting-label {
     font-size: 16px;
     font-weight: 600;
     color: #1d2327;
-    margin: 0;
     line-height: 1.4;
+    margin: 0;
+    cursor: default;
 }
 
 .wp-setting-description {
@@ -171,23 +182,19 @@ input:checked + .wp-toggle-slider:before {
     line-height: 1.6;
 }
 
-/* Expandable Panel Component */
-.wp-allstars-toggle {
-    background: #fff;
-    border: 1px solid #ccc;
-    border-radius: 8px;
-    margin-bottom: 15px;
+/* Simple Setting Row (No Panel) */
+.wp-setting-row {
+    composes: wp-setting-base;
 }
 
-.wp-allstars-toggle:hover {
-    border-color: #2271b1;
-    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+/* Expandable Panel Component */
+.wp-allstars-toggle {
+    composes: wp-setting-base;
 }
 
 .wp-allstars-toggle-header {
-    padding: 15px;
+    composes: wp-setting-header;
     cursor: pointer;
-    position: relative;
 }
 
 .wp-allstars-toggle-header::after {
@@ -208,29 +215,20 @@ input:checked + .wp-toggle-slider:before {
 }
 
 .wp-allstars-toggle-main {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-right: 40px;
+    composes: wp-setting-main;
+    padding-right: 40px; /* Extra space for chevron */
 }
 
 .wp-allstars-toggle-left {
-    display: flex;
-    align-items: center;
-    gap: 10px;
+    composes: wp-setting-left;
 }
 
 .wp-allstars-toggle label {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin: 0;
-    font-size: 16px;
-    font-weight: 600;
-    color: #1d2327;
-    line-height: 1.4;
-    cursor: default;
-    pointer-events: none;
+    composes: wp-setting-label;
+}
+
+.wp-allstars-toggle .description {
+    composes: wp-setting-description;
 }
 
 .wp-allstars-expand-settings {
@@ -246,13 +244,6 @@ input:checked + .wp-toggle-slider:before {
     border-bottom-right-radius: 8px;
 }
 
-.wp-allstars-toggle .description {
-    margin: 8px 0 0;
-    color: #50575e;
-    font-size: 14px;
-    line-height: 1.6;
-}
-
 .wp-allstars-setting-row {
     margin-bottom: 24px;
 }
diff --git a/admin/settings.php b/admin/settings.php
index 05cdf91..fc25682 100644
--- a/admin/settings.php
+++ b/admin/settings.php
@@ -959,18 +959,26 @@ function wp_allstars_settings_page() {
                         <div class="wp-allstars-settings-grid">
                             <!-- Example of a simple toggle setting (no panel) -->
                             <div class="wp-setting-row">
-                                <div class="wp-toggle-switch">
-                                    <input type="checkbox" 
-                                           id="wp_allstars_simple_setting"
-                                           name="wp_allstars_simple_setting" 
-                                           value="1"
-                                           <?php checked(get_option('wp_allstars_simple_setting', false)); ?> 
-                                    />
-                                    <span class="wp-toggle-slider"></span>
-                                </div>
-                                <div class="wp-setting-content">
-                                    <h4 class="wp-setting-title"><?php esc_html_e('Simple Toggle Setting', 'wp-allstars'); ?></h4>
-                                    <p class="wp-setting-description"><?php esc_html_e('This is an example of a simple toggle setting without an expandable panel.', 'wp-allstars'); ?></p>
+                                <div class="wp-setting-header">
+                                    <div class="wp-setting-main">
+                                        <div class="wp-setting-left">
+                                            <div class="wp-toggle-switch">
+                                                <input type="checkbox" 
+                                                       id="wp_allstars_simple_setting"
+                                                       name="wp_allstars_simple_setting" 
+                                                       value="1"
+                                                       <?php checked(get_option('wp_allstars_simple_setting', false)); ?> 
+                                                />
+                                                <span class="wp-toggle-slider"></span>
+                                            </div>
+                                            <label for="wp_allstars_simple_setting" class="wp-setting-label">
+                                                <?php esc_html_e('Simple Toggle Setting', 'wp-allstars'); ?>
+                                            </label>
+                                        </div>
+                                    </div>
+                                    <p class="wp-setting-description">
+                                        <?php esc_html_e('This is an example of a simple toggle setting without an expandable panel.', 'wp-allstars'); ?>
+                                    </p>
                                 </div>
                             </div>
                         </div>
@@ -997,7 +1005,7 @@ function wp_allstars_settings_page() {
                                             </label>
                                         </div>
                                     </div>
-                                    <p class="description">
+                                    <p class="wp-setting-description">
                                         <?php esc_html_e('Import images that have external URLs into your Media Library when saving. Consider disabling during large data imports with many external image URLs.', 'wp-allstars'); ?>
                                     </p>
                                 </div>