@uptime.link/statuspage 1.1.0 → 1.3.0

package/dist_watch/index.html

@@ -12,6 +12,7 @@
 
     <!--Lets load standard fonts-->
     <link rel="preconnect" href="https://assetbroker.lossless.one/" crossorigin>
+    <link rel="preload" href="https://assetbroker.lossless.one/fonts/geist-sans/geistvf.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="stylesheet" href="https://assetbroker.lossless.one/fonts/fonts.css">
 
     <style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uptime.link/statuspage",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "private": false,
   "description": "A catalog of web components for the UptimeLink dashboard.",
   "main": "dist_ts_web/index.js",

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@uptime.link/statuspage',
-  version: '1.1.0',
+  version: '1.3.0',
   description: 'A catalog of web components for the UptimeLink dashboard.'
 }

package/ts_web/elements/upl-statuspage-assetsselector.ts

@@ -76,23 +76,24 @@ export class UplStatuspageAssetsselector extends DeesElement {
           flex: 1;
           min-width: 200px;
           padding: ${unsafeCSS(sharedStyles.spacing.xs)} ${unsafeCSS(sharedStyles.spacing.sm)};
-          border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+          border: 1px solid ${sharedStyles.colors.border.default};
           border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
-          background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
-          color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+          background: ${sharedStyles.colors.background.card};
+          color: ${sharedStyles.colors.text.primary};
           font-size: 13px;
           font-family: ${unsafeCSS(sharedStyles.fonts.base)};
-          transition: all 0.2s ease;
+          transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
           height: 32px;
         }
 
         .search-input:focus {
           outline: none;
-          border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+          border-color: ${sharedStyles.colors.text.primary};
+          box-shadow: 0 0 0 2px ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
         }
 
         .search-input::placeholder {
-          color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
+          color: ${sharedStyles.colors.text.muted};
         }
 
         .filter-button {
@@ -100,27 +101,28 @@ export class UplStatuspageAssetsselector extends DeesElement {
           align-items: center;
           justify-content: center;
           padding: ${unsafeCSS(sharedStyles.spacing.xs)} ${unsafeCSS(sharedStyles.spacing.sm)};
-          border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+          border: 1px solid ${sharedStyles.colors.border.default};
           border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
-          background: transparent;
-          color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
+          background: ${sharedStyles.colors.background.card};
+          color: ${sharedStyles.colors.text.secondary};
           cursor: pointer;
           font-size: 13px;
-          font-weight: 400;
+          font-weight: 500;
           font-family: ${unsafeCSS(sharedStyles.fonts.base)};
-          transition: all 0.2s ease;
+          transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
           height: 32px;
         }
 
         .filter-button:hover {
-          border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
-          color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+          border-color: ${sharedStyles.colors.border.muted};
+          color: ${sharedStyles.colors.text.primary};
+          box-shadow: ${unsafeCSS(sharedStyles.shadows.sm)};
         }
 
         .filter-button.active {
-          background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
-          color: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
-          border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+          background: ${sharedStyles.colors.text.primary};
+          color: ${sharedStyles.colors.background.primary};
+          border-color: ${sharedStyles.colors.text.primary};
         }
 
         .selected-services {
@@ -134,56 +136,99 @@ export class UplStatuspageAssetsselector extends DeesElement {
           display: inline-flex;
           align-items: center;
           gap: ${unsafeCSS(sharedStyles.spacing.xs)};
-          padding: ${unsafeCSS(sharedStyles.spacing.xs)} ${unsafeCSS(sharedStyles.spacing.md)};
-          background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
-          border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+          padding: 6px ${unsafeCSS(sharedStyles.spacing.md)};
+          background: ${sharedStyles.colors.background.card};
+          border: 1px solid ${sharedStyles.colors.border.default};
           border-radius: ${unsafeCSS(sharedStyles.borderRadius.full)};
           font-size: 13px;
-          transition: all 0.2s ease;
+          font-weight: 500;
+          transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
+          animation: pillFadeIn 0.3s ${unsafeCSS(sharedStyles.easings.default)} both;
+        }
+
+        .service-pill:nth-child(1) { animation-delay: 0ms; }
+        .service-pill:nth-child(2) { animation-delay: 30ms; }
+        .service-pill:nth-child(3) { animation-delay: 60ms; }
+        .service-pill:nth-child(4) { animation-delay: 90ms; }
+        .service-pill:nth-child(5) { animation-delay: 120ms; }
+
+        @keyframes pillFadeIn {
+          from {
+            opacity: 0;
+            transform: scale(0.9);
+          }
+          to {
+            opacity: 1;
+            transform: scale(1);
+          }
         }
 
         .service-pill:hover {
-          border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+          border-color: ${sharedStyles.colors.border.muted};
+          box-shadow: ${unsafeCSS(sharedStyles.shadows.sm)};
+          transform: translateY(-1px);
         }
 
         .service-pill .status-dot {
           width: 6px;
           height: 6px;
           border-radius: 50%;
+          flex-shrink: 0;
+        }
+
+        .service-pill .status-dot.operational {
+          box-shadow: 0 0 0 2px ${cssManager.bdTheme('rgba(34, 197, 94, 0.2)', 'rgba(34, 197, 94, 0.3)')};
         }
 
         .manage-button {
           display: inline-flex;
           align-items: center;
           gap: ${unsafeCSS(sharedStyles.spacing.xs)};
-          padding: ${unsafeCSS(sharedStyles.spacing.xs)} ${unsafeCSS(sharedStyles.spacing.md)};
-          background: transparent;
-          border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+          padding: 6px ${unsafeCSS(sharedStyles.spacing.md)};
+          background: ${sharedStyles.colors.background.card};
+          border: 1px solid ${sharedStyles.colors.border.default};
           border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
           font-size: 13px;
           font-weight: 500;
           cursor: pointer;
-          transition: all 0.2s ease;
-          color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
+          transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
+          color: ${sharedStyles.colors.text.secondary};
           font-family: ${unsafeCSS(sharedStyles.fonts.base)};
         }
 
         .manage-button:hover {
-          border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
-          color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+          border-color: ${sharedStyles.colors.border.muted};
+          color: ${sharedStyles.colors.text.primary};
+          box-shadow: ${unsafeCSS(sharedStyles.shadows.sm)};
+          transform: translateY(-1px);
+        }
+
+        .manage-button:active {
+          transform: translateY(0);
         }
 
         .expandable-section {
           margin-top: ${unsafeCSS(sharedStyles.spacing.lg)};
           overflow: hidden;
-          transition: all 0.3s ease;
+          animation: expandIn 0.3s ${unsafeCSS(sharedStyles.easings.default)};
+        }
+
+        @keyframes expandIn {
+          from {
+            opacity: 0;
+            transform: translateY(-8px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
         }
 
         .expandable-content {
           padding: ${unsafeCSS(sharedStyles.spacing.lg)};
-          background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
-          border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
-          border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
+          background: ${sharedStyles.colors.background.secondary};
+          border: 1px solid ${sharedStyles.colors.border.default};
+          border-radius: ${unsafeCSS(sharedStyles.borderRadius.lg)};
         }
 
         .assets-grid {
@@ -196,22 +241,40 @@ export class UplStatuspageAssetsselector extends DeesElement {
         .asset-card {
           display: flex;
           align-items: center;
-          padding: ${unsafeCSS(sharedStyles.spacing.sm)} ${unsafeCSS(sharedStyles.spacing.md)};
-          background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
+          padding: ${unsafeCSS(sharedStyles.spacing.md)};
+          background: ${sharedStyles.colors.background.card};
           border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
           cursor: pointer;
-          transition: all 0.2s ease;
-          border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+          transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
+          border: 1px solid ${sharedStyles.colors.border.default};
           gap: ${unsafeCSS(sharedStyles.spacing.sm)};
+          animation: cardFadeIn 0.3s ${unsafeCSS(sharedStyles.easings.default)} both;
+        }
+
+        @keyframes cardFadeIn {
+          from {
+            opacity: 0;
+            transform: translateY(8px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
         }
 
         .asset-card:hover {
-          border-color: ${cssManager.bdTheme('#d1d5db', '#3f3f46')};
+          border-color: ${sharedStyles.colors.border.muted};
+          box-shadow: ${unsafeCSS(sharedStyles.shadows.sm)};
+          transform: translateY(-2px);
         }
 
         .asset-card.selected {
-          border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
-          background: ${cssManager.bdTheme('#f9fafb', '#0f0f0f')};
+          border-color: ${sharedStyles.colors.text.primary};
+          background: ${sharedStyles.colors.background.secondary};
+        }
+
+        .asset-card.selected:hover {
+          box-shadow: ${unsafeCSS(sharedStyles.shadows.md)};
         }
 
         .asset-checkbox {
@@ -255,13 +318,24 @@ export class UplStatuspageAssetsselector extends DeesElement {
           width: 8px;
           height: 8px;
           border-radius: ${unsafeCSS(sharedStyles.borderRadius.full)};
+          flex-shrink: 0;
         }
 
-        .status-indicator.operational, .status-dot.operational { background: #22c55e; }
-        .status-indicator.degraded, .status-dot.degraded { background: #fbbf24; }
-        .status-indicator.partial_outage, .status-dot.partial_outage { background: #f87171; }
-        .status-indicator.major_outage, .status-dot.major_outage { background: #ef4444; }
-        .status-indicator.maintenance, .status-dot.maintenance { background: #60a5fa; }
+        .status-indicator.operational, .status-dot.operational {
+          background: ${sharedStyles.colors.status.operational};
+        }
+        .status-indicator.degraded, .status-dot.degraded {
+          background: ${sharedStyles.colors.status.degraded};
+        }
+        .status-indicator.partial_outage, .status-dot.partial_outage {
+          background: ${sharedStyles.colors.status.partial};
+        }
+        .status-indicator.major_outage, .status-dot.major_outage {
+          background: ${sharedStyles.colors.status.major};
+        }
+        .status-indicator.maintenance, .status-dot.maintenance {
+          background: ${sharedStyles.colors.status.maintenance};
+        }
 
         .status-text {
           font-size: 12px;

package/ts_web/elements/upl-statuspage-footer.ts

@@ -144,17 +144,33 @@ export class UplStatuspageFooter extends DeesElement {
       }
       
       .footer-link {
-        color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
+        color: ${sharedStyles.colors.text.secondary};
         text-decoration: none;
-        transition: color 0.15s ease;
+        transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
         font-size: 13px;
         font-weight: 400;
+        position: relative;
       }
-      
+
+      .footer-link::after {
+        content: '';
+        position: absolute;
+        bottom: -2px;
+        left: 0;
+        width: 0;
+        height: 1px;
+        background: ${sharedStyles.colors.text.primary};
+        transition: width ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
+      }
+
       .footer-link:hover {
         color: ${sharedStyles.colors.text.primary};
       }
 
+      .footer-link:hover::after {
+        width: 100%;
+      }
+
       .footer-actions {
         display: flex;
         flex-direction: column;
@@ -164,25 +180,33 @@ export class UplStatuspageFooter extends DeesElement {
       .action-button {
         padding: 8px 16px;
         height: 36px;
-        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
-        background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
-        border-radius: 6px;
+        border: 1px solid ${sharedStyles.colors.border.default};
+        background: ${sharedStyles.colors.background.card};
+        border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
         cursor: pointer;
         text-align: center;
-        transition: all 0.15s ease;
+        transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
         white-space: nowrap;
         font-size: 13px;
-        font-weight: 400;
+        font-weight: 500;
         color: ${sharedStyles.colors.text.primary};
         font-family: ${unsafeCSS(sharedStyles.fonts.base)};
         display: inline-flex;
         align-items: center;
         justify-content: center;
+        gap: 6px;
       }
-      
+
       .action-button:hover {
-        background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
-        border-color: ${cssManager.bdTheme('#d1d5db', '#3f3f46')};
+        background: ${sharedStyles.colors.background.secondary};
+        border-color: ${sharedStyles.colors.border.muted};
+        transform: translateY(-1px);
+        box-shadow: ${unsafeCSS(sharedStyles.shadows.sm)};
+      }
+
+      .action-button:active {
+        transform: translateY(0);
+        box-shadow: none;
       }
       
       .footer-bottom {
@@ -203,30 +227,43 @@ export class UplStatuspageFooter extends DeesElement {
 
       .social-links {
         display: flex;
-        gap: ${unsafeCSS(sharedStyles.spacing.md)};
+        gap: ${unsafeCSS(sharedStyles.spacing.sm)};
         align-items: center;
       }
-      
+
       .social-link {
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        width: 32px;
-        height: 32px;
-        border-radius: 6px;
-        transition: all 0.15s ease;
-        color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
+        width: 34px;
+        height: 34px;
+        border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
+        transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
+        color: ${sharedStyles.colors.text.muted};
+        border: 1px solid transparent;
       }
-      
+
       .social-link:hover {
         color: ${sharedStyles.colors.text.primary};
-        background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
+        background: ${sharedStyles.colors.background.secondary};
+        border-color: ${sharedStyles.colors.border.default};
+        transform: translateY(-2px);
+        box-shadow: ${unsafeCSS(sharedStyles.shadows.sm)};
       }
-      
+
+      .social-link:active {
+        transform: translateY(0);
+      }
+
       .social-link svg {
         width: 16px;
         height: 16px;
         fill: currentColor;
+        transition: transform ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
+      }
+
+      .social-link:hover svg {
+        transform: scale(1.1);
       }
       
       .copyright {
@@ -241,20 +278,37 @@ export class UplStatuspageFooter extends DeesElement {
       
       .powered-by {
         font-size: 12px;
-        color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
+        color: ${sharedStyles.colors.text.muted};
         text-align: right;
       }
-      
+
       .powered-by a {
-        color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
+        color: ${sharedStyles.colors.text.secondary};
         text-decoration: none;
-        transition: color 0.15s ease;
+        transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
+        font-weight: 500;
+        position: relative;
       }
-      
+
+      .powered-by a::after {
+        content: '';
+        position: absolute;
+        bottom: -1px;
+        left: 0;
+        width: 0;
+        height: 1px;
+        background: ${sharedStyles.colors.text.primary};
+        transition: width ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
+      }
+
       .powered-by a:hover {
         color: ${sharedStyles.colors.text.primary};
       }
 
+      .powered-by a:hover::after {
+        width: 100%;
+      }
+
       .status-update {
         padding: 12px 16px;
         background: ${cssManager.bdTheme('#f9fafb', '#18181b')};