From 4a982805193e37d7f43bcf1b44ad85f7ae976d0e Mon Sep 17 00:00:00 2001 From: MHSanaei Date: Fri, 8 May 2026 12:24:05 +0200 Subject: [PATCH] fix(frontend): drop ultra-dark bottom-wave seam line MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Last fix made the wave fill #1f4d52 in ultra-dark for both top-three waves and the bottom wave, which gave visible motion but exposed a hard horizontal line where the bottom wave's flat lower edge met the page bg (#0f2d32). The user noticed it as "the wave at the bottom not moving its like a line" — they were seeing the SVG's clipped bottom edge, not the wave itself. Solution: only the top three waves get the brighter fill (those carry the visible motion). The bottom wave reverts to #0f2d32 = --bg-page, so its flat bottom edge merges seamlessly into the page below. Net effect: motion is still visible (from waves 2 and 3), and there's no seam line at the bottom of the SVG. Co-Authored-By: Claude Opus 4.7 --- frontend/src/pages/login/LoginPage.vue | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/frontend/src/pages/login/LoginPage.vue b/frontend/src/pages/login/LoginPage.vue index 5433368b..2e42af37 100644 --- a/frontend/src/pages/login/LoginPage.vue +++ b/frontend/src/pages/login/LoginPage.vue @@ -214,12 +214,13 @@ async function login() { --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. */ + /* Top three waves use a brighter teal so motion reads against the + * dark wave-header bg. Bottom wave keeps the legacy color so its + * flat lower edge merges into bg-page without a visible seam — if + * we used the brighter color here you'd see a hard line at the + * SVG's bottom. */ --wave-fill: #1f4d52; - --wave-fill-bottom: #1f4d52; + --wave-fill-bottom: #0f2d32; } /* Both ant-layout and ant-layout-content default to opaque backgrounds.