Dev: Profile Page Rebrand & Styling Refresh

[MTsomo]

Dev: Profile Page Rebrand & Styling Refresh

As a Frontend Developer,
I need to apply the WeBuddhist Academy brand palette, typography hierarchy, and subtle UI refinements to the Profile Page,
So that learners experience a polished, brand-aligned view when displaying their public profile, achievements, and course history.

Description

As part of the platform-wide visual update, the user-facing Profile Page requires a styling refresh to align with our new WeBuddhist Academy design system. This work involves applying updated brand color tokens and typography rules across profile headers, achievement badges, statistics cards, and activity sections, alongside minor UI polish adjustments specified in the design update.

Acceptance Criteria

• Profile page header, display names, section titles, and labels updated to the WeBuddhist Academy typography hierarchy.
• Color scheme across avatar borders, user metadata badges, statistics cards, background containers, and section dividers updated to reflect brand color tokens.
• User achievement elements (badges, completed course counts, certificates earned) styled with updated brand accent colors and clean border layouts.
• Minor UI layout adjustments (card padding, icon alignment, and spacing polish) applied as per updated Figma reference.
• Public vs. private profile view permissions and data rendering remain 100% functionally intact.
• Responsive layout verified across desktop, tablet, and mobile viewports.

Definition of Done

• Design Review Sign-Off: Implemented frontend verified and approved against the updated Profile Page brand specs in Figma.
• QA Verification: Tested and approved on Staging across desktop and mobile browsers with zero functional regressions.