v1.3.1

changelog.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 2025-12-23 - 1.3.1 - fix(statuspage)
+update timeline connector and dot positioning in statuspage incidents component
+
+- Remove global .timeline::before vertical connector and replace with per-item .update-item:not(:last-child)::after to draw connectors between dots
+- Use sharedStyles.colors.border.default for the connector background instead of a theme gradient
+- Adjust connector and dot offsets for desktop and mobile to align with dot size and border, improving visual alignment
+- Add clarifying comments about dot dimensions and center calculations
+
+## 2025-12-23 - 1.3.0 - feat(statuspage)
+use dynamic status-based accent colors and computed card statuses; update stat card markup and incident/response displays
+
+- Replace hardcoded stat-card type selectors with status-based classes (.operational, .degraded, .partial_outage, .major_outage, .maintenance) so accent colors are applied centrally.
+- Introduce getUptimeCardStatus, getResponseCardStatus, and getIncidentCardStatus helper methods to compute and apply per-card status classes based on uptime, response time, and affected services.
+- Update stat card markup to use computed status classes instead of dedicated uptime/response/incident class names.
+- Change incident summary text to show 'All services ok.' when no services are affected, otherwise display 'X of Y services affected'.
+- Minor layout tweak: adjust timeline connector left offset from 5px to 7px for improved alignment.
+
 ## 2025-12-23 - 1.2.0 - feat(statuspage-ui)
 improve styling and animations across status page components
 

package.json

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

ts_web/00_commitinfo_data.ts

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

ts_web/elements/upl-statuspage-incidents.ts

@@ -351,21 +351,6 @@ export class UplStatuspageIncidents extends DeesElement {
         padding-left: 24px;
       }
 
