From 5a04a629455cdf0fa10d9005f40f940f6b271ab0 Mon Sep 17 00:00:00 2001
From: Sucukdeluxe <Sucukdeluxe@users.noreply.github.com>
Date: Tue, 25 Aug 2026 04:23:59 +0200
Subject: [PATCH] style(settings): emphasize the save action

Give the settings save button a dedicated success-green background with black text and a matching lightened hover state while retaining focus and disabled behavior. Add a renderer regression test for the exact scoped class and color contract.
---
 src/renderer/views/settings/SettingsView.tsx |  2 +-
 src/renderer/views/settings/settings.css     | 11 +++++++++++
 tests/settings-view.test.tsx                 |  9 +++++++++
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/renderer/views/settings/SettingsView.tsx b/src/renderer/views/settings/SettingsView.tsx
index 971e00a..a7fb8a2 100644
--- a/src/renderer/views/settings/SettingsView.tsx
+++ b/src/renderer/views/settings/SettingsView.tsx
@@ -71,7 +71,7 @@ export function SettingsContent({ model, actions }: SettingsViewProps): ReactEle
           <span aria-live="polite" className={`settings-save-state is-${model.saveState}`} role="status">{saveLabel}</span>
         </div>
         <button
-          className="settings-button settings-button-primary"
+          className="settings-button settings-button-primary settings-save-button"
           disabled={saveDisabled}
           onClick={actions.onSave}
           type="button"
diff --git a/src/renderer/views/settings/settings.css b/src/renderer/views/settings/settings.css
index 4655a5c..6c6f050 100644
--- a/src/renderer/views/settings/settings.css
+++ b/src/renderer/views/settings/settings.css
@@ -478,6 +478,12 @@
   color: var(--ui-primary-text);
 }
 
+.settings-save-button {
+  border-color: var(--ui-success);
+  background: var(--ui-success);
+  color: #000000;
+}
+
 .settings-button-danger {
   border-color: color-mix(in srgb, var(--ui-danger) 70%, var(--ui-border));
   background: transparent;
@@ -496,6 +502,11 @@
   color: var(--ui-primary-text);
 }
 
+.settings-save-button:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--ui-success) 86%, #ffffff);
+  color: #000000;
+}
+
 .settings-account-workspace {
   display: grid;
   grid-template-rows: auto auto minmax(0, 1fr);
diff --git a/tests/settings-view.test.tsx b/tests/settings-view.test.tsx
index 43db7ad..718ba07 100644
--- a/tests/settings-view.test.tsx
+++ b/tests/settings-view.test.tsx
@@ -778,6 +778,15 @@ describe("settings views", () => {
     }
   });
 
+  it("renders the settings save action with a green background and black text", () => {
+    const html = renderToStaticMarkup(<SettingsContent actions={viewActions()} model={viewModel("dirty")} />);
+    const css = readFileSync(new URL("../src/renderer/views/settings/settings.css", import.meta.url), "utf8");
+
+    expect(html).toContain('class="settings-button settings-button-primary settings-save-button"');
+    expect(css).toMatch(/\.settings-save-button\s*{[^}]*border-color:\s*var\(--ui-success\);[^}]*background:\s*var\(--ui-success\);[^}]*color:\s*#000000;/s);
+    expect(css).toMatch(/\.settings-save-button:hover:not\(:disabled\)\s*{[^}]*background:\s*color-mix\(in srgb, var\(--ui-success\) 86%, #ffffff\);[^}]*color:\s*#000000;/s);
+  });
+
   it("renders the sidebar and content once in the complete view", () => {
     const html = renderToStaticMarkup(<SettingsView actions={viewActions()} model={viewModel()} />);
     expect(count(html, "data-visual-region=\"settings-sidebar\"")).toBe(1);