Safer Destructive Actions on the HMRC Connection Page

Release v1.0.240 · UI/UX Improvement

---

The problem

On the HMRC Connection page, one button has always carried much more weight than its appearance suggested: 'Delete all HMRC data'.

This action permanently removes:

• Your HMRC OAuth tokens
• Your stored National Insurance number
• All HMRC connection data

It cannot be undone.

Despite that, the button was styled as plain text — text-red-600 with no border and no background — and was placed directly alongside the 'Disconnect' and 'Re-authorise' buttons. Because it visually appeared lighter than the bordered 'Disconnect' button, it didn't read as the more dangerous of the two. A user scanning quickly for 'Re-authorise' could easily click it by mistake.

What we changed

1. Dedicated Danger Zone section

The 'Delete all HMRC data' button has been moved out of the primary action group and into its own clearly labelled Danger Zone section at the bottom of the panel. This matches the same pattern already used on the Settings page, so the convention is consistent across the product.

Separating it spatially means it is no longer adjacent to everyday actions like re-authorising your connection — there is no longer a way to misclick it while reaching for something else.

2. Explicit destructive button styling

The button now carries a visual treatment that matches its severity:

border border-red-300 bg-red-50 text-red-700 hover:bg-red-100

This gives it a visible border and a red-tinted background — it is immediately recognisable as a destructive action rather than a passive label.

3. Confirmation dialog unchanged

The confirmation dialog that appears before the deletion is carried through was already well-designed and is left as-is. The goal of this change was specifically to make the button harder to reach accidentally, not to add more confirmation steps.

Summary

	Before	After
Placement	Grouped with Disconnect / Re-authorise	Separate Danger Zone section
Styling	Text-only, text-red-600	Bordered, bg-red-50 text-red-700
Confirmation dialog	✅ Present	✅ Unchanged

This is a small change visually, but an important one for safety. When an action is irreversible, the UI should make that unmistakably clear — both through where the button lives on the page and how it looks.