coffey-labs/ihasmail
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Highlight saving, not discarding, on the unsaved-changes guard

Browse Source 
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:
jcoffey-dev
2026-09-02 07:05:27 -07:00
parent 6b8ac393c9
commit 4a99b77bc3
4 changed files with 131 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/styles/app.css
+4
View File
@@ -715,6 +715,10 @@ a.menu-item:hover { color: var(--fg); }
.dialog-choices { display: flex; flex-direction: column; gap: 8px; }
.dialog-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; padding: 10px 12px; height: auto; }
.dialog-choice small { font-weight: 400; opacity: 0.75; }
/* Destructive, the way .menu-item.danger is: a red label on the ordinary
surface. A filled red button in a list of answers is the loudest thing in the
dialog, which is wrong when it is the answer that loses your work. */
.dialog-choice.danger { color: var(--danger); }
/* Toasts ----------------------------------------------------------------- */
.toast-host { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 3000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; padding: 0 12px; width: 100%; max-width: 520px; }