[IAmJSD]

Most of this issue is already done on main by #765, which defined .btn-danger, .btn-link, .btn-warning and .secondary and made the default button a quiet outlined one. One named symptom remained: each Home "Upcoming Scheduled Purchases" row still used the filled red danger class for Cancel, so a solid red block was the loudest element on every row. This PR switches that Cancel to the outlined .btn-danger variant.

Refs #695
Partial: the issue's suggested collapse of the ~14 button variants into one .btn system is not done here (#765 deferred it as well).

What changed

• frontend/src/dashboard.ts: the row-level Cancel button uses btn-danger (red border and text, fills red on hover) instead of danger (always filled red). The detail dialog's "Cancel Purchase" stays filled, since there it is the dialog's main action.
• frontend/src/__tests__/dashboard.test.ts: class assertion.
• frontend/tests-e2e/upcoming-purchases-layout.spec.ts: a paint check against the real stylesheet (computed background is not the solid error red, text is not white, border is the error red).

Why this approach

A one-class change that reuses the outlined destructive variant #765 introduced for this case ("fills on hover so the destructive action reads as such without being the loudest element in a row"). No new CSS. The variant collapse touches about 100 call sites across files that other open branches are also editing, and #765 explicitly put it out of scope.

Screenshots

Before is main (a14dc8f2), after is this branch. Both are headless Chromium at 1440x900 against the repo's mocked e2e API.

Before	After

Home's Upcoming Scheduled Purchases with 3 mocked rows. Before, each row has a solid red Cancel, the loudest element on the row. After, Cancel is outlined red (still reads as destructive, fills on hover) and no longer outweighs View Details.

Verification

Run on this branch's head 082f53d5 on top of main a14dc8f2.

• npm run lint: 0 errors (142 pre-existing warnings). Typecheck clean, build OK.
• Jest: 109 suites, 3487 passed, 1 skipped. The new dashboard test passes across repeated --randomize runs. Some seeds fail 2-3 pre-existing dashboard tests ("fetches dashboard summary...", "uses current provider filter", "90-day range") on unmodified main too (seed -1388931807 reproduces it on a14dc8f2), so that order dependence is unrelated.
• Playwright: 158/158 passed, including the new paint check.
• Secrets scan clean, planted key flagged. scripts/test-git-secrets-allowlist.sh: 137 PASS, 0 FAIL.

Notes for review

• Should row-level destructive actions be outlined everywhere? The plan card Delete (plans.ts:1161, class danger) and the plan purchase remove button (plans.ts:761, btn-small danger) are still filled red. They are left alone because the issue only names Home rows.
• Still open from the issue: collapsing .btn-small, .btn-secondary, .btn-primary, .btn-destructive, .btn-tertiary and the button.primary/success/danger variants into one .btn system. .btn-small and .btn-secondary also still use a grey #e8e8e8 hover. The issue could close once there is a decision on whether the collapse gets its own issue.

Overlaps

#713's branch edits renderUpcoming in frontend/src/dashboard.ts near the same lines, so expect a trivial textual conflict. #725 (CSS hygiene) and #743 (modal/card systems) may touch the button CSS if the variant collapse happens there.

Note for the UI owner

This changes UI code that @cristim owns. IAmJSD reviewed the before/after screenshots and asked for it to be merged; any design point you disagree with can be a follow-up.

🤖 Generated with Claude Code

[coderabbitai]

Caution

Review failed

The pull request is closed.

Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

_{Comment @coderabbitai help to get the list of available commands.}

[IAmJSD]

Independent review (IAmJSD's agent, fresh context, given only the diff, the issue and the PR text): APPROVE 082f53d5a86c4fbce98320912b84b4fcf6bdd7c2

Blocking:

• none
  Non-blocking:
• Same filled-red row pattern still exists at frontend/src/plans.ts:761 (btn-small danger) and :1161 (Delete danger). The PR body already flags both as follow-ups.
  Attacked: Compared the .btn-danger and button.danger CSS (components.css:164/270). The outlined variant uses the error-fg on error-bg tokens plus the error border and fills on hover, so it keeps the default button padding/size and focus styling. Checked that no row-specific CSS keys on .danger. Checked that the detail-dialog Cancel keeps its filled style. The e2e paint check verifies computed colors from the real stylesheet. "Refs" is correct because the variant collapse is not done.

[IAmJSD]

Local verification at 082f53d5 merged onto current main (69458f8a; merge-tree 93430e04; Linux, Node, headless Chromium):

• This branch's own checks passed at this head: lint, typecheck, build, the full jest suite, the full Playwright e2e suite, and the git-secrets checks (see Verification in the PR body).
• The combined tree of every UI PR in this merge wave (tree 89dd34d8, main plus 46 PRs) passes npm ci, lint, typecheck, build, jest (1 skipped, 3914 passed, 3915 total), and the full Playwright suite (208 passed).
• CI is green on 082f53d5 (CI Success, Run pre-commit hooks).
• The independent review above approves this exact head.
• Nothing was applied to any cloud.

[IAmJSD]

Marked ready and merged by IAmJSD's agent, at IAmJSD's request (IAmJSD reviewed the before/after screenshots; cristim is traveling), after the independent review and local verification above, all at 082f53d5.