Redesign Settings Pages with Tab Navigation

[grantfox-oss]

Type: UI/UX Design | Priority: MEDIUM | Effort: 10 hours
Component: frontend/app/(dashboard)/settings/

Description: Redesign settings pages with moon theme, tab navigation, better organization.

Current State: All settings on one page, overwhelming number of options, poor visual organization.

Desired State: Tab navigation (Account, Wallet, Security, Preferences, API, Compliance), each tab with focused settings, clear section grouping, confirmation modals for dangerous actions, save/cancel buttons with visual feedback.

Tab Structure: Account (profile, contact, delete), Wallet (connected wallets, signing devices, default wallet, gas tank settings), Security (password, 2FA, biometric, recovery, sessions, login history), Preferences (theme, language, notifications, date format), API (API keys, webhooks, rate limits, docs), Compliance (verification, OFAC, data export, terms).

Form Elements Styling:

• Input: #232a34 background, #7c3aed border on focus
• Toggle: nebula purple when enabled, gray when disabled
• Buttons: electric blue #00d4ff
• Dangerous Actions: red #ef4444

Key Acceptance Criteria:

• Tab navigation renders horizontally below header
• Active tab highlighted with bottom border (electric blue)
• Tab content transitions smoothly (fade 200ms)
• Each tab loads lazily (performance optimization)
• Form validation shows inline errors
• Save button disabled if no changes
• Toast notification on save success
• Confirmation modal for dangerous actions
• Mobile: tabs scroll horizontally, stay visible
• Accessibility: tab navigation keyboard accessible
• All form fields have proper labels
• Password strength indicator on password change

Related Files:

• frontend/app/(dashboard)/settings/page.tsx
• frontend/components/settings/ (create folder)

[Tobi-8]

Please maintainer
Assign me to this issue
I can confidently solve it with my experience

[K1NGD4VID]

Hi

Please assign me this task. I’ll set up the backend foundation in Agrocylo-PIP/server with TypeScript, environment configuration, structured logging, scalable module organization, and a health endpoint, ensuring the server runs correctly in development.

ETA: 1–2 hours.

[Tobi-8]

Can i be assigned to this
I have the knowledge and experience to handle this issue

[1sraeliteX]

Hello maintainer, I would like to work on this issue

[grantfox-oss]

🦊 GrantFox — @K1NGD4VID has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #1194)
2. Your PR will be reviewed by the StellarStream-HQ maintainers

Good luck! Track your progress on GrantFox.