feat(statuspage-ui): improve styling and animations across status page components

ts_web/styles/shared.styles.ts

@@ -84,15 +84,61 @@ export const easings = {
   default: 'cubic-bezier(0.4, 0, 0.2, 1)',
   smooth: 'cubic-bezier(0.4, 0, 0.6, 1)',
   bounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
-  snappy: 'cubic-bezier(0.2, 0, 0, 1)'
+  snappy: 'cubic-bezier(0.2, 0, 0, 1)',
+  spring: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
 };
 
 // Durations
 export const durations = {
+  instant: '50ms',
   fast: '100ms',
   normal: '200ms',
   slow: '300ms',
-  slower: '500ms'
+  slower: '500ms',
+  slowest: '800ms'
+};
+
+// Status gradients for backgrounds
+export const statusGradients = {
+  operational: cssManager.bdTheme(
+    'linear-gradient(135deg, rgba(22, 163, 74, 0.08) 0%, rgba(22, 163, 74, 0.02) 100%)',
+    'linear-gradient(135deg, rgba(34, 197, 94, 0.12) 0%, rgba(34, 197, 94, 0.03) 100%)'
+  ),
+  degraded: cssManager.bdTheme(
+    'linear-gradient(135deg, rgba(217, 119, 6, 0.08) 0%, rgba(217, 119, 6, 0.02) 100%)',
+    'linear-gradient(135deg, rgba(251, 191, 36, 0.12) 0%, rgba(251, 191, 36, 0.03) 100%)'
+  ),
+  partial: cssManager.bdTheme(
+    'linear-gradient(135deg, rgba(220, 38, 38, 0.08) 0%, rgba(220, 38, 38, 0.02) 100%)',
+    'linear-gradient(135deg, rgba(248, 113, 113, 0.12) 0%, rgba(248, 113, 113, 0.03) 100%)'
+  ),
+  major: cssManager.bdTheme(
+    'linear-gradient(135deg, rgba(185, 28, 28, 0.10) 0%, rgba(185, 28, 28, 0.03) 100%)',
+    'linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.04) 100%)'
+  ),
+  maintenance: cssManager.bdTheme(
+    'linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(37, 99, 235, 0.02) 100%)',
+    'linear-gradient(135deg, rgba(96, 165, 250, 0.12) 0%, rgba(96, 165, 250, 0.03) 100%)'
+  )
+};
+
+// Glassmorphism styles
+export const glass = {
+  light: 'background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);',
+  dark: 'background: rgba(9, 9, 11, 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);',
+  subtle: cssManager.bdTheme(
+    'background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(8px);',
+    'background: rgba(9, 9, 11, 0.6); backdrop-filter: blur(8px);'
+  )
+};
+
+// Status glow shadows
+export const statusGlows = {
+  operational: '0 0 20px -5px rgba(34, 197, 94, 0.4)',
+  degraded: '0 0 20px -5px rgba(251, 191, 36, 0.4)',
+  partial: '0 0 20px -5px rgba(248, 113, 113, 0.4)',
+  major: '0 0 20px -5px rgba(239, 68, 68, 0.5)',
+  maintenance: '0 0 20px -5px rgba(96, 165, 250, 0.4)'
 };
 
 export const commonStyles = css`
@@ -212,6 +258,28 @@ export const commonStyles = css`
     50% { opacity: 0.5; }
   }
 
+  /* Pulse ring animation for active status */
+  @keyframes pulse-ring {
+    0% {
+      transform: scale(1);
+      opacity: 0.8;
+    }
+    100% {
+      transform: scale(2.5);
+      opacity: 0;
+    }
+  }
+
+  /* Shimmer effect for loading states */
+  @keyframes shimmer {
+    0% {
+      background-position: -200% 0;
+    }
+    100% {
+      background-position: 200% 0;
+    }
+  }
+
   /* Fade in animation */
   @keyframes fadeIn {
     from { opacity: 0; transform: translateY(4px); }
@@ -222,6 +290,22 @@ export const commonStyles = css`
     animation: fadeIn ${unsafeCSS(durations.slow)} ${unsafeCSS(easings.default)} forwards;
   }
 
+  /* Fade in up animation */
+  @keyframes fadeInUp {
+    from {
+      opacity: 0;
+      transform: translateY(16px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .fade-in-up {
+    animation: fadeInUp ${unsafeCSS(durations.slower)} ${unsafeCSS(easings.default)} forwards;
+  }
+
   /* Scale in animation */
   @keyframes scaleIn {
     from { opacity: 0; transform: scale(0.95); }
@@ -232,6 +316,86 @@ export const commonStyles = css`
     animation: scaleIn ${unsafeCSS(durations.slow)} ${unsafeCSS(easings.bounce)} forwards;
   }
 
+  /* Slide down animation for expanding content */
+  @keyframes slideDown {
+    from {
+      opacity: 0;
+      transform: translateY(-8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .slide-down {
+    animation: slideDown ${unsafeCSS(durations.slow)} ${unsafeCSS(easings.default)} forwards;
+  }
+
+  /* Stagger animation delay utilities */
+  .stagger-1 { animation-delay: 50ms; }
+  .stagger-2 { animation-delay: 100ms; }
+  .stagger-3 { animation-delay: 150ms; }
+  .stagger-4 { animation-delay: 200ms; }
+  .stagger-5 { animation-delay: 250ms; }
+
+  /* Status indicator with pulse ring */
+  .status-dot-animated {
+    position: relative;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+  }
+
+  .status-dot-animated::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    background: inherit;
+    animation: pulse-ring 2s ${unsafeCSS(easings.default)} infinite;
+  }
+
+  .status-dot-animated.operational::before {
+    background: ${colors.status.operational};
+  }
+
+  .status-dot-animated.degraded::before,
+  .status-dot-animated.partial_outage::before,
+  .status-dot-animated.major_outage::before {
+    animation: pulse-ring 1.5s ${unsafeCSS(easings.default)} infinite;
+  }
+
+  /* Hover lift effect */
+  .hover-lift {
+    transition: transform ${unsafeCSS(durations.normal)} ${unsafeCSS(easings.default)},
+                box-shadow ${unsafeCSS(durations.normal)} ${unsafeCSS(easings.default)};
+  }
+
+  .hover-lift:hover {
+    transform: translateY(-2px);
+  }
+
+  /* Icon animation */
+  .icon-spin {
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  /* Bounce animation for attention */
+  @keyframes bounce {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-4px); }
+  }
+
+  .bounce {
+    animation: bounce 1s ${unsafeCSS(easings.bounce)} infinite;
+  }
+
   /* Container styles */
   .container {
     max-width: 1200px;