From 24b60e0bdab736e47e5290a47ff267d08c5f4f29 Mon Sep 17 00:00:00 2001
From: Marcus Quinn <marcus@agentdesign.co.uk>
Date: Fri, 14 Mar 2025 02:55:15 +0000
Subject: [PATCH] Update plugin header to modern WordPress style: - Make header
 full width with bottom shadow only - Remove top padding and adjust spacing -
 Add contained settings area - Match WooCommerce header style

---
 admin/css/wpa-superstar-admin.css |  19 +++--
 admin/settings.php                | 136 +++++++++++++++---------------
 2 files changed, 81 insertions(+), 74 deletions(-)

diff --git a/admin/css/wpa-superstar-admin.css b/admin/css/wpa-superstar-admin.css
index 0d84f8e..0df7559 100644
--- a/admin/css/wpa-superstar-admin.css
+++ b/admin/css/wpa-superstar-admin.css
@@ -1,18 +1,18 @@
 .wpa-superstar-wrap {
-    max-width: 1100px;
-    margin: 25px 40px 0 20px;
+    max-width: none;
+    margin: 0;
 }
 
 .wpa-superstar-header {
     background: #fff;
-    border: 1px solid #ccd0d4;
-    border-radius: 3px;
-    box-shadow: 0 1px 1px rgba(0,0,0,0.04);
-    margin-bottom: 20px;
-    padding: 15px 20px;
+    border-bottom: 1px solid #c3c4c7;
+    box-shadow: 0 1px 0 rgba(0,0,0,.04);
+    margin: 0 0 20px -20px;
+    padding: 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    width: calc(100% + 40px);
 }
 
 .wpa-superstar-header h1 {
@@ -36,6 +36,11 @@
     font-weight: 400;
 }
 
