Refactor settings components to share consistent styles and layout

admin/css/wp-allstars-admin.css

@@ -135,33 +135,44 @@ input:checked + .wp-toggle-slider:before {
     transform: translateX(16px);
 }
 
-/* Simple Setting Row (No Panel) */
+/* Base Setting Styles (Shared between simple and expandable) */
-.wp-setting-row {
+.wp-setting-base {
-    display: flex;
-    align-items: center;
-    padding: 15px;
     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 {
+.wp-setting-header {
-    flex-grow: 1;
+    padding: 15px;
-    margin-left: 10px;
+    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 */
+/* Simple Setting Row (No Panel) */
-.wp-allstars-toggle {
+.wp-setting-row {
-    background: #fff;
+    composes: wp-setting-base;
-    border: 1px solid #ccc;
-    border-radius: 8px;
-    margin-bottom: 15px;
 }
 
-.wp-allstars-toggle:hover {
+/* Expandable Panel Component */
-    border-color: #2271b1;
+.wp-allstars-toggle {
-    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+    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;
+    composes: wp-setting-main;
-    align-items: center;
+    padding-right: 40px; /* Extra space for chevron */
-    justify-content: space-between;
-    padding-right: 40px;
 }
 
 .wp-allstars-toggle-left {
-    display: flex;
+    composes: wp-setting-left;
-    align-items: center;
-    gap: 10px;
 }
 
 .wp-allstars-toggle label {
-    display: flex;
+    composes: wp-setting-label;
-    align-items: center;
+}
-    gap: 10px;
+
-    margin: 0;
+.wp-allstars-toggle .description {
-    font-size: 16px;
+    composes: wp-setting-description;
-    font-weight: 600;
-    color: #1d2327;
-    line-height: 1.4;
-    cursor: default;
-    pointer-events: none;
 }
 
 .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;
 }

admin/settings.php

@@ -959,6 +959,9 @@ 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-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"
@@ -968,9 +971,14 @@ function wp_allstars_settings_page() {
                                                 />
                                                 <span class="wp-toggle-slider"></span>
                                             </div>
-                                <div class="wp-setting-content">
+                                            <label for="wp_allstars_simple_setting" class="wp-setting-label">
-                                    <h4 class="wp-setting-title"><?php esc_html_e('Simple Toggle Setting', 'wp-allstars'); ?></h4>
+                                                <?php esc_html_e('Simple Toggle Setting', 'wp-allstars'); ?>
-                                    <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>
+                                            </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>