Highlight saving, not discarding, on the unsaved-changes guard
The guard shipped with "Discard changes" as the only choice carrying a colour -- a filled red button, against a plain outlined "Save changes" -- which made losing the work the loudest thing in a dialog whose entire purpose is to stop that. The emphasis belongs on the safe answer. A dialog choice can now be marked `primary`, and Save is. Discard keeps its `danger` flag, but a danger choice is drawn the way `.menu-item.danger` already is: a red label on the ordinary surface. In a list of answers a filled red button is not "this one is destructive", it is "this one is the default", which is the opposite of what it meant here. That rendering change reaches the other choice dialog too -- the calendar's "this occurrence or the whole series", where both answers are marked danger because both delete something. Two filled red buttons become two red labels and nothing is highlighted, which is right: neither answer there is the safe one, so neither should look like it. Checked in the browser against the mock, in both themes. Light: #dc2626 on white, 4.8:1. Dark: the theme's own --danger, which every palette already tunes for contrast on this surface. Reported on #175 by the reporter's colleague, who is right that the non-destructive action is the one that normally gets the highlight.
This commit is contained in:
+12
-1
@@ -93,6 +93,17 @@ export interface DialogChoice {
|
||||
/** Shown under the label, for the choice that needs the caveat. */
|
||||
hint?: string;
|
||||
danger?: boolean;
|
||||
/**
|
||||
* The safe answer, given the weight a dialog's confirm button has.
|
||||
*
|
||||
* A list of choices has no default until one is said to be, and the
|
||||
* destructive one must not become it by being the only thing with a colour --
|
||||
* which is what "Discard changes" was, on a guard whose whole purpose is to
|
||||
* stop you losing work ([#175]).
|
||||
*
|
||||
* [#175]: https://github.com/Coffey-Labs/ihasmail/issues/175
|
||||
*/
|
||||
primary?: boolean;
|
||||
}
|
||||
|
||||
interface ConfirmRequest {
|
||||
@@ -178,7 +189,7 @@ export function ConfirmHost() {
|
||||
{req.kind === "choice" && (
|
||||
<div className="dialog-choices">
|
||||
{req.choices?.map((c) => (
|
||||
<button key={c.value} className={`btn dialog-choice ${c.danger ? "btn-danger" : ""}`} onClick={() => done(c.value)}>
|
||||
<button key={c.value} className={`btn dialog-choice ${c.primary ? "btn-primary" : ""} ${c.danger ? "danger" : ""}`} onClick={() => done(c.value)}>
|
||||
<span>{c.label}</span>
|
||||
{c.hint && <small>{c.hint}</small>}
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user