feat: migrate `_alert.scss` to tailwind
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
-
Created
Alert+AlertIconcomponent 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)
-
Alertsupports automatic icon rendering using variants + custom icon usage viaAlertIcon -
Updated
ToastAlert(server-components/Alert.tsx) to use the newAlertcomponent while preserving toast behavior -
[Bug-Fix] Raised
ToastAlertz-index to 100, allowing it to appear aboveSheets/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
AI Usage
- Cursor with Claude Opus 4.5 to gather usagae of alerts in codebase and creating first draft of
ui/Alert.tsxcomponent - Cursor auto mode to repeat my usage patterns on simple migrations
Live Stream Disclosure
- Have attended all four live streams
@binary-koan @MayaRainer Please have a look as it's ready for review