From 730d68a79fe39b22158c083e7c697afc8851baf3 Mon Sep 17 00:00:00 2001 From: MHSanaei Date: Fri, 8 May 2026 12:21:37 +0200 Subject: [PATCH] fix(frontend): correct dark login bg + give ultra-dark wave real contrast MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two related fixes: 1. Default-dark wave-header bg was wrong. I had #0a2227, but that's the *ultra-dark* override; default dark uses --dark-color-background = #0a1222. Now the dark-mode top half is the legacy purple-blue instead of teal. 2. Ultra-dark wave fill is intentionally near-identical to its bg in the legacy palette (#0f2d32 vs #0a2227, ~5/11/11 RGB delta), which makes the wave look static even though the animation is running. Bumped --wave-fill / --wave-fill-bottom to #1f4d52 in ultra-dark only — far enough above the bg that the motion reads, while staying within the same teal hue family. Also corrected ultra-dark --bg-page back to #0f2d32 (was briefly #0c0e12, which is the card color, not the page color). Co-Authored-By: Claude Opus 4.7 --- frontend/src/pages/login/LoginPage.vue | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/frontend/src/pages/login/LoginPage.vue b/frontend/src/pages/login/LoginPage.vue index 94a25f96..5433368b 100644 --- a/frontend/src/pages/login/LoginPage.vue +++ b/frontend/src/pages/login/LoginPage.vue @@ -201,9 +201,9 @@ async function login() { } .login-app.is-dark { - --bg-page: #222d42; /* legacy .dark .under */ - --bg-wave-header: #0a2227; /* legacy --dark-color-login-background */ - --bg-card: #151f31; /* legacy --dark-color-surface-100 */ + --bg-page: #222d42; /* legacy .dark .under = surface-200 */ + --bg-wave-header: #0a1222; /* legacy --dark-color-background (login-bg defaults to this) */ + --bg-card: #151f31; /* legacy surface-100 */ --color-title: rgba(255, 255, 255, 0.92); --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.45); --wave-fill: #222d42; @@ -211,11 +211,15 @@ async function login() { } .login-app.is-dark.is-ultra { - --bg-page: #0c0e12; - --bg-wave-header: #0a2227; - --bg-card: #0c0e12; - --wave-fill: #0f2d32; - --wave-fill-bottom: #0f2d32; + --bg-page: #0f2d32; /* legacy ultra .under = login-wave override */ + --bg-wave-header: #0a2227; /* legacy ultra --dark-color-login-background */ + --bg-card: #0c0e12; /* legacy ultra surface-100 */ + /* Legacy ultra-dark uses #0f2d32 for both wave-fill and bg-page, + * which leaves near-zero contrast against #0a2227 and the wave + * reads as static. Bump to a noticeably lighter teal so motion is + * visible — every other value stays legacy-true. */ + --wave-fill: #1f4d52; + --wave-fill-bottom: #1f4d52; } /* Both ant-layout and ant-layout-content default to opaque backgrounds.