Account Page Redesign & Rebrand Implementation (Dev)

[MTsomo]

Account Page Redesign & Rebrand Implementation

As a Frontend Developer,
I need to build and implement the redesigned Account Settings page according to the new Figma specifications,
So that learners can manage their profile, security, and preferences within a modern, clean, and brand-aligned interface.

Description

The current Account Settings page utilizes an outdated legacy layout and styling. Following the approved WeBuddhist Academy redesign specs in Figma, this ticket covers rebuilding the Account page frontend—updating the visual structure, implementing modern form controls, tabbed navigation, and applying updated brand color and typography design tokens.

Acceptance Criteria

• Page layout and navigation updated to reflect the modern card-based or tabbed structure defined in Figma across Profile Info, Account Security, Preferences, and Linked Accounts.
• Page typography, spacing, and container styles utilize updated WeBuddhist Academy display and UI font rules.
• Form Controls & Inputs: Text fields, dropdowns, textareas, and radio/checkbox selectors implemented with clean borders, focus outlines, error highlights, and disabled states.
• Profile Media Component: Avatar upload and photo removal interactions updated to match the new design.
• Security & Connected Accounts: Password change fields and social OAuth connection toggles updated with modern button and switch styling.
• Feedback & Banners: Inline success, warning, and error alert banners styled according to new design specifications.
• Account update API calls, validation logic, and form submission flows remain fully functional with zero backend regressions.
• Layout verified as fully responsive across desktop, tablet, and mobile viewports.

Definition of Done

• Design Review Sign-Off: Implemented frontend matches 1:1 with approved Figma Account Page mockups.
• QA Verification: Tested and approved on Staging across supported desktop and mobile browsers.