-      /* Vertical connector line */
-      .timeline::before {
-        content: '';
-        position: absolute;
-        left: 5px;
-        top: 8px;
-        bottom: 8px;
-        width: 2px;
-        background: ${cssManager.bdTheme(
-          'linear-gradient(to bottom, #e5e7eb 0%, #d1d5db 50%, #e5e7eb 100%)',
-          'linear-gradient(to bottom, #27272a 0%, #3f3f46 50%, #27272a 100%)'
-        )};
-        border-radius: 1px;
-      }
-
       .update-item {
         position: relative;
         padding-left: ${unsafeCSS(sharedStyles.spacing.lg)};
@@ -377,6 +362,18 @@ export class UplStatuspageIncidents extends DeesElement {
         padding-bottom: 0;
       }
 
+      /* Vertical connector line from each dot to the next */
+      /* Dot: left -22px, width 12px + border 2px*2 = 16px total, center at -14px */
+      .update-item:not(:last-child)::after {
+        content: '';
+        position: absolute;
+        left: -15px;
+        top: 18px;
+        bottom: 0;
+        width: 2px;
+        background: ${sharedStyles.colors.border.default};
+      }
+
       /* Timeline dot */
       .update-item::before {
         content: '';
@@ -570,15 +567,17 @@ export class UplStatuspageIncidents extends DeesElement {
           padding-left: 20px;
         }
 
-        .timeline::before {
-          left: 4px;
-        }
-
         .update-item::before {
           left: -18px;
           width: 10px;
           height: 10px;
         }
+
+        /* Mobile dot: left -18px, width 10px + border 2px*2 = 14px, center at -11px */
+        .update-item:not(:last-child)::after {
+          left: -12px;
+          top: 16px;
+        }
       }
     `,
   ];

ts_web/elements/upl-statuspage-statsgrid.ts

@@ -114,38 +114,27 @@ export class UplStatuspageStatsgrid extends DeesElement {
         transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
       }
 
-      .stat-card.status-card::before {
+      /* Dynamic status-based accent colors for all stat cards */
+      .stat-card.operational::before {
         background: ${sharedStyles.colors.status.operational};
       }
 
-      .stat-card.status-card.degraded::before {
+      .stat-card.degraded::before {
         background: ${sharedStyles.colors.status.degraded};
       }
 
-      .stat-card.status-card.partial_outage::before {
+      .stat-card.partial_outage::before {
         background: ${sharedStyles.colors.status.partial};
       }
 
-      .stat-card.status-card.major_outage::before {
+      .stat-card.major_outage::before {
         background: ${sharedStyles.colors.status.major};
       }
 
-      .stat-card.status-card.maintenance::before {
+      .stat-card.maintenance::before {
         background: ${sharedStyles.colors.status.maintenance};
       }
 
-      .stat-card.uptime-card::before {
-        background: ${sharedStyles.colors.status.operational};
-      }
-
-      .stat-card.response-card::before {
-        background: ${sharedStyles.colors.status.maintenance};
-      }
-
-      .stat-card.incident-card::before {
-        background: ${sharedStyles.colors.status.partial};
-      }
-
       .stat-card:hover {
         border-color: ${sharedStyles.colors.border.muted};
         box-shadow: ${unsafeCSS(sharedStyles.shadows.md)};
@@ -391,7 +380,7 @@ export class UplStatuspageStatsgrid extends DeesElement {
           </div>
         ` : html`
           <div class="stats-grid">
-            <div class="stat-card status-card ${this.currentStatus}">
+            <div class="stat-card ${this.currentStatus}">
               <div class="stat-label">
                 <span class="status-indicator ${this.currentStatus}"></span>
                 Current Status
@@ -401,7 +390,7 @@ export class UplStatuspageStatsgrid extends DeesElement {
               </div>
             </div>
 
-            <div class="stat-card uptime-card">
+            <div class="stat-card ${this.getUptimeCardStatus()}">
               <div class="stat-label">
                 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                   <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
@@ -416,7 +405,7 @@ export class UplStatuspageStatsgrid extends DeesElement {
               </div>
             </div>
 
-            <div class="stat-card response-card">
+            <div class="stat-card ${this.getResponseCardStatus()}">
               <div class="stat-label">
                 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                   <circle cx="12" cy="12" r="10"></circle>
@@ -430,7 +419,7 @@ export class UplStatuspageStatsgrid extends DeesElement {
               ${this.renderResponseChange()}
             </div>
 
-            <div class="stat-card incident-card">
+            <div class="stat-card ${this.getIncidentCardStatus()}">
               <div class="stat-label">
                 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                   <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
@@ -442,8 +431,8 @@ export class UplStatuspageStatsgrid extends DeesElement {
               <div class="stat-value">
                 ${this.totalIncidents}
               </div>
-              <div class="stat-change neutral">
-                ${this.affectedServices} of ${this.totalServices} services
+              <div class="stat-change ${this.affectedServices === 0 ? 'positive' : 'negative'}">
+                ${this.affectedServices === 0 ? 'All services ok.' : `${this.affectedServices} of ${this.totalServices} services affected`}
               </div>
             </div>
           </div>
@@ -467,7 +456,7 @@ export class UplStatuspageStatsgrid extends DeesElement {
     // This could be enhanced with actual trend data
     const trend = this.avgResponseTime < 200 ? 'positive' : this.avgResponseTime > 500 ? 'negative' : 'neutral';
     const icon = trend === 'positive' ? '↓' : trend === 'negative' ? '↑' : '→';
-    
+
     return html`
       <div class="stat-change ${trend}">
         <span>${icon}</span>
@@ -475,4 +464,23 @@ export class UplStatuspageStatsgrid extends DeesElement {
       </div>
     `;
   }
+
+  private getUptimeCardStatus(): string {
+    if (this.uptime >= 99.9) return 'operational';
+    if (this.uptime >= 99.0) return 'degraded';
+    return 'partial_outage';
+  }
+
+  private getResponseCardStatus(): string {
+    if (this.avgResponseTime < 200) return 'operational';
+    if (this.avgResponseTime < 500) return 'degraded';
+    return 'partial_outage';
+  }
+
+  private getIncidentCardStatus(): string {
+    if (this.affectedServices === 0) return 'operational';
+    if (this.currentStatus === 'major_outage') return 'major_outage';
+    if (this.currentStatus === 'partial_outage') return 'partial_outage';
+    return 'degraded';
+  }
 }