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.
This commit is contained in:
@@ -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"
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user