@uptime.link/statuspage 1.1.0 → 1.2.0

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

@@ -40,15 +40,21 @@ export class UplStatuspageHeader extends DeesElement {
     css`
       :host {
         display: block;
-        background: ${sharedStyles.colors.background.primary};
+        background: ${cssManager.bdTheme(
+          'rgba(255, 255, 255, 0.85)',
+          'rgba(9, 9, 11, 0.85)'
+        )};
         font-family: ${unsafeCSS(sharedStyles.fonts.base)};
         color: ${sharedStyles.colors.text.primary};
-        border-bottom: 1px solid ${sharedStyles.colors.border.default};
+        border-bottom: 1px solid ${cssManager.bdTheme(
+          'rgba(0, 0, 0, 0.06)',
+          'rgba(255, 255, 255, 0.06)'
+        )};
         position: sticky;
         top: 0;
         z-index: 40;
-        backdrop-filter: blur(12px);
-        -webkit-backdrop-filter: blur(12px);
+        backdrop-filter: blur(16px) saturate(180%);
+        -webkit-backdrop-filter: blur(16px) saturate(180%);
       }
 
       .header-container {
@@ -67,7 +73,7 @@ export class UplStatuspageHeader extends DeesElement {
       .header-left {
         display: flex;
         align-items: center;
-        gap: ${unsafeCSS(sharedStyles.spacing.lg)};
+        gap: ${unsafeCSS(sharedStyles.spacing.md)};
       }
 
       .header-actions {
@@ -84,26 +90,47 @@ export class UplStatuspageHeader extends DeesElement {
         border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
         cursor: pointer;
         user-select: none;
-        transition: all ${unsafeCSS(sharedStyles.durations.normal)} ${unsafeCSS(sharedStyles.easings.default)};
+        transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
         display: inline-flex;
         align-items: center;
         justify-content: center;
+        gap: 6px;
         height: 36px;
         background: transparent;
         border: 1px solid ${sharedStyles.colors.border.default};
         color: ${sharedStyles.colors.text.primary};
         letter-spacing: -0.01em;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .actionButton::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: ${cssManager.bdTheme(
+          'linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, transparent 100%)',
+          'linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%)'
+        )};
+        opacity: 0;
+        transition: opacity ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
       }
 
       .actionButton:hover {
         background: ${sharedStyles.colors.background.secondary};
         border-color: ${sharedStyles.colors.border.muted};
-        box-shadow: ${unsafeCSS(sharedStyles.shadows.xs)};
+        box-shadow: ${unsafeCSS(sharedStyles.shadows.sm)};
+        transform: translateY(-1px);
+      }
+
+      .actionButton:hover::before {
+        opacity: 1;
       }
 
       .actionButton:active {
-        transform: scale(0.98);
+        transform: translateY(0) scale(0.98);
         transition-duration: ${unsafeCSS(sharedStyles.durations.fast)};
+        box-shadow: none;
       }
 
       .actionButton:focus-visible {
@@ -111,22 +138,40 @@ export class UplStatuspageHeader extends DeesElement {
         outline-offset: 2px;
       }
 
+      /* Button icon styles */
+      .actionButton svg {
+        width: 14px;
+        height: 14px;
+        flex-shrink: 0;
+        transition: transform ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
+      }
+
+      .actionButton:hover svg {
+        transform: scale(1.1);
+      }
+
       .site-title {
-        font-size: 18px;
+        font-size: 17px;
         font-weight: 600;
         letter-spacing: -0.02em;
         color: ${sharedStyles.colors.text.primary};
+        transition: color ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
+      }
+
+      .site-title:hover {
+        color: ${sharedStyles.colors.text.secondary};
       }
 
       .logo {
         height: 28px;
         width: auto;
         filter: ${cssManager.bdTheme('none', 'brightness(0) invert(1)')};
-        transition: opacity ${unsafeCSS(sharedStyles.durations.normal)} ${unsafeCSS(sharedStyles.easings.default)};
+        transition: all ${unsafeCSS(sharedStyles.durations.normal)} ${unsafeCSS(sharedStyles.easings.default)};
       }
 
       .logo:hover {
         opacity: 0.8;
+        transform: scale(1.02);
       }
 
       .page-info {
@@ -154,11 +199,16 @@ export class UplStatuspageHeader extends DeesElement {
         background: ${sharedStyles.colors.accent.primary};
         color: ${sharedStyles.colors.background.primary};
         border-color: transparent;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+      }
+
+      .actionButton.primary::before {
+        background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%);
       }
 
       .actionButton.primary:hover {
         background: ${sharedStyles.colors.accent.hover};
-        box-shadow: ${unsafeCSS(sharedStyles.shadows.sm)};
+        box-shadow: ${unsafeCSS(sharedStyles.shadows.md)};
       }
 
       .loading-skeleton {
@@ -177,10 +227,10 @@ export class UplStatuspageHeader extends DeesElement {
           'linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.04) 50%, transparent 100%)',
           'linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%)'
         )};
-        animation: loading 1.5s ${unsafeCSS(sharedStyles.easings.default)} infinite;
+        animation: shimmer 1.5s ${unsafeCSS(sharedStyles.easings.default)} infinite;
       }
 
-      @keyframes loading {
+      @keyframes shimmer {
         0% { transform: translateX(-100%); }
         100% { transform: translateX(200%); }
       }
@@ -195,11 +245,11 @@ export class UplStatuspageHeader extends DeesElement {
         }
 
         .header-left {
-          gap: ${unsafeCSS(sharedStyles.spacing.md)};
+          gap: ${unsafeCSS(sharedStyles.spacing.sm)};
         }
 
         .site-title {
-          font-size: 16px;
+          font-size: 15px;
         }
 
         .logo {
@@ -210,8 +260,18 @@ export class UplStatuspageHeader extends DeesElement {
       @media (max-width: 640px) {
         .actionButton {
           font-size: 12px;
-          padding: 0 12px;
+          padding: 0 10px;
           height: 32px;
+          gap: 4px;
+        }
+
+        .actionButton svg {
+          width: 12px;
+          height: 12px;
+        }
+
+        .actionButton .button-text {
+          display: none;
         }
 
         .page-title {
@@ -249,12 +309,21 @@ export class UplStatuspageHeader extends DeesElement {
             <div class="header-actions">
               ${this.showReportButton ? html`
                 <button class="actionButton" @click=${this.dispatchReportNewIncident}>
-                  Report Issue
+                  <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="M7.86 2h8.28L22 7.86v8.28L16.14 22H7.86L2 16.14V7.86L7.86 2z"></path>
+                    <line x1="12" y1="8" x2="12" y2="12"></line>
+                    <line x1="12" y1="16" x2="12.01" y2="16"></line>
+                  </svg>
+                  <span class="button-text">Report Issue</span>
                 </button>
               ` : ''}
               ${this.showSubscribeButton ? html`
                 <button class="actionButton primary" @click=${this.dispatchStatusSubscribe}>
-                  Subscribe
+                  <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="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"></path>
+                    <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"></path>
+                  </svg>
+                  <span class="button-text">Subscribe</span>
                 </button>
               ` : ''}
             </div>