gumroad icon indicating copy to clipboard operation
gumroad copied to clipboard

feat: migrate `_alert.scss` to tailwind

Open sm17p opened this issue 3 weeks ago • 1 comments

Part of

  • #1055

In this PR, we migrate the usage of alert.scss file in design.scss to tailwind based component.

Since there were a lot of the components, I've only attached before and after shots of the tricky ones and base variants. Please let me know if you need before/after shots of any to help with the review

LMK if you need

Changes

  1. Created Alert + AlertIcon component with tailwind based styling for six variants namely

    • default (gray)
    • success (green)
    • warning (yellow)
    • danger (red)
    • info (blue)
    • pink (New addition with three usages across codebase)
  2. Alert supports automatic icon rendering using variants + custom icon usage via AlertIcon

  3. Updated ToastAlert (server-components/Alert.tsx) to use the new Alert component while preserving toast behavior

  4. [Bug-Fix] Raised ToastAlert z-index to 100, allowing it to appear above Sheets/Modals

Before/After

In all of the comparision videos/image, the tailwind one is below the exisiting scss based Alert

Alert Variants Responsive Showcase (5 existing types - Default/Danger/Info/Success/Warning)

Light Dark

ToastAlert

Responsive Showcase (Light + Dark)

https://github.com/user-attachments/assets/2b85a3b6-4f22-446a-a19b-07242b7dc901

Bug fix

Increase z-index to make ToastAlert appear above sheet/modals

Before After

Responsive Showcase of Non-Trivial Migrations

https://github.com/user-attachments/assets/db095661-4c20-4d42-8e40-ec3c7e6994f4

https://github.com/user-attachments/assets/66449abe-c1e7-42ac-8a96-43a28bdb4508

https://github.com/user-attachments/assets/ebfdaf6c-21f0-4a5e-891a-1b9e2767fcd9

https://github.com/user-attachments/assets/90bee046-e905-4184-bc00-d34d08bf46a7

https://github.com/user-attachments/assets/39b202ea-9489-4065-a645-8d8936651f5c

https://github.com/user-attachments/assets/3c84b546-41d9-4d77-8271-147b4d4cc65f

Alert-asChild-Bef:Aft

AI Usage

  • Cursor with Claude Opus 4.5 to gather usagae of alerts in codebase and creating first draft of ui/Alert.tsx component
  • Cursor auto mode to repeat my usage patterns on simple migrations

Live Stream Disclosure

  • Have attended all four live streams

sm17p avatar Dec 01 '25 19:12 sm17p

@binary-koan @MayaRainer Please have a look as it's ready for review

sm17p avatar Dec 01 '25 21:12 sm17p