From ff4ad24f6128ef1e8458346589cbc13f7a4b4403 Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Fri, 8 May 2026 12:08:32 +0200
Subject: [PATCH] fix(frontend): match legacy wave layout + recolor for dark
 mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The wave SVG had inline fill="#c7ebe2" (mint) on the bottom wave, so
in dark/ultra-dark mode it rendered as a pale-white blob against the
dark page. Stripped the inline fills, drove them off CSS variables
that swap with .is-dark / .is-ultra:

  light:      green tints + #c7ebe2 (mint) on the bottom wave
  dark:       #222d42 across all four waves
  ultra-dark: #0f2d32

The wave was also positioned wrong — anchored to the top 200px of
the viewport with absolute positioning. Restored the legacy layout:
  - .waves-header is fixed to the top of the viewport with z-index -1
    so the form floats over it
  - .waves-inner-header pushes the wave SVG down to ~50vh with a
    50vh-tall solid block of the page color
  - .waves SVG itself is 15vh tall, sitting at the bottom of that block

Net effect: top half is solid-colored, then a wavy edge transitions
into the rest of the page, with the form centered on top — matching
the legacy panel exactly.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend/src/pages/login/LoginPage.vue | 75 ++++++++++++++++++--------
 1 file changed, 53 insertions(+), 22 deletions(-)

diff --git a/frontend/src/pages/login/LoginPage.vue b/frontend/src/pages/login/LoginPage.vue
index 82ddfe85..fd8200c3 100644
--- a/frontend/src/pages/login/LoginPage.vue
+++ b/frontend/src/pages/login/LoginPage.vue
@@ -59,16 +59,17 @@ async function login() {
   <a-layout class="login-app" :class="{ 'is-dark': themeState.isDark, 'is-ultra': themeState.isUltra }">
     <a-layout-content class="login-content">
       <div class="waves-header">
+        <div class="waves-inner-header"></div>
         <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
           viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
           <defs>
             <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
           </defs>
           <g class="parallax">
-            <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(0, 135, 113, 0.08)" />
-            <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(0, 135, 113, 0.08)" />
-            <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(0, 135, 113, 0.08)" />
-            <use xlink:href="#gentle-wave" x="48" y="7" fill="#c7ebe2" />
+            <use xlink:href="#gentle-wave" x="48" y="0" />
+            <use xlink:href="#gentle-wave" x="48" y="3" />
+            <use xlink:href="#gentle-wave" x="48" y="5" />
+            <use xlink:href="#gentle-wave" x="48" y="7" />
           </g>
         </svg>
       </div>
@@ -154,27 +155,42 @@ async function login() {
 <style scoped>
 /* Page palette comes straight from the legacy panel's CSS variables
  * (web/assets/css/custom.min.css). Driving everything off CSS vars
- * means the .is-dark / .is-ultra class swap is a one-liner. */
+ * means the .is-dark / .is-ultra class swap is a one-liner.
+ *
+ * Wave layout, faithfully matching the legacy:
+ *   - .waves-inner-header: 50vh of solid color
+ *   - .waves SVG: 15vh of animated wave below it
+ *   - Together they form a 65vh-tall colored region anchored to the top,
+ *     with the form floating centered on top of it. */
 .login-app {
-  --bg-page: #c7ebe2;
+  --bg-page: #ffffff;
+  --bg-wave-header: #dbf5ed;
   --bg-card: #ffffff;
   --color-title: #008771;
   --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.09);
+  --wave-fill: rgba(0, 135, 113, 0.12);
+  --wave-fill-bottom: #c7ebe2;
 
   min-height: 100vh;
   background: var(--bg-page);
 }
 
 .login-app.is-dark {
-  --bg-page: #222d42;
+  --bg-page: #151f31;
+  --bg-wave-header: #0a2227;
   --bg-card: #151f31;
   --color-title: rgba(255, 255, 255, 0.92);
   --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.45);
+  --wave-fill: #222d42;
+  --wave-fill-bottom: #222d42;
 }
 
 .login-app.is-dark.is-ultra {
-  --bg-page: #0f2d32;
+  --bg-page: #0c0e12;
+  --bg-wave-header: #0a2227;
   --bg-card: #0c0e12;
+  --wave-fill: #0f2d32;
+  --wave-fill-bottom: #0f2d32;
 }
 
 .login-app :deep(.ant-layout-content) {
@@ -224,29 +240,44 @@ async function login() {
 }
 
 .waves-header {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
+  position: fixed;
+  inset: 0 0 auto 0;
+  width: 100%;
+  z-index: -1;
   pointer-events: none;
-  overflow: hidden;
-  height: 200px;
+  background: var(--bg-wave-header);
+}
+
+.waves-inner-header {
+  height: 50vh;
+  width: 100%;
 }
 
 .waves {
-  width: 100%;
-  height: 100%;
+  position: relative;
   display: block;
+  width: 100%;
+  height: 15vh;
+  min-height: 100px;
+  max-height: 150px;
+  margin-bottom: -8px;
 }
 
+/* Wave fills are CSS-driven so they switch with the theme; legacy used
+ * inline fill="..." on each <use> which made them lock to one palette. */
 .parallax > use {
-  animation: move-forever 15s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
+  fill: var(--wave-fill);
+  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
+}
+.parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s;  opacity: 0.2; }
+.parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; opacity: 0.4; }
+.parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; opacity: 0.6; }
+.parallax > use:nth-child(4) {
+  animation-delay: -5s;
+  animation-duration: 20s;
+  fill: var(--wave-fill-bottom);
+  opacity: 1;
 }
-
-.parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; }
-.parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; }
-.parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; }
-.parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; }
 
 @keyframes move-forever {
   0% { transform: translate3d(-90px, 0, 0); }