bcgov / bcgov/connect

UI Enhancement - Account Info - Restyle Deactivate Account as a destructive button

Open Beginner friendly
#107 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
No language data
Stars
0
Forks
4
Avg merge
1m
Merged PRs (30d)
2

Description

Context:
The Deactivate Account action currently displays as a text link in the default action color, positioned directly beneath the Terms of Use links with no visual separation.

Solution:
Restyle Deactivate Account as a standalone destructive button, separated from the Terms of Use section.

Acceptance Criteria:
**Deactivate Account displays as a button**
1. The button uses the destructive/danger outline style with red/error border and text color on a transparent or white background, matching other destructive actions across the platform.

2. The button sits visually apart from the Terms of Use content, with enough vertical spacing above it.

3. The button is right-aligned within the content column.
4. Button label text stays "Deactivate Account".
5. Hover, focus, active, and disabled states follow the standard button states.
6. Click behavior is unchanged

Figma link:
https://www.figma.com/design/DToyuMjhlWxDm5Oywu8NpG/Account-Setting-Updates?node-id=12511-97&t=h0JAuN6khOl78hVQ-4

Contributor guide

Open the contributing guide

Research direction

Start at the Account Info section of the account settings UI and inspect how existing destructive buttons and the Deactivate Account action are rendered. Use the linked Figma design and standard button states as references. Done means the label and click behavior are unchanged, while the action has the specified destructive styling, spacing, alignment, and interaction states.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt
Domain
design, frontend
Issue type
Feature
Difficulty
2/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
72/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.