Screen Annotations — CON-100 Profile
Screen ID: CON-100
Flow: Bottom Nav → Profile
Previous: Any screen (via bottom nav)
Next: My Orders (CON-080), My Addresses (CON-024), etc.
Profile Header: Dark green (#043F2D) area with large avatar circle (80px) showing user initials "SJ" on lime accent background. Displays full name "Sarah Johnson", phone number "+27 81 234 5678", and an "Edit Profile" link styled as an outlined pill button in lime/accent color.
Menu Items: White background list using custom profile-list-item components (based on .list-item pattern). Each item has an emoji icon in a rounded square container, title text, and a right chevron arrow. Items are:
• My Orders → navigates to CON-080 Order History
• My Addresses → navigates to CON-024 Address List
• Payment Methods → future screen
• Notification Preferences → future screen
• Help & Support → future screen
• Terms & Privacy → future screen
• About Fresh Food Market → future screen
Divider: 8px thick background-colored divider separates the main menu from the Log Out action, creating visual separation.
Log Out: Red-colored text with door emoji icon on an error-light background. No right arrow since this is a destructive action. Tapping should show a confirmation dialog before logging out.
App Version: Centered "v1.0.0" text at the bottom in muted color. Useful for debugging and support inquiries.
Bottom Navigation: 4 tabs — Home, Discover, My Shop, Profile (active). Active tab set by data-active-nav="profile" on body.
Status Bar: Uses the default dark status bar (white text on primary green background) to match the profile header. This is different from inner screens which use status-bar--light.