From 6159bc9ae16929315ec47471ad1c0b30c8f60cff Mon Sep 17 00:00:00 2001
From: jelveh <nj@puter.com>
Date: Sat, 1 Aug 2026 00:27:27 -0700
Subject: [PATCH] Polish dashboard settings button styling

Update `.dashboard-settings-card .button` to use dashboard theme tokens for text, background, and borders, and add clearer hover/focus/active states with subtle elevation and transitions. Also override disabled styles in this context so dark mode no longer shows hard-coded light greys from the base `.button:disabled` rule.
---
 src/gui/src/css/dashboard.css | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/gui/src/css/dashboard.css b/src/gui/src/css/dashboard.css
index 1da5fc214..d501e422c 100644
--- a/src/gui/src/css/dashboard.css
+++ b/src/gui/src/css/dashboard.css
@@ -4164,10 +4164,40 @@ body.myapps-reordering .myapps-tile {
 
 .dashboard-settings-card .button {
     flex-shrink: 0;
-    color: var(--dashboard-text);
+    color: var(--dashboard-text-primary);
+    background: var(--dashboard-card-background);
+    border-color: var(--dashboard-border);
+    border-radius: 10px;
+    font-weight: 600;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    transition: background-color 0.15s ease, border-color 0.15s ease;
+}
+
+.dashboard-settings-card .button:hover {
     background: var(--dashboard-sidebar-background);
 }
 
+.dashboard-settings-card .button:focus-visible {
+    border-color: var(--select-color);
+    box-shadow: 0 0 0 3px var(--select-ring);
+}
+
+.dashboard-settings-card .button:active {
+    background: var(--dashboard-hover);
+    border-color: var(--dashboard-border);
+    color: var(--dashboard-text-primary);
+    box-shadow: none;
+}
+
+/* Base .button:disabled hard-codes light greys with !important, which
+   clashes with this outline style and glares in dark mode. */
+.dashboard-settings-card .button:disabled {
+    background: var(--dashboard-card-background) !important;
+    border-color: var(--dashboard-border) !important;
+    color: var(--dashboard-text-muted) !important;
+    text-shadow: none !important;
+}
+
 .dashboard-settings-card-success {
     border-color: var(--dashboard-success-border);
     background: var(--dashboard-success-background);