From f9604263e3909922cd6ad7892489375e36f0ebf7 Mon Sep 17 00:00:00 2001 From: Juergen Kunz Date: Mon, 30 Jun 2025 07:24:15 +0000 Subject: [PATCH] update footer --- test-footer-shadcn.html | 132 +++++++++++++++++++++++ ts_web/elements/upl-statuspage-footer.ts | 122 +++++++++++---------- 2 files changed, 195 insertions(+), 59 deletions(-) create mode 100644 test-footer-shadcn.html diff --git a/test-footer-shadcn.html b/test-footer-shadcn.html new file mode 100644 index 0000000..aea47d1 --- /dev/null +++ b/test-footer-shadcn.html @@ -0,0 +1,132 @@ + + + + + + Footer Component - shadcn Style + + + + +
+

Footer Component with Full shadcn Styling

+

The footer below has been fully updated to embrace shadcn design principles:

+ +
+ +
+ +
+ + + + \ No newline at end of file diff --git a/ts_web/elements/upl-statuspage-footer.ts b/ts_web/elements/upl-statuspage-footer.ts index 63236f7..0346f3d 100644 --- a/ts_web/elements/upl-statuspage-footer.ts +++ b/ts_web/elements/upl-statuspage-footer.ts @@ -118,10 +118,10 @@ export class UplStatuspageFooter extends DeesElement { } .footer-main { - display: grid; - grid-template-columns: 1fr auto; - gap: ${unsafeCSS(spacing['2xl'])}; + display: flex; + justify-content: space-between; align-items: start; + gap: ${unsafeCSS(spacing['2xl'])}; } .company-info { @@ -131,9 +131,10 @@ export class UplStatuspageFooter extends DeesElement { } .company-name { - font-size: 20px; - font-weight: 600; + font-size: 16px; + font-weight: 500; color: ${colors.text.primary}; + letter-spacing: -0.01em; } .company-links { @@ -143,15 +144,15 @@ export class UplStatuspageFooter extends DeesElement { } .footer-link { - color: ${colors.text.secondary}; + color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')}; text-decoration: none; - transition: color 0.2s ease; - font-size: 14px; + transition: color 0.15s ease; + font-size: 13px; + font-weight: 400; } .footer-link:hover { color: ${colors.text.primary}; - text-decoration: underline; } .footer-actions { @@ -161,37 +162,36 @@ export class UplStatuspageFooter extends DeesElement { } .action-button { - padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.md)}; - border: 1px solid ${colors.border.default}; - background: transparent; - border-radius: ${unsafeCSS(borderRadius.base)}; + padding: 8px 16px; + height: 36px; + border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')}; + background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')}; + border-radius: 6px; cursor: pointer; text-align: center; - transition: all 0.2s ease; + transition: all 0.15s ease; white-space: nowrap; - font-size: 14px; - font-weight: 500; + font-size: 13px; + font-weight: 400; color: ${colors.text.primary}; font-family: ${unsafeCSS(fonts.base)}; + display: inline-flex; + align-items: center; + justify-content: center; } .action-button:hover { - background: ${colors.background.secondary}; - border-color: ${colors.border.muted}; - transform: translateY(-1px); - } - - .action-button:active { - transform: translateY(0); + background: ${cssManager.bdTheme('#f9fafb', '#18181b')}; + border-color: ${cssManager.bdTheme('#d1d5db', '#3f3f46')}; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; - padding-top: ${unsafeCSS(spacing.xl)}; - margin-top: ${unsafeCSS(spacing.xl)}; - border-top: 1px solid ${colors.border.default}; + padding-top: ${unsafeCSS(spacing.lg)}; + margin-top: ${unsafeCSS(spacing.lg)}; + border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')}; } .footer-meta { @@ -208,60 +208,62 @@ export class UplStatuspageFooter extends DeesElement { } .social-link { - display: inline-block; - width: 20px; - height: 20px; - opacity: 0.7; - transition: all 0.2s ease; - color: ${colors.text.secondary}; + 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')}; } .social-link:hover { - opacity: 1; color: ${colors.text.primary}; - transform: translateY(-1px); + background: ${cssManager.bdTheme('#f3f4f6', '#27272a')}; } .social-link svg { - width: 100%; - height: 100%; + width: 16px; + height: 16px; fill: currentColor; } .copyright { - font-size: 14px; - color: ${colors.text.secondary}; + font-size: 13px; + color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')}; } .last-updated { - font-size: 13px; - color: ${colors.text.muted}; + font-size: 12px; + color: ${cssManager.bdTheme('#9ca3af', '#71717a')}; } .powered-by { - font-size: 13px; - color: ${colors.text.muted}; + font-size: 12px; + color: ${cssManager.bdTheme('#9ca3af', '#71717a')}; text-align: right; } .powered-by a { - color: ${colors.text.secondary}; + color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')}; text-decoration: none; - transition: color 0.2s ease; + transition: color 0.15s ease; } .powered-by a:hover { color: ${colors.text.primary}; - text-decoration: underline; } .status-update { - padding: ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.lg)}; - background: ${colors.background.muted}; - border-radius: ${unsafeCSS(borderRadius.base)}; - font-size: 14px; + padding: 12px 16px; + background: ${cssManager.bdTheme('#f9fafb', '#18181b')}; + border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')}; + border-radius: 6px; + font-size: 13px; margin-bottom: ${unsafeCSS(spacing.lg)}; - line-height: 1.6; + line-height: 1.5; + color: ${cssManager.bdTheme('#4b5563', '#d1d5db')}; } .language-selector { @@ -348,25 +350,24 @@ export class UplStatuspageFooter extends DeesElement { } .additional-link { - font-size: 14px; - color: ${colors.text.secondary}; + font-size: 13px; + color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')}; text-decoration: none; - transition: color 0.2s ease; + transition: color 0.15s ease; } .additional-link:hover { color: ${colors.text.primary}; - text-decoration: underline; } @media (max-width: 640px) { .container { - padding: ${unsafeCSS(spacing.xl)} ${unsafeCSS(spacing.md)}; + padding: ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.md)}; } .footer-main { - grid-template-columns: 1fr; - gap: ${unsafeCSS(spacing.xl)}; + flex-direction: column; + gap: ${unsafeCSS(spacing.lg)}; } .footer-bottom { @@ -411,13 +412,16 @@ export class UplStatuspageFooter extends DeesElement { ${this.offline ? html`
- ⚠ You are currently offline + + + + You are currently offline
` : ''} ${this.latestStatusUpdate ? html`
- Latest Update: ${this.latestStatusUpdate} + Latest Update: ${this.latestStatusUpdate}
` : ''}