From 05ff272b51ee71fc1e1db78502f31999af631602 Mon Sep 17 00:00:00 2001
From: Marcus Quinn <marcus@agentdesign.co.uk>
Date: Tue, 25 Mar 2025 02:34:40 +0000
Subject: [PATCH] Improve theme install/activate buttons: maintain button size
 and use spinner animation

---
 admin/css/wp-allstars-admin.css | 32 ++++++++++++++++++++++----------
 admin/js/wp-allstars-admin.js   | 16 +++++++++-------
 2 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/admin/css/wp-allstars-admin.css b/admin/css/wp-allstars-admin.css
index 5623b0c..f771523 100644
--- a/admin/css/wp-allstars-admin.css
+++ b/admin/css/wp-allstars-admin.css
@@ -623,17 +623,29 @@ input:checked + .wp-toggle-slider:before {
     gap: 8px;
 }
 
-/* Make theme buttons match size of plugin buttons */
+/* Fix theme buttons to maintain consistent size and prevent layout jumps */
 .theme-actions .button {
-    margin: 0;
-    padding: 6px 14px;
-    height: auto;
-    line-height: 1.4;
-    font-size: 13px;
-    font-weight: 500;
-    min-width: 100px;
-    text-align: center;
-    border-radius: 4px;
+    min-width: 80px !important;
+    text-align: center !important;
+    position: relative !important;
+    padding-left: 12px !important;
+    padding-right: 12px !important;
+}
+
+/* Style for the updating message with spinner */
+.theme-actions .button.updating-message:before,
+.theme-actions .button.updated-message:before {
+    margin-top: 0 !important;
+    padding-right: 3px !important;
+    vertical-align: bottom !important;
+}
+
+/* Style theme actions container spacing */
+.theme-actions {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    gap: 8px !important;
+    padding: 15px !important;
 }
 
 /* Responsive Adjustments */
diff --git a/admin/js/wp-allstars-admin.js b/admin/js/wp-allstars-admin.js
index 75eb30d..78bf1ea 100644
--- a/admin/js/wp-allstars-admin.js
+++ b/admin/js/wp-allstars-admin.js
@@ -310,13 +310,14 @@ jQuery(document).ready(function($) {
             e.preventDefault();
             var $button = $(this);
             var slug = $button.data('slug');
+            var buttonText = $button.text();
             
-            $button.addClass('updating-message').text('Installing...');
+            $button.addClass('updating-message').attr('aria-label', wp.updates.l10n.installing);
             
             wp.updates.installTheme({
                 slug: slug,
                 success: function(response) {
-                    $button.removeClass('updating-message').addClass('updated-message').text('Installed!');
+                    $button.removeClass('updating-message').addClass('updated-message').attr('aria-label', wp.updates.l10n.installed);
                     setTimeout(function() {
                         // Replace the button with an activate button
                         var $parent = $button.parent();
@@ -332,7 +333,7 @@ jQuery(document).ready(function($) {
                     }, 1000);
                 },
                 error: function(response) {
-                    $button.removeClass('updating-message').text('Install');
+                    $button.removeClass('updating-message').text(buttonText);
                     alert(response.errorMessage || 'Error installing theme');
                 }
             });
@@ -344,8 +345,9 @@ jQuery(document).ready(function($) {
             var $button = $(this);
             var slug = $button.data('slug');
             var nonce = $button.data('nonce');
+            var buttonText = $button.text();
             
-            $button.addClass('updating-message').text('Activating...');
+            $button.addClass('updating-message').attr('aria-label', 'Activating...');
             
             $.ajax({
                 url: ajaxurl,
@@ -357,7 +359,7 @@ jQuery(document).ready(function($) {
                 },
                 success: function(response) {
                     if (response.success) {
-                        $button.removeClass('updating-message').addClass('updated-message').text('Activated!');
+                        $button.removeClass('updating-message').addClass('updated-message').attr('aria-label', 'Activated');
                         setTimeout(function() {
                             // Replace the button with an active button
                             var $parent = $button.parent();
@@ -368,12 +370,12 @@ jQuery(document).ready(function($) {
                             // window.location.reload();
                         }, 1000);
                     } else {
-                        $button.removeClass('updating-message').text('Activate');
+                        $button.removeClass('updating-message').text(buttonText);
                         alert(response.data || 'Error activating theme');
                     }
                 },
                 error: function(xhr, status, error) {
-                    $button.removeClass('updating-message').text('Activate');
+                    $button.removeClass('updating-message').text(buttonText);
                     alert('Failed to activate theme. Please try again or activate from the Themes page. Error: ' + error);
                 }
             });