Confirmation Modals

[greatest0fallt1me]

Description

Design confirmation modals for destructive actions (delete API, withdraw funds, disconnect wallet) and important confirmations (publish API, approve transaction).

Requirements and Context

• Must be clear and prevent accidents
• Different styles for different action types
• Include cancel option
• Accessible

Detailed Design Specifications

Modal Types:

Destructive Actions (Delete, etc.):

• Warning icon (red/orange)
• Title: "Are you sure?"
• Message: Clear explanation of what will happen
• Actions:
  • "Cancel" (secondary, left)
  • "Delete" or action name (red/destructive, right)
• Visual: Red/orange accent

Important Confirmations (Publish, etc.):

• Info icon (blue)
• Title: Action name
• Message: What will happen
• Actions:
  • "Cancel" (secondary)
  • "Confirm" (primary)
• Visual: Blue accent

Transaction Confirmations:

• Transaction details displayed
• Amount, recipient, fees
• Actions:
  • "Cancel"
  • "Approve Transaction"
• Visual: Transaction preview card

Modal Structure:

• Overlay (semi-transparent)
• Centered modal card
• Icon + title + message
• Action buttons
• Close button (X, optional for destructive)

Accessibility:

• Focus trap
• ESC to cancel
• ARIA labels
• Screen reader announcements

User Flow

1. User triggers action (delete, publish, etc.)
2. Confirmation modal appears
3. User reads confirmation
4. User confirms or cancels
5. Modal closes, action proceeds or cancels

Design Deliverables

• All modal type mockups
• Modal component design
• Mobile modal design
• Interactive prototype
• Design specifications

Guidelines

• Clear confirmations
• Prevent accidents (destructive actions prominent)
• Accessible
• Consistent styling
• Timeframe: 96 hours
• Project details: #