ui(dashboard): add animation to Incidents icon and reorder sidebar (#4622)

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: [email protected] <[email protected]>

Author: devin-ai-integration[bot]

packages/fern-dashboard/src/app/[orgName]/(homepage)/@navbar/default.tsx

@@ -35,11 +35,11 @@ export default async function Navbar({ params }: Readonly<{ params: Promise<{ or
                 <FeatureFlaggedServerSide flag={PosthogFeatureFlag.ENABLE_SDKS_PAGE} orgName={orgName}>
                     <NavbarItem title="SDKs" iconType="sdks" href="/sdks" />
                 </FeatureFlaggedServerSide>
+                <NavbarSectionTitle title="Settings" />
+                <NavbarItem title="Members" iconType="members" href="/members" />
                 <FeatureFlaggedServerSide flag={PosthogFeatureFlag.ENABLE_INCIDENTS_PAGE} orgName={orgName}>
                     <NavbarItem title="Incidents" iconType="incidents" href="/incidents" />
                 </FeatureFlaggedServerSide>
-                <NavbarSectionTitle title="Settings" />
-                <NavbarItem title="Members" iconType="members" href="/members" />
                 <FeatureFlaggedServerSide flag={PosthogFeatureFlag.ENABLE_API_KEYS_PAGE} orgName={orgName}>
                     <NavbarItem title="API Keys" mobileTitle="Keys" iconType="api-keys" href="/api-keys" />
                 </FeatureFlaggedServerSide>

packages/fern-dashboard/src/app/globals.css

@@ -717,6 +717,19 @@ why? who knows. thanks monaco:)
   }
 }
 
+/* Icon animations: Incidents */
+.group:hover .alert,
+.hover-animating .alert {
+  animation: alert-shake-x 0.5s ease-in-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .group:hover .alert,
+  .hover-animating .alert {
+    animation: none;
+  }
+}
+
 /* PR Title scroll animation */
 @keyframes scroll-text {
   0% {

packages/fern-dashboard/src/styles/_keyframe-animations.scss

@@ -89,3 +89,15 @@
     transform: rotate(360deg);
   }
 }
+
+@keyframes alert-shake-x {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  10%, 30%, 50%, 70%, 90% {
+    transform: translateX(-2px);
+  }
+  20%, 40%, 60%, 80% {
+    transform: translateX(2px);
+  }
+}