Screen Annotations — CON-101 Personal Details
Screen ID: CON-101
Flow: Profile → Personal Details
Previous: CON-100 Profile Main
Next: CON-102 Saved Addresses
Header: White header with back button, "Personal Details" title, and "Save" text action on the right.
Avatar Section: Large circular avatar (88px) displaying user initials "SJ" on the brand primary green background. Below is a "Change Photo" link that opens the device camera/gallery picker.
Form Fields: Four input fields pre-filled with user data: First Name ("Sarah"), Last Name ("Johnson"), Email ("sarah@example.com"), and Mobile Number ("+27 81 234 5678"). The mobile field is read-only with a grey background and a green "Verified" badge with checkmark icon on the right.
Mobile Number: Non-editable because it is the primary authentication method (phone + OTP). Changing the number requires a separate verification flow. Shows "Verified" status badge.
Save Changes: Full-width lime accent button at the bottom. Also accessible via "Save" in the header. Validates fields and saves changes to the user profile via API.
No Bottom Navigation: This is an editing sub-screen of Profile, so bottom nav is hidden. User navigates back via back button.