From a417766151aa47df50d8a83ae455a412e8eebc1b Mon Sep 17 00:00:00 2001
From: Marcus Quinn <marcus@agentdesign.co.uk>
Date: Fri, 14 Mar 2025 02:51:48 +0000
Subject: [PATCH] Update header to match ACF style: - Add white header
 container with border and shadow - Add version number and documentation link
 - Improve tab styling and navigation - Update colors and typography to match
 WordPress standards - Refine spacing and layout

---
 admin/css/wpa-superstar-admin.css | 79 ++++++++++++++++++++++++-------
 admin/settings.php                | 28 +++++++----
 2 files changed, 80 insertions(+), 27 deletions(-)

diff --git a/admin/css/wpa-superstar-admin.css b/admin/css/wpa-superstar-admin.css
index 1b8e975..0d84f8e 100644
--- a/admin/css/wpa-superstar-admin.css
+++ b/admin/css/wpa-superstar-admin.css
@@ -1,36 +1,78 @@
 .wpa-superstar-wrap {
-    max-width: 800px;
-    margin: 20px 0;
+    max-width: 1100px;
+    margin: 25px 40px 0 20px;
 }
 
-.wpa-superstar-wrap h1 {
+.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;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.wpa-superstar-header h1 {
     font-size: 23px;
     font-weight: 400;
     margin: 0;
-    padding: 9px 0 4px 0;
+    padding: 0;
     line-height: 1.3;
+    color: #1d2327;
+}
+
+.wpa-superstar-header-actions {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.wpa-superstar-version {
+    color: #646970;
+    font-size: 13px;
+    font-weight: 400;
 }
 
 .nav-tab-wrapper {
-    margin-bottom: 20px;
-    border-bottom: 1px solid #ccd0d4;
+    margin: 0;
+    padding-top: 0;
+    border-bottom: 1px solid #c3c4c7;
+    line-height: inherit;
 }
 
 .nav-tab {
-    background: #f8f9fa;
-    border: 1px solid #ccd0d4;
-    border-bottom: none;
-    padding: 8px 16px;
+    margin-left: 0;
+    margin-right: 4px;
+    padding: 8px 12px;
     font-size: 14px;
     line-height: 1.71428571;
     font-weight: 600;
-    margin-right: 5px;
+    background: #f0f0f1;
+    border: 1px solid #c3c4c7;
+    border-bottom: none;
+    color: #50575e;
 }
 
-.nav-tab-active {
+.nav-tab:hover,
+.nav-tab:focus {
+    background: #fff;
+    color: #1d2327;
+}
+
+.nav-tab-active,
+.nav-tab-active:focus,
+.nav-tab-active:focus:active,
+.nav-tab-active:hover {
     background: #fff;
     border-bottom: 1px solid #fff;
-    margin-bottom: -1px;
+    color: #1d2327;
+}
+
+.wpa-settings-content {
+    margin-top: 20px;
 }
 
 /* ACF-style toggle switches */
@@ -38,7 +80,7 @@
     margin: 15px 0;
     padding: 15px;
     background: #fff;
-    border: 1px solid #ccd0d4;
+    border: 1px solid #c3c4c7;
     border-radius: 3px;
     box-shadow: 0 1px 1px rgba(0,0,0,0.04);
 }
@@ -49,13 +91,14 @@
     font-size: 14px;
     line-height: 1.4;
     font-weight: 600;
-    color: #23282d;
+    color: #1d2327;
     cursor: pointer;
 }
 
 .wpa-superstar-toggle .description {
     margin: 5px 0 0 44px;
-    color: #666;
+    color: #646970;
+    font-size: 13px;
 }
 
 /* Toggle Switch Container */
@@ -83,10 +126,10 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: #ccd0d4;
+    background-color: #c3c4c7;
     transition: .3s;
     border-radius: 20px;
-    border: 2px solid #ccd0d4;
+    border: 2px solid #c3c4c7;
 }
 
 /* Slider knob */
diff --git a/admin/settings.php b/admin/settings.php
index 33f98ea..edc32db 100644
--- a/admin/settings.php
+++ b/admin/settings.php
@@ -38,16 +38,26 @@ function wpa_superstar_settings_page() {
     $active_tab = isset( $_GET['tab'] ) ? $_GET['tab'] : 'general';
     ?>
     <div class="wrap wpa-superstar-wrap">
-        <h1><?php echo esc_html( get_admin_page_title() ); ?></h1>
+        <div class="wpa-superstar-header">
+            <h1><?php echo esc_html( get_admin_page_title() ); ?></h1>
+            <div class="wpa-superstar-header-actions">
+                <span class="wpa-superstar-version">Version <?php echo esc_html( WPA_SUPERSTAR_VERSION ); ?></span>
+                <a href="https://www.wpallstars.com/docs/superstar-plugin/" target="_blank" class="button button-secondary">
+                    <?php esc_html_e( 'Documentation', 'wpa-superstar' ); ?>
+                </a>
+            </div>
+        </div>
         
-        <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 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' ); ?>