From 85f04dde1ae72dd31f9b936b89386b531733e526 Mon Sep 17 00:00:00 2001
From: Sunil Mohan Adapa <sunil@medhas.org>
Date: Sat, 29 Nov 2025 10:55:28 +0530
Subject: [PATCH] ui: Fix dark theme colors for running status indicator

Tests:

- Insert event.preventDefault() in form submission code for submission buttons.

- For various button styles, submit the form. Running status indicator appears
on the form button. The styles for the indicator is appropriate in dark and
light themes.

  - Calibre delete library confirmation page has btn-danger.

  - Software Update, configuration update button has btn-primary.

  - Software Update, 'update now' button has btn-default.

  - Change a button from btn-primary to btn-link. Running status is not shown
  for this type of button.

Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
---
 static/themes/default/css/main.css | 6 ++++--
 static/themes/default/js/main.js   | 5 +++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css
index 016a2cb47..009524331 100644
--- a/static/themes/default/css/main.css
+++ b/static/themes/default/css/main.css
@@ -739,8 +739,8 @@ footer {
  */
 .running-status-button-before {
     display: inline-block;
-    border: 0.25rem solid var(--neutral-light-color);
-    border-top: 0.25rem solid var(--progress-color);
+    border: 0.25rem solid var(--bs-btn-color);
+    border-top-color: transparent;
     border-radius: 50%;
     width: 1rem;
     height: 1rem;
@@ -748,6 +748,8 @@ footer {
     margin-left: 0.625rem;
     margin-bottom: -0.25rem;
     margin-right: -1.625rem;
+    position: relative;
+    z-index: 10;
 }
 
 .running-status-button:disabled {
diff --git a/static/themes/default/js/main.js b/static/themes/default/js/main.js
index d01200403..efbc2ee6d 100644
--- a/static/themes/default/js/main.js
+++ b/static/themes/default/js/main.js
@@ -85,6 +85,11 @@ function onSubmitAddProgress(event) {
             // For push buttons
             const beforeElement = document.createElement('div');
             beforeElement.classList.add('running-status-button-before');
+            button.classList.forEach(className => {
+                if (className.startsWith('btn-')) {
+                    beforeElement.classList.add(className);
+                }
+            });
             button.parentNode.insertBefore(beforeElement, button);
         } else if (button.tagName == "BUTTON") {
             // For toggle buttons