mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
Joshen LimandGildas Garcia
acaf640d1c
## Context Just a couple of UI polishes for the recovery codes UI under Account settings -> Security - all visual, no functional changes ## Changes involved - Shift position of Recovery codes section below MFA - Better hierarchy since recovery codes only matter after adding an MFA app - Prevents layout shift with the feature flag as well | Before | After | |------|------| | <img width="400" alt="image" src="https://github.com/user-attachments/assets/3f24e30b-14b1-49cc-8942-0bd139af031b" /> | <img width="400" alt="image" src="https://github.com/user-attachments/assets/9a020b9b-4644-4e39-ba75-082e7f3a08db" /> | - Update how recovery codes are displayed | Before | After | |------|------| | <img width="400" alt="image" src="https://github.com/user-attachments/assets/9ce00013-9b7f-4ab9-9a10-0eec536022f5" /> | <img width="400" alt="image" src="https://github.com/user-attachments/assets/6bdc8c18-cfd2-46ea-a851-5a9fe03a5211" /> | - Update recovery codes modal, aligns "confirmation" UX to be more consistent with scoped PAT - Footer CTA is just "Done" that's disabled until either Copy or Download is clicked - Copy CTA shifted below codes for contextual grouping - Also added download CTA, which just downloads codes in TXT | Before | After | |------|------| | <img width="534" height="389" alt="image" src="https://github.com/user-attachments/assets/55cdbe9f-f37c-4284-b2ac-46834fd14437" /> | <img width="533" height="548" alt="image" src="https://github.com/user-attachments/assets/ab091822-e5fc-464c-94e6-f1d6b6792c59" /> | - Show success toast after codes are successfully deleted - Use warning variant for regenerate confirmation dialog <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Recovery codes are displayed as a numbered list, with separate options to copy or download them. * You must confirm that you’ve saved the codes before closing the success dialog. * **Improvements** * Generation buttons show when codes are being created. * Recovery-code actions have updated layouts, icons, and confirmation styling. Available codes are identified as single-use, and loading errors are displayed in an alert. * Removing codes displays a success message before the confirmation dialog closes. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>