[Donation Form] Migrate to TailwindCSS + shadcn/ui

[thaninbew]

Overview

The form is structured as a parent DonationForm with four child components responsible for each step in the flow.
Migrate the donation form from legacy CSS to tailwind CSS + shadcn/ui components. This ticket focuses on refactoring Step 1 (Amount) and Step 3 (Confirm) components to use shadcn/ui components and Tailwind utilities to match the design on Figma.

• Note: This is only for Step 1 and 3. Step 2 (Details) and Step 4 (Receipt) are handled in other tickets.

---

Tasks

• Pull latest
• Run yarn install in the workspace root to ensure Tailwind CSS and shadcn/ui are available (dependencies already installed)

Refactor Step1Amount Component

• Replace CSS classes with Tailwind utilities
• Replace existing components with appropriate shadcn/ui components, making tweaks to match the design
• Example: Convert preset amount buttons ($25, $50, $100, etc.) to shadcn Button components.
• For complex components like GrowingGoal, we can leave it as-is. It'd be inefficient to refactor due to the heavy math.

3. Refactor Step3Confirm Component

• Replace CSS classes with Tailwind utilities
• Example: Use shadcn Card component (or anything more fitting) for the summary display
• Render donation details in a clean, readable format:
  • Date
  • Donor name
  • Email address
    --
  • Anonymity status
  • Donation type (one-time vs recurring)
  • Amount (bolded like design)
• Different from design on Figma: Don't display card details (card number, payment method) in this step
  • These are handled by Stripe's CardElement in Step 2 and are not accessible to your component
• Remove imports of donations.css

---

Acceptance Criteria

• Step 1 component uses Tailwind + shadcn components, no legacy CSS imports (with exceptions)
• Step 3 component uses Tailwind + shadcn components, no legacy CSS imports (with exceptions)
• All form controls maintain existing functionality (validation, state management, error display)
• UI similar to Figma design as possible
• Step 1 preset amount selection updates form state correctly
• Step 1 recurrence selection (one-time vs recurring intervals) works as expected
• Step 1 donation type and dedication kind toggles function correctly (i.e. reveals form for dedication message)
• Step 3 summary displays donation details only (no card/payment method info)
• Verify error states appear when validation fails
• Verify disabled state during form submission
• Ensure all components are responsive and readable on mobile/tablet/desktop (check with device toolbar, let me know if you need help locating this)
• No console errors or TypeScript type mismatches
• Linting run passes

---

Notes

• shadcn/ui setup: Use yarn shadcn-ui add
• Refer to shadcn docs to find appropriate components, if you are unfamiliar, reading up on tailwind/shadcn is part of this ticket! Please feel free to also reach out to me.
• Once you've made a reusable component, push asap, and notify others in slack so people can copy the component).

References

view on Figma "Donation Page Hi-Fi"