ui(dashboard): update incidents icon animation to draw exclamation from top to bottom

[devin-ai-integration]

Update incidents icon animation to draw exclamation from top to bottom

Replaced the shake animation on the incidents icon with a sequential draw animation that draws the exclamation line from top to bottom using stroke-dasharray/stroke-dashoffset, then shows the dot.

What was the motivation & context behind this PR?

User requested in Slack to change the incidents icon animation from shaking on hover to drawing the exclamation mark sequentially (line from top to bottom, then dot).

Slack thread: https://buildwithfern.slack.com/archives/C09NRQ471UK/p1761941230058009?thread_ts=1761941230.058009

How has this PR been tested?

⚠️ Not visually tested - the animation was not tested by hovering over the actual incidents icon because it requires authentication to access the dashboard navigation. Code changes were made and CI passes, but manual visual verification is needed.

Review checklist

Critical items to verify:

1. Animation appearance: Hover over the incidents icon in the dashboard navigation and verify the line draws smoothly from top to bottom, followed by the dot appearing
2. Stroke-dasharray accuracy ⚠️: The hardcoded value of 4.375 may not match the actual SVG path length - watch for any gaps or incomplete drawing of the exclamation line
3. Timing: The 60% split (line completes at 60%, dot shows after) might need adjustment if it doesn't feel natural
4. No visual regressions: Verify the icon looks identical when not animating (splitting the SVG path into 3 separate paths could cause subtle differences)
5. Duration: The 0.5s duration (requested to be sped up from original 0.8s) should feel snappy but not rushed
6. Dark mode: Test in both light and dark themes
7. Accessibility: Verify prefers-reduced-motion properly disables the animation

Technical changes:

• Split AlertIconAnimated SVG from one path to three (triangle, line, dot) to enable independent animation
• Added alert-draw-line and alert-show-dot keyframe animations
• Updated CSS selectors from .alert to .alert-line and .alert-dot

---

Link to Devin run: https://app.devin.ai/sessions/59f25a7775e048cbad54c2a0d05cbba7
Requested by: Kapil Gowru ([email protected]) (@kgowru)

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
dev.ferndocs.com	Ready	Preview	Nov 3, 2025 6:34pm
fern-dashboard	Ready	Preview	Nov 3, 2025 6:34pm
fern-dashboard-dev	Ready	Preview	Nov 3, 2025 6:34pm
ferndocs.com	Ready	Preview	Nov 3, 2025 6:34pm
preview.ferndocs.com	Ready	Preview	Nov 3, 2025 6:34pm
prod-assets.ferndocs.com	Ready	Preview	Nov 3, 2025 6:34pm
prod.ferndocs.com	Ready	Preview	Nov 3, 2025 6:34pm

1 Skipped Deployment

Project	Deployment	Preview	Updated (UTC)
fern-platform	Ignored		Nov 3, 2025 6:34pm