FIX (FRONTEND) – Edit Profile Page to Match Figma Design (Pixel-Perfect)

[A6dulmalik]

Description

The Profile page has already been developed, but it must now be updated to match the Figma design precisely (pixel-perfect implementation).

Figma Access

Design Reference
Friends UI

Focus Areas

• Component structure
• Reusability
• Responsiveness
• Design accuracy (spacing, colors, hierarchy, typography)

Requirements

• No API calls
• Use mocked props or temporary constants
• Components must be reusable and composable
• Responsive layout (desktop-first, mobile-friendly)
• Match Figma spacing, colors, alignment, and visual hierarchy
• Indicate the issue number your PR closes in PR description

Acceptance Criteria

• Friends page renders correctly within the existing layout
• Following / Followers tabs switch correctly (UI-only)
• Friend list items are reusable components
• Add Friends action navigates correctly
• Fully responsive across screen sizes
• No API or backend logic introduced
• Clean, readable, modular component structure
• Visual match aligns closely with Figma design

[drips-wave]

This issue has been added to the Stellar Wave Program and is worth 100 Points.

🧑‍💻 Interested in contributing? Apply to work on this issue on Drips Wave, earn points, and receive rewards.

Warning

Only applications submitted via the apply link above will be considered. Please do not apply by commenting on the issue or opening a PR directly.

🤠 Repo maintainers: You can manage this issue's Points and Complexity on your Maintainer Dashboard here. Please keep an eye on applications and respond quickly 💙

ℹ️ Learn more about Drips Wave

[laryhills]

@laryhills has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Hi, I'd like to apply for this issue! 🎨

About Me
I'm a frontend engineer with 6+ years of experience delivering pixel-perfect UI implementations. I've refined components to exact Figma specifications, built responsive layouts maintaining design fidelity, and created reusable component systems. I specialize in design system consistency and cross-device responsiveness.

Plan

• Audit current profile page against Figma design: spacing, typography, colors, component hierarchy
• Refactor layout to match Figma exactly: padding, margins, gap values
• Update color palette to Figma values (background, text, accent colors)
• Improve typography: font sizes, weights, line heights per design
• Create reusable subcomponents: ProfileHeader, ProfileTabs, ProfileSection, FriendItem
• Implement responsive grid for friend list (mobile → tablet → desktop)
• Update avatar sizing and image handling
• Add visual hierarchy through proper spacing and contrast

Why Me
Strong expertise in pixel-perfect Figma implementation, design system tokens, and responsive layout patterns. Experienced auditing code against designs and identifying discrepancies. Understand importance of reusable components that maintain fidelity while being composable.

ETA
6-12hours

ℹ️ Repo Maintainers: To accept this application, review their application or assign @laryhills to this issue.