From d6278d0716d0bcdee6af43e4e616444d37f7a748 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Fri, 31 Oct 2025 20:11:20 +0000
Subject: [PATCH 1/3] ui(dashboard): update incidents icon animation to draw
 exclamation from top to bottom

Co-Authored-By: Kapil Gowru <k.gowru@gmail.com>
---
 packages/fern-dashboard/src/app/globals.css   | 17 ++++++++----
 .../components/navbar/AlertIconAnimated.tsx   | 20 ++++++++++++--
 .../src/styles/_keyframe-animations.scss      | 27 +++++++++++++++++++
 3 files changed, 57 insertions(+), 7 deletions(-)

diff --git a/packages/fern-dashboard/src/app/globals.css b/packages/fern-dashboard/src/app/globals.css
index be9606b596..6522aa5076 100644
--- a/packages/fern-dashboard/src/app/globals.css
+++ b/packages/fern-dashboard/src/app/globals.css
@@ -721,14 +721,21 @@ why? who knows. thanks monaco:)
 }
 
 /* Icon animations: Incidents */
-.group:hover .alert,
-.hover-animating .alert {
-  animation: alert-shake-x 0.5s ease-in-out;
+.group:hover .alert-line,
+.hover-animating .alert-line {
+  animation: alert-draw-line 0.8s ease-out;
+}
+
+.group:hover .alert-dot,
+.hover-animating .alert-dot {
+  animation: alert-show-dot 0.8s ease-out;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .group:hover .alert,
-  .hover-animating .alert {
+  .group:hover .alert-line,
+  .hover-animating .alert-line,
+  .group:hover .alert-dot,
+  .hover-animating .alert-dot {
     animation: none;
   }
 }
diff --git a/packages/fern-dashboard/src/components/navbar/AlertIconAnimated.tsx b/packages/fern-dashboard/src/components/navbar/AlertIconAnimated.tsx
index 6683735020..6355d871af 100644
--- a/packages/fern-dashboard/src/components/navbar/AlertIconAnimated.tsx
+++ b/packages/fern-dashboard/src/components/navbar/AlertIconAnimated.tsx
@@ -21,12 +21,28 @@ export function AlertIconAnimated({ className, strokeColor = "var(--green-1100)"
             aria-hidden="true"
         >
             <path
-                d="M10 6.25V10.625M10 13.75H10.0083M8.6025 2.91583L1.79083 14.375C1.34833 15.1417 1.90333 16.125 2.81333 16.125H17.1867C18.0967 16.125 18.6517 15.1417 18.2092 14.375L11.3975 2.91583C10.955 2.14917 9.845 2.14917 9.4025 2.91583H8.6025Z"
+                d="M8.6025 2.91583L1.79083 14.375C1.34833 15.1417 1.90333 16.125 2.81333 16.125H17.1867C18.0967 16.125 18.6517 15.1417 18.2092 14.375L11.3975 2.91583C10.955 2.14917 9.845 2.14917 9.4025 2.91583H8.6025Z"
                 stroke={strokeColor}
                 strokeWidth="1.5"
                 strokeLinecap="round"
                 strokeLinejoin="round"
-                className="transition-stroke-color transition"
+                className="alert-triangle transition-stroke-color transition"
+            />
+            <path
+                d="M10 6.25V10.625"
+                stroke={strokeColor}
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="alert-line transition-stroke-color transition"
+            />
+            <path
+                d="M10 13.75H10.0083"
+                stroke={strokeColor}
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="alert-dot transition-stroke-color transition"
             />
         </svg>
     );
diff --git a/packages/fern-dashboard/src/styles/_keyframe-animations.scss b/packages/fern-dashboard/src/styles/_keyframe-animations.scss
index a7bd6e46a0..4dedabb12f 100644
--- a/packages/fern-dashboard/src/styles/_keyframe-animations.scss
+++ b/packages/fern-dashboard/src/styles/_keyframe-animations.scss
@@ -101,3 +101,30 @@
     transform: translateX(2px);
   }
 }
+
+@keyframes alert-draw-line {
+  0% {
+    stroke-dasharray: 4.375;
+    stroke-dashoffset: 4.375;
+  }
+  60% {
+    stroke-dasharray: 4.375;
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dasharray: 4.375;
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes alert-show-dot {
+  0% {
+    opacity: 0;
+  }
+  60% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

From 4e8af09854e8b4cf4e7cd796217dad484efc46e0 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Sat, 1 Nov 2025 16:49:55 +0000
Subject: [PATCH 2/3] ui(dashboard): speed up incidents icon animation to 0.5s

Co-Authored-By: Kapil Gowru <k.gowru@gmail.com>
---
 packages/fern-dashboard/src/app/globals.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/fern-dashboard/src/app/globals.css b/packages/fern-dashboard/src/app/globals.css
index 6522aa5076..5f4d5b57df 100644
--- a/packages/fern-dashboard/src/app/globals.css
+++ b/packages/fern-dashboard/src/app/globals.css
@@ -723,12 +723,12 @@ why? who knows. thanks monaco:)
 /* Icon animations: Incidents */
 .group:hover .alert-line,
 .hover-animating .alert-line {
-  animation: alert-draw-line 0.8s ease-out;
+  animation: alert-draw-line 0.5s ease-out;
 }
 
 .group:hover .alert-dot,
 .hover-animating .alert-dot {
-  animation: alert-show-dot 0.8s ease-out;
+  animation: alert-show-dot 0.5s ease-out;
 }
 
 @media (prefers-reduced-motion: reduce) {

From 61790d37108cdbe3d66f6425fdb2642ebc2aadf8 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 4 Nov 2025 16:06:52 +0000
Subject: [PATCH 3/3] ui(dashboard): speed up incidents icon animation to 0.3s

Co-Authored-By: Kapil Gowru <k.gowru@gmail.com>
---
 packages/fern-dashboard/src/app/globals.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/fern-dashboard/src/app/globals.css b/packages/fern-dashboard/src/app/globals.css
index 5f4d5b57df..308eb21e25 100644
--- a/packages/fern-dashboard/src/app/globals.css
+++ b/packages/fern-dashboard/src/app/globals.css
@@ -723,12 +723,12 @@ why? who knows. thanks monaco:)
 /* Icon animations: Incidents */
 .group:hover .alert-line,
 .hover-animating .alert-line {
-  animation: alert-draw-line 0.5s ease-out;
+  animation: alert-draw-line 0.3s ease-out;
 }
 
 .group:hover .alert-dot,
 .hover-animating .alert-dot {
-  animation: alert-show-dot 0.5s ease-out;
+  animation: alert-show-dot 0.3s ease-out;
 }
 
 @media (prefers-reduced-motion: reduce) {