+.wpa-settings-container {
+    padding: 0 20px;
+    max-width: 1100px;
+}
+
 .nav-tab-wrapper {
     margin: 0;
     padding-top: 0;
diff --git a/admin/settings.php b/admin/settings.php
index edc32db..916ee73 100644
--- a/admin/settings.php
+++ b/admin/settings.php
@@ -48,76 +48,78 @@ function wpa_superstar_settings_page() {
             </div>
         </div>
         
-        <div class="wpa-superstar-nav">
-            <h2 class="nav-tab-wrapper">
-                <a href="?page=wpa-superstar&tab=general" class="nav-tab <?php echo $active_tab == 'general' ? 'nav-tab-active' : ''; ?>">
-                    <?php esc_html_e( 'General', 'wpa-superstar' ); ?>
-                </a>
-                <a href="?page=wpa-superstar&tab=advanced" class="nav-tab <?php echo $active_tab == 'advanced' ? 'nav-tab-active' : ''; ?>">
-                    <?php esc_html_e( 'Advanced', 'wpa-superstar' ); ?>
-                </a>
-            </h2>
-        </div>
+        <div class="wpa-settings-container">
+            <div class="wpa-superstar-nav">
+                <h2 class="nav-tab-wrapper">
+                    <a href="?page=wpa-superstar&tab=general" class="nav-tab <?php echo $active_tab == 'general' ? 'nav-tab-active' : ''; ?>">
+                        <?php esc_html_e( 'General', 'wpa-superstar' ); ?>
+                    </a>
+                    <a href="?page=wpa-superstar&tab=advanced" class="nav-tab <?php echo $active_tab == 'advanced' ? 'nav-tab-active' : ''; ?>">
+                        <?php esc_html_e( 'Advanced', 'wpa-superstar' ); ?>
+                    </a>
+                </h2>
+            </div>
 
-        <div class="wpa-settings-content">
-            <?php settings_fields( 'wpa-superstar-settings' ); ?>
-            <?php do_settings_sections( 'wpa-superstar-settings' ); ?>
+            <div class="wpa-settings-content">
+                <?php settings_fields( 'wpa-superstar-settings' ); ?>
+                <?php do_settings_sections( 'wpa-superstar-settings' ); ?>
 
-            <?php if ( $active_tab == 'general' ) : ?>
-                <div class="wpa-superstar-toggle">
-                    <label for="wpa_superstar_lazy_load">
-                        <div class="wpa-toggle-switch">
-                            <input type="checkbox" 
-                                   id="wpa_superstar_lazy_load"
-                                   name="wpa_superstar_lazy_load" 
-                                   value="1" 
-                                   <?php checked( get_option( 'wpa_superstar_lazy_load', 1 ) ); ?> 
-                            />
-                            <span class="wpa-toggle-slider"></span>
-                        </div>
-                        <?php esc_html_e( 'Enable lazy loading for images', 'wpa-superstar' ); ?>
-                    </label>
-                    <p class="description">
-                        <?php esc_html_e( 'Improves page load time by loading images only when they enter the viewport.', 'wpa-superstar' ); ?>
-                    </p>
-                </div>
-            <?php elseif ( $active_tab == 'advanced' ) : ?>
-                <div class="wpa-superstar-toggle">
-                    <label for="wpa_superstar_minify_css">
-                        <div class="wpa-toggle-switch">
-                            <input type="checkbox" 
-                                   id="wpa_superstar_minify_css"
-                                   name="wpa_superstar_minify_css" 
-                                   value="1" 
-                                   <?php checked( get_option( 'wpa_superstar_minify_css', 0 ) ); ?> 
-                            />
-                            <span class="wpa-toggle-slider"></span>
-                        </div>
-                        <?php esc_html_e( 'Enable CSS minification', 'wpa-superstar' ); ?>
-                    </label>
-                    <p class="description">
-                        <?php esc_html_e( 'Minifies CSS files to reduce file size and improve load times.', 'wpa-superstar' ); ?>
-                    </p>
-                </div>
+                <?php if ( $active_tab == 'general' ) : ?>
+                    <div class="wpa-superstar-toggle">
+                        <label for="wpa_superstar_lazy_load">
+                            <div class="wpa-toggle-switch">
+                                <input type="checkbox" 
+                                       id="wpa_superstar_lazy_load"
+                                       name="wpa_superstar_lazy_load" 
+                                       value="1" 
+                                       <?php checked( get_option( 'wpa_superstar_lazy_load', 1 ) ); ?> 
+                                />
+                                <span class="wpa-toggle-slider"></span>
+                            </div>
+                            <?php esc_html_e( 'Enable lazy loading for images', 'wpa-superstar' ); ?>
+                        </label>
+                        <p class="description">
+                            <?php esc_html_e( 'Improves page load time by loading images only when they enter the viewport.', 'wpa-superstar' ); ?>
+                        </p>
+                    </div>
+                <?php elseif ( $active_tab == 'advanced' ) : ?>
+                    <div class="wpa-superstar-toggle">
+                        <label for="wpa_superstar_minify_css">
+                            <div class="wpa-toggle-switch">
+                                <input type="checkbox" 
+                                       id="wpa_superstar_minify_css"
+                                       name="wpa_superstar_minify_css" 
+                                       value="1" 
+                                       <?php checked( get_option( 'wpa_superstar_minify_css', 0 ) ); ?> 
+                                />
+                                <span class="wpa-toggle-slider"></span>
+                            </div>
+                            <?php esc_html_e( 'Enable CSS minification', 'wpa-superstar' ); ?>
+                        </label>
+                        <p class="description">
+                            <?php esc_html_e( 'Minifies CSS files to reduce file size and improve load times.', 'wpa-superstar' ); ?>
+                        </p>
+                    </div>
 
-                <div class="wpa-superstar-toggle">
-                    <label for="wpa_superstar_minify_js">
-                        <div class="wpa-toggle-switch">
-                            <input type="checkbox" 
-                                   id="wpa_superstar_minify_js"
-                                   name="wpa_superstar_minify_js" 
-                                   value="1" 
-                                   <?php checked( get_option( 'wpa_superstar_minify_js', 0 ) ); ?> 
-                            />
-                            <span class="wpa-toggle-slider"></span>
-                        </div>
-                        <?php esc_html_e( 'Enable JS minification', 'wpa-superstar' ); ?>
-                    </label>
-                    <p class="description">
-                        <?php esc_html_e( 'Minifies JavaScript files to reduce file size and improve load times.', 'wpa-superstar' ); ?>
-                    </p>
-                </div>
-            <?php endif; ?>
+                    <div class="wpa-superstar-toggle">
+                        <label for="wpa_superstar_minify_js">
+                            <div class="wpa-toggle-switch">
+                                <input type="checkbox" 
+                                       id="wpa_superstar_minify_js"
+                                       name="wpa_superstar_minify_js" 
+                                       value="1" 
+                                       <?php checked( get_option( 'wpa_superstar_minify_js', 0 ) ); ?> 
+                                />
+                                <span class="wpa-toggle-slider"></span>
+                            </div>
+                            <?php esc_html_e( 'Enable JS minification', 'wpa-superstar' ); ?>
+                        </label>
+                        <p class="description">
+                            <?php esc_html_e( 'Minifies JavaScript files to reduce file size and improve load times.', 'wpa-superstar' ); ?>
+                        </p>
+                    </div>
+                <?php endif; ?>
+            </div>
         </div>
     </div>
     <?php