diff --git a/ts_web/elements/upl-statuspage-header.ts b/ts_web/elements/upl-statuspage-header.ts index 266fbed..91b93a8 100644 --- a/ts_web/elements/upl-statuspage-header.ts +++ b/ts_web/elements/upl-statuspage-header.ts @@ -1,6 +1,6 @@ import { DeesElement, property, html, customElement, type TemplateResult, css, cssManager, unsafeCSS } from '@design.estate/dees-element'; import * as domtools from '@design.estate/dees-domtools'; -import { fonts } from '../styles/shared.styles.js'; +import { fonts, shadows } from '../styles/shared.styles.js'; import { demoFunc } from './upl-statuspage-header.demo.js'; declare global { @@ -46,10 +46,9 @@ export class UplStatuspageHeader extends DeesElement { css` :host { display: block; - background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')}; + background: transparent; font-family: ${unsafeCSS(fonts.base)}; color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')}; - border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#262626')}; } .mainbox { @@ -66,10 +65,11 @@ export class UplStatuspageHeader extends DeesElement { } .mainbox .actions .actionButton { - background: transparent; + background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.8)', 'rgba(0, 0, 0, 0.6)')}; + backdrop-filter: blur(10px); font-size: 14px; font-weight: 500; - border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#262626')}; + border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.08)')}; padding: 8px 16px; border-radius: 6px; cursor: pointer; @@ -80,12 +80,14 @@ export class UplStatuspageHeader extends DeesElement { justify-content: center; min-height: 36px; color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')}; + box-shadow: ${unsafeCSS(shadows.sm)}; } .mainbox .actions .actionButton:hover { - background: ${cssManager.bdTheme('#f9fafb', '#262626')}; - border-color: ${cssManager.bdTheme('#d1d5db', '#404040')}; + background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(0, 0, 0, 0.8)')}; + border-color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.12)', 'rgba(255, 255, 255, 0.12)')}; transform: translateY(-1px); + box-shadow: ${unsafeCSS(shadows.md)}; } .mainbox .actions .actionButton:active { @@ -93,7 +95,7 @@ export class UplStatuspageHeader extends DeesElement { } .header-content { - padding: 48px 0 64px 0; + padding: 64px 0 48px 0; text-align: center; } @@ -144,12 +146,14 @@ export class UplStatuspageHeader extends DeesElement { .actionButton.primary { background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')}; color: ${cssManager.bdTheme('#ffffff', '#0a0a0a')}; - border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')}; + border-color: transparent; + backdrop-filter: none; } .actionButton.primary:hover { - background: ${cssManager.bdTheme('#262626', '#f4f4f5')}; - border-color: ${cssManager.bdTheme('#262626', '#f4f4f5')}; + background: ${cssManager.bdTheme('#262626', '#e5e7eb')}; + transform: translateY(-1px); + box-shadow: ${unsafeCSS(shadows.md)}; } ` ] diff --git a/ts_web/elements/upl-statuspage-statusbar.ts b/ts_web/elements/upl-statuspage-statusbar.ts index 0b5a96c..5ef5a97 100644 --- a/ts_web/elements/upl-statuspage-statusbar.ts +++ b/ts_web/elements/upl-statuspage-statusbar.ts @@ -1,7 +1,7 @@ import { DeesElement, property, html, customElement, type TemplateResult, cssManager, css, unsafeCSS } from '@design.estate/dees-element'; import * as domtools from '@design.estate/dees-domtools'; import type { IOverallStatus } from '../interfaces/index.js'; -import { fonts } from '../styles/shared.styles.js'; +import { fonts, colors } from '../styles/shared.styles.js'; import { demoFunc } from './upl-statuspage-statusbar.demo.js'; declare global { @@ -77,32 +77,32 @@ export class UplStatuspageStatusbar extends DeesElement { } .statusbar-inner.operational { - background: ${cssManager.bdTheme('#10b981', '#064e3b')}; - border-color: ${cssManager.bdTheme('#10b981', '#064e3b')}; + background: ${colors.status.operational}; + border-color: ${colors.status.operational}; color: white; } .statusbar-inner.degraded { - background: ${cssManager.bdTheme('#f59e0b', '#78350f')}; - border-color: ${cssManager.bdTheme('#f59e0b', '#78350f')}; + background: ${colors.status.degraded}; + border-color: ${colors.status.degraded}; color: white; } .statusbar-inner.partial_outage { - background: ${cssManager.bdTheme('#ef4444', '#7f1d1d')}; - border-color: ${cssManager.bdTheme('#ef4444', '#7f1d1d')}; + background: ${colors.status.partial}; + border-color: ${colors.status.partial}; color: white; } .statusbar-inner.major_outage { - background: ${cssManager.bdTheme('#dc2626', '#450a0a')}; - border-color: ${cssManager.bdTheme('#dc2626', '#450a0a')}; + background: ${colors.status.major}; + border-color: ${colors.status.major}; color: white; } .statusbar-inner.maintenance { - background: ${cssManager.bdTheme('#3b82f6', '#1e3a8a')}; - border-color: ${cssManager.bdTheme('#3b82f6', '#1e3a8a')}; + background: ${colors.status.maintenance}; + border-color: ${colors.status.maintenance}; color: white; } diff --git a/ts_web/elements/upl-statuspage-statusdetails.ts b/ts_web/elements/upl-statuspage-statusdetails.ts index be3afe6..54184fb 100644 --- a/ts_web/elements/upl-statuspage-statusdetails.ts +++ b/ts_web/elements/upl-statuspage-statusdetails.ts @@ -75,7 +75,6 @@ export class UplStatuspageStatusdetails extends DeesElement { display: flex; gap: 2px; padding: ${unsafeCSS(spacing.sm)}; - background: ${colors.background.secondary}; border-radius: ${unsafeCSS(borderRadius.base)}; overflow: hidden; } @@ -87,12 +86,11 @@ export class UplStatuspageStatusdetails extends DeesElement { cursor: pointer; transition: all 0.2s ease; position: relative; - opacity: 0.9; } .mainbox .barContainer .bar:hover { - opacity: 1; - transform: scaleY(1.05); + transform: scaleY(1.1); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); } .mainbox .barContainer .bar.operational { @@ -136,14 +134,15 @@ export class UplStatuspageStatusdetails extends DeesElement { justify-content: space-between; padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.sm)} 0; font-size: 12px; - color: ${colors.text.secondary}; + color: ${cssManager.bdTheme('#4b5563', '#9ca3af')}; font-family: ${unsafeCSS(fonts.mono)}; + font-weight: 500; } .tooltip { position: absolute; - background: ${cssManager.bdTheme('#1a1a1a', '#ffffff')}; - color: ${cssManager.bdTheme('#ffffff', '#1a1a1a')}; + background: ${cssManager.bdTheme('#18181b', '#ffffff')}; + color: ${cssManager.bdTheme('#fafafa', '#18181b')}; padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.md)}; border-radius: ${unsafeCSS(borderRadius.base)}; font-size: 13px; @@ -153,7 +152,7 @@ export class UplStatuspageStatusdetails extends DeesElement { z-index: 10; white-space: nowrap; box-shadow: ${unsafeCSS(shadows.lg)}; - border: 1px solid ${colors.border.default}; + border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')}; } .tooltip.visible { @@ -164,7 +163,7 @@ export class UplStatuspageStatusdetails extends DeesElement { font-weight: 600; display: block; margin-bottom: ${unsafeCSS(spacing.xs)}; - color: ${cssManager.bdTheme('#ffffff', '#1a1a1a')}; + color: ${cssManager.bdTheme('#fafafa', '#18181b')}; } .tooltip div { @@ -216,6 +215,26 @@ export class UplStatuspageStatusdetails extends DeesElement { height: 12px; border-radius: ${unsafeCSS(borderRadius.sm)}; } + + .legend-color.operational { + background: ${colors.status.operational}; + } + + .legend-color.degraded { + background: ${colors.status.degraded}; + } + + .legend-color.partial_outage { + background: ${colors.status.partial}; + } + + .legend-color.major_outage { + background: ${colors.status.major}; + } + + .legend-color.maintenance { + background: ${colors.status.maintenance}; + } @media (max-width: 640px) { .container { @@ -239,14 +258,13 @@ export class UplStatuspageStatusdetails extends DeesElement { ]; public render(): TemplateResult { - const now = Date.now(); - const currentHour = new Date().getHours(); const timeIndicatorPosition = this.calculateTimeIndicatorPosition(); return html` - ${this.serviceName} - Last ${this.hoursToShow} Hours -
- ${this.loading ? html` +
+ ${this.serviceName} - Last ${this.hoursToShow} Hours +
+ ${this.loading ? html`
${Array(this.hoursToShow).fill(0).map(() => html`
`)}
@@ -263,32 +281,33 @@ export class UplStatuspageStatusdetails extends DeesElement { Now
`} -
- ${!this.loading ? html` -
-
-
- Operational -
-
-
- Degraded -
-
-
- Partial Outage -
-
-
- Major Outage -
-
-
- Maintenance -
- ` : ''} -
+ ${!this.loading ? html` +
+
+
+ Operational +
+
+
+ Degraded +
+
+
+ Partial Outage +
+
+
+ Major Outage +
+
+
+ Maintenance +
+
+ ` : ''} +
+
`; } diff --git a/ts_web/styles/shared.styles.ts b/ts_web/styles/shared.styles.ts index c6db558..0cfefad 100644 --- a/ts_web/styles/shared.styles.ts +++ b/ts_web/styles/shared.styles.ts @@ -29,11 +29,11 @@ export const colors = { // Status colors status: { - operational: cssManager.bdTheme('#10b981', '#064e3b'), - degraded: cssManager.bdTheme('#f59e0b', '#78350f'), - partial: cssManager.bdTheme('#ef4444', '#7f1d1d'), - major: cssManager.bdTheme('#dc2626', '#450a0a'), - maintenance: cssManager.bdTheme('#3b82f6', '#1e3a8a') + operational: cssManager.bdTheme('#047857', '#10b981'), + degraded: cssManager.bdTheme('#b45309', '#fbbf24'), + partial: cssManager.bdTheme('#b91c1c', '#f87171'), + major: cssManager.bdTheme('#7f1d1d', '#ef4444'), + maintenance: cssManager.bdTheme('#1e40af', '#60a5fa') } };