CON-024 | My Addresses

Screen Overview

• Type: List screen accessible from Profile (no bottom navigation)
• Purpose: View, manage, and organize saved delivery addresses
• Navigation: Back to Profile; "+" adds new address; edit icon goes to CON-025; trash icon triggers delete confirmation

Layout Specifications

• Header: White with back button, "My Addresses" title, and "+" action button on right
• List items: Full-width cards with dividers, icon on left, content center, action buttons right
• Bottom navigation: None (sub-screen of Profile)

Component Specs

• Add button (+): 40x40px | No background | #043F2D icon | 24px icon size
• Address icon: 44x44px | #E9EFE7 background | 12px radius | Emoji icon 22px
• Label text: Alexandria 14px Bold | #111827
• Default badge: Pill shape | #DCFCE7 background | #166534 text | 10px Bold
• Address text: Alatsi 12px | #6B7280
• Delivery note: Alatsi 10px Italic | #9CA3AF
• Edit button: 36x36px | Pencil icon 18px | Hover: #F5F7F4 background
• Delete button: 36x36px | Trash icon 18px | Hover: #FEE2E2 background + red icon

Behavior Notes

• Default address is marked with green "Default" badge
• Long-press or swipe left could also reveal action buttons (future enhancement)
• Delete triggers a confirmation dialog: "Delete this address?"
• Tapping the card body (not action buttons) could set that address as the active delivery address
• "+" button navigates to address prompt/search flow

State Variations

• Populated: Shows list of saved addresses (default view)
• Empty: Location pin icon, "No saved addresses" heading, "Add Address" button

Accessibility

• All action buttons have aria-label descriptions
• Edit buttons are <a> elements for proper navigation
• Delete buttons are <button> elements triggering confirmation
• Default badge provides visual and textual indication of primary address