From 1953869d366918435b58113868de93cec70be8d9 Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Fri, 8 May 2026 12:03:53 +0200
Subject: [PATCH] fix(frontend): use legacy panel palette for login page dark
 mode

Earlier dark mode used invented colors (#141a26 page bg, #1f2937 card)
that didn't match the rest of the panel. Replaced with the actual
values from web/assets/css/custom.min.css:

  light          dark             ultra-dark
  bg #c7ebe2     bg #222d42       bg #0f2d32
  card #fff      card #151f31     card #0c0e12
  title #008771  title #fff/.92   title #fff/.92

Drove everything off CSS custom properties on .login-app so the
.is-dark / .is-ultra class swap is a few var overrides instead of
duplicating selectors. Also restored the legacy card metrics
(2rem radius, 4rem 3rem padding, 2rem title) so the new page
matches the old panel's geometry, not just its colors.

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

diff --git a/frontend/src/pages/login/LoginPage.vue b/frontend/src/pages/login/LoginPage.vue
index 4ce85357..82ddfe85 100644
--- a/frontend/src/pages/login/LoginPage.vue
+++ b/frontend/src/pages/login/LoginPage.vue
@@ -56,7 +56,7 @@ async function login() {
 
 <template>
   <a-config-provider :theme="antdThemeConfig">
-  <a-layout class="login-app" :class="{ 'is-dark': themeState.isDark }">
+  <a-layout class="login-app" :class="{ 'is-dark': themeState.isDark, 'is-ultra': themeState.isUltra }">
     <a-layout-content class="login-content">
       <div class="waves-header">
         <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -152,19 +152,42 @@ async function login() {
 </template>
 
 <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. */
 .login-app {
+  --bg-page: #c7ebe2;
+  --bg-card: #ffffff;
+  --color-title: #008771;
+  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.09);
+
   min-height: 100vh;
-  background: #f0f2f5;
+  background: var(--bg-page);
 }
+
 .login-app.is-dark {
-  background: #141a26;
+  --bg-page: #222d42;
+  --bg-card: #151f31;
+  --color-title: rgba(255, 255, 255, 0.92);
+  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.45);
 }
-.login-app.is-dark :deep(.login-card) {
-  background: #1f2937;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
+
+.login-app.is-dark.is-ultra {
+  --bg-page: #0f2d32;
+  --bg-card: #0c0e12;
 }
-.login-app.is-dark :deep(.login-title) {
-  color: #2dd4bf;
+
+.login-app :deep(.ant-layout-content) {
+  background: var(--bg-page);
+}
+
+.login-card {
+  background: var(--bg-card);
+  box-shadow: var(--shadow-card);
+}
+
+.login-title {
+  color: var(--color-title);
 }
 
 .login-settings {
@@ -183,10 +206,9 @@ async function login() {
 }
 
 .login-card {
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
-  padding: 40px 32px;
+  border-radius: 2rem;
+  padding: 4rem 3rem;
+  transition: background 0.3s, box-shadow 0.3s;
 }
 
 .login-loading {
@@ -197,8 +219,7 @@ async function login() {
 .login-title {
   text-align: center;
   margin-bottom: 32px;
-  color: #008771;
-  font-size: 24px;
+  font-size: 2rem;
   font-weight: 500;
 }