UI Enhancement - Account Info - Restyle Deactivate Account as a destructive button
- 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
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