From 6c930a9f24be938e9cd3ee29b0bd0daaa0b07f3a Mon Sep 17 00:00:00 2001
From: Sunil Mohan Adapa <sunil@medhas.org>
Date: Sat, 29 Nov 2025 10:20:09 +0530
Subject: [PATCH] upgrades: Use bootstrap spinner button instead of custom
 styling

- This simplifies the implementation and gets it ready for dark/light mode.

Tests:

- In the upgrades main view, set is_busy = True and disable setting
refresh_page_sec. Load the upgrades app and notice that the 'Updating...' button
is showing proper styling in light anddark modes.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
---
 .../templates/upgrades_configure.html         |  8 +++----
 static/themes/default/css/main.css            | 22 -------------------
 2 files changed, 4 insertions(+), 26 deletions(-)

diff --git a/plinth/modules/upgrades/templates/upgrades_configure.html b/plinth/modules/upgrades/templates/upgrades_configure.html
index 3609c8dfd..2c705ba86 100644
--- a/plinth/modules/upgrades/templates/upgrades_configure.html
+++ b/plinth/modules/upgrades/templates/upgrades_configure.html
@@ -104,10 +104,10 @@
   <h3>{% trans "Manual Update" %}</h3>
   {% if is_busy %}
     <div class="btn-toolbar">
-      <button type="button" disabled="disabled"
-              class="running-status-parent btn btn-default" >
-        <span class="running-status loading"></span>
-        {% trans "Updating..." %}
+      <button type="button" class="btn btn-default" disabled="disabled">
+        <span class="spinner-border spinner-border-sm" aria-hidden="true">
+        </span>
+        <span role="status">{% trans "Updating..." %}</span>
       </button>
     </div>
   {% else %}
diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css
index d5e8adc5c..446f67d0f 100644
--- a/static/themes/default/css/main.css
+++ b/static/themes/default/css/main.css
@@ -228,28 +228,6 @@ body {
     vertical-align: middle;
 }
 
-.running-status-parent {
-    display: inline-block;
-}
-
-.running-status {
-    border-radius: 50%;
-    border: 1px solid black;
-    width: 0.5rem;
-    height: 0.5rem;
-    display: inline-block;
-}
-
-.running-status.loading {
-    border: 0.25rem solid var(--neutral-light-color);
-    border-top: 0.25rem solid var(--progress-color);
-    border-radius: 50%;
-    width: 1rem;
-    height: 1rem;
-    display: inline-block;
-    animation: spin 1s linear infinite;
-}
-
 @keyframes spin {
     0% {
         transform: rotate(0deg);