This is an automated email from the ASF dual-hosted git repository.
wu-sheng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-horizon-ui.git
The following commit(s) were added to refs/heads/main by this push:
new 1624c20 ui: topbar — drop the OAP UTC offset chip + dead .tz styles
1624c20 is described below
commit 1624c202a2eef41157719a12538db7cd9e9347bd
Author: Wu Sheng <[email protected]>
AuthorDate: Tue May 19 20:37:00 2026 +0800
ui: topbar — drop the OAP UTC offset chip + dead .tz styles
---
.../admin/global-defaults/ThemePreviewCard.vue | 6 +++++
apps/ui/src/shell/AppTopbar.vue | 28 ++++++----------------
packages/design-tokens/src/themes.css | 27 +++++++++++++++++++++
3 files changed, 40 insertions(+), 21 deletions(-)
diff --git a/apps/ui/src/features/admin/global-defaults/ThemePreviewCard.vue
b/apps/ui/src/features/admin/global-defaults/ThemePreviewCard.vue
index 1c248eb..715ed88 100644
--- a/apps/ui/src/features/admin/global-defaults/ThemePreviewCard.vue
+++ b/apps/ui/src/features/admin/global-defaults/ThemePreviewCard.vue
@@ -231,6 +231,12 @@ function metaBadgeStyle(t: ThemeDef): Record<string,
string> {
<style scoped>
.tpc {
+ /* `position: relative` is load-bearing — the absolute-positioned
+ * `.tpc__badges` (top:8 left:8 z:2 pill cluster) and the
+ * `.tpc__brand` chip inside the hero look up the tree for the
+ * nearest positioned ancestor; without this they escape the card
+ * entirely and end up floating against `<body>`. */
+ position: relative;
border: 1px solid;
border-radius: 10px;
overflow: hidden;
diff --git a/apps/ui/src/shell/AppTopbar.vue b/apps/ui/src/shell/AppTopbar.vue
index e3938a4..882fa82 100644
--- a/apps/ui/src/shell/AppTopbar.vue
+++ b/apps/ui/src/shell/AppTopbar.vue
@@ -122,16 +122,8 @@ const localTzLabel = computed<string>(() => {
return m === 0 ? `UTC${sign}${h}` : `UTC${sign}${h}:${String(m).padStart(2,
'0')}`;
});
-// True when the user's browser is in a different TZ than the OAP server.
-// Time-range queries get converted server-side; the chip flags the gap
-// so the operator knows the displayed local time will differ from the
-// server's log timestamps.
-const { timezone: serverTzMin } = useOapInfo();
-const tzMismatch = computed<boolean>(() => {
- if (serverTzMin.value === undefined) return false;
- const browserMin = -new Date().getTimezoneOffset();
- return browserMin !== serverTzMin.value;
-});
+// `tzMismatch` removed alongside the TZ chip; if a per-component
+// browser-vs-server TZ check returns, derive from `useOapInfo().timezone`.
/**
* Routes that own their own time range — the global topbar picker +
@@ -404,9 +396,11 @@ function formatRangeStamp(ms: number, step: TimeStep):
string {
<span class="dot" />
<span v-if="reachable" class="ver">OAP</span>
<span v-else class="ver">offline</span>
- <span v-if="reachable && tzOffsetLabel" class="tz" :class="{ mismatch:
tzMismatch }">
- {{ tzOffsetLabel }}
- </span>
+ <!-- Server TZ offset removed from the visible chip — too much
+ noise next to the health dot for an operator-rare check.
+ The tooltip (`oapChipTooltip`) still surfaces the value
+ when reachable, and the Cluster Status page → Query pane
+ shows it prominently. -->
</RouterLink>
<div ref="timeClusterEl" class="time-cluster">
<button
@@ -900,14 +894,6 @@ function formatRangeStamp(ms: number, step: TimeStep):
string {
color: var(--sw-fg-0);
font-weight: 600;
}
-.oap-chip .tz {
- color: var(--sw-fg-2);
- padding-left: 4px;
- border-left: 1px solid var(--sw-line-2);
-}
-.oap-chip .tz.mismatch {
- color: var(--sw-warn);
-}
@keyframes pulse-err {
0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
70% { box-shadow: 0 0 0 6px transparent; }
diff --git a/packages/design-tokens/src/themes.css
b/packages/design-tokens/src/themes.css
index ea2706c..ffb7edf 100644
--- a/packages/design-tokens/src/themes.css
+++ b/packages/design-tokens/src/themes.css
@@ -42,7 +42,11 @@
--sw-bg-0: #0a0d12;
--sw-bg-1: #0f131a;
--sw-bg-2: #151a23;
+ --sw-bg-3: #1c222d;
+ --sw-bg-4: #232a37;
--sw-line: #232a37;
+ --sw-line-2: #2e3645;
+ --sw-line-3: #3a4456;
--sw-fg-0: #e8ecf3;
--sw-fg-1: #b6bdcc;
@@ -69,7 +73,11 @@
--sw-bg-0: #0b0f1a;
--sw-bg-1: #101421;
--sw-bg-2: #171c2e;
+ --sw-bg-3: #1e2438;
+ --sw-bg-4: #252d44;
--sw-line: #232a3c;
+ --sw-line-2: #2e3650;
+ --sw-line-3: #3a4566;
--sw-fg-0: #eef0f7;
--sw-fg-1: #aeb4c7;
@@ -96,7 +104,11 @@
--sw-bg-0: #000000;
--sw-bg-1: #0a0a0a;
--sw-bg-2: #141414;
+ --sw-bg-3: #1c1c1c;
+ --sw-bg-4: #242424;
--sw-line: #222222;
+ --sw-line-2: #303030;
+ --sw-line-3: #404040;
--sw-fg-0: #f4f4f5;
--sw-fg-1: #c4c4c4;
@@ -119,11 +131,22 @@
}
/* ── daybreak — light + violet, airy ─────────────────────────────── */
+/* CAREFUL: every bg layer MUST stay light. The default `:root`
+ * defines `--sw-bg-3` / `--sw-bg-4` / `--sw-line-2` / `--sw-line-3`
+ * as DARK values (it's the Horizon palette). Without explicit light
+ * overrides for those tokens, hover states (which read bg-3) flash
+ * dark on Daybreak and the dark fg-0 text becomes invisible against
+ * them. Each layer goes slightly darker than the previous so
+ * elevation reads consistently. */
[data-theme="daybreak"] {
--sw-bg-0: #f7f7fa;
--sw-bg-1: #ffffff;
--sw-bg-2: #f0f1f5;
+ --sw-bg-3: #e8e9ed;
+ --sw-bg-4: #dfe1e8;
--sw-line: #e3e4ec;
+ --sw-line-2: #cdcfd8;
+ --sw-line-3: #b3b6c0;
--sw-fg-0: #0a0d12;
--sw-fg-1: #3a3f4c;
@@ -150,7 +173,11 @@
--sw-bg-0: #0b0d18;
--sw-bg-1: #11142a;
--sw-bg-2: #181b35;
+ --sw-bg-3: #1f2240;
+ --sw-bg-4: #272b4e;
--sw-line: #262a48;
+ --sw-line-2: #323766;
+ --sw-line-3: #40467f;
--sw-fg-0: #f1f3ff;
--sw-fg-1: #b9bee0;
