fix(po): make cancel buttons red & visible #59

Merged

shad0w merged 1 commit from fix/cancel-button-red into master

2026-06-21 07:30:50 +00:00

shad0w commented

2026-06-21 07:29:40 +00:00

Owner

Follow-up to #56. The cancel buttons used Tailwind shades the theme doesn't define.

Problem

The theme (app/globals.css) defines only danger, danger-50, danger-100, danger-700. I'd used bg-danger-600 / danger-500 / danger-200, which generate no CSS — so:

the modal "Cancel this PO" confirm button was white text on no background → invisible;
the header "Cancel PO" button wasn't red.

Fix

Use the same tokens as the app's other filled-red buttons (delete-confirm-dialog): bg-danger text-white hover:bg-danger-700.

Header Cancel PO → solid red.
Modal Cancel this PO confirm → solid red and visible.
Inputs / asterisk / banner border → defined danger tokens.

Verification

Driven live in the browser (logged in as a SUPERUSER): header button computes rgb(220,38,38) on white text; the modal confirm button computes rgb(220,38,38), opacity 1, enabled once cancel + a reason are entered. Screenshot confirmed.
New unit test tests/unit/cancel-po-controls.test.tsx guards the regression (asserts both buttons use standalone bg-danger, not an undefined shade) — pnpm test green (188), type-check clean.

🤖 Generated with Claude Code

Follow-up to #56. The cancel buttons used Tailwind shades the theme doesn't define. ## Problem The theme (`app/globals.css`) defines only `danger`, `danger-50`, `danger-100`, `danger-700`. I'd used `bg-danger-600` / `danger-500` / `danger-200`, which generate **no CSS** — so: - the modal **"Cancel this PO"** confirm button was white text on no background → invisible; - the header **"Cancel PO"** button wasn't red. ## Fix Use the same tokens as the app's other filled-red buttons (`delete-confirm-dialog`): `bg-danger text-white hover:bg-danger-700`. - Header **Cancel PO** → solid red. - Modal **Cancel this PO** confirm → solid red and visible. - Inputs / asterisk / banner border → defined danger tokens. ## Verification - Driven live in the browser (logged in as a SUPERUSER): header button computes `rgb(220,38,38)` on white text; the modal confirm button computes `rgb(220,38,38)`, opacity 1, enabled once `cancel` + a reason are entered. Screenshot confirmed. - New unit test `tests/unit/cancel-po-controls.test.tsx` guards the regression (asserts both buttons use standalone `bg-danger`, not an undefined shade) — `pnpm test` green (188), type-check clean. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

shad0w added 1 commit 2026-06-21 07:29:41 +00:00

fix(po): make cancel buttons red & visible (use defined danger tokens)

PR checks / checks (pull_request) Successful in 31s

Details

PR checks / integration (pull_request) Successful in 25s

Details

43d139234e

The theme only defines danger / danger-50 / danger-100 / danger-700, so
bg-danger-600 / danger-500 / danger-200 generated no CSS — the modal confirm
button was white-on-nothing (invisible) and the header button wasn't red.

- Header "Cancel PO" button → solid red (bg-danger text-white hover:bg-danger-700)
- Modal "Cancel this PO" confirm button → bg-danger (now visible)
- Inputs/asterisk/banner border → defined danger tokens

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>