From 64abb3017248a77caf589861581e7340a4bedbca Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Sun, 23 Nov 2025 02:39:18 +0800
Subject: [PATCH] improve login and signup page UI consistency

---
 apps/jingrow/frontend/src/locales/zh-CN.json  |  1 +
 .../jingrow/frontend/src/views/auth/Login.vue | 53 +++++++++++++++---
 .../frontend/src/views/auth/Signup.vue        | 55 +++++++++++++++----
 3 files changed, 91 insertions(+), 18 deletions(-)

diff --git a/apps/jingrow/frontend/src/locales/zh-CN.json b/apps/jingrow/frontend/src/locales/zh-CN.json
index 0224793..c38e22a 100644
--- a/apps/jingrow/frontend/src/locales/zh-CN.json
+++ b/apps/jingrow/frontend/src/locales/zh-CN.json
@@ -51,6 +51,7 @@
   "Sign up failed": "注册失败",
   "Sign up failed, please try again": "注册失败，请重试",
   "Already have an account?": "已有账户？",
+  "Don't have an account?": "没有账户？",
   "System and personal settings": "系统配置和个人设置",
   "Personal Settings": "个人设置",
   "Email": "邮箱",
diff --git a/apps/jingrow/frontend/src/views/auth/Login.vue b/apps/jingrow/frontend/src/views/auth/Login.vue
index edf8db9..8226351 100644
--- a/apps/jingrow/frontend/src/views/auth/Login.vue
+++ b/apps/jingrow/frontend/src/views/auth/Login.vue
@@ -58,6 +58,7 @@
 
       <div class="login-footer" v-if="showSignupLink">
         <n-text depth="3">
+          {{ t("Don't have an account?") }}
           <router-link to="/signup" class="signup-link">
             {{ t('Sign up') }}
           </router-link>
@@ -213,29 +214,65 @@ onMounted(async () => {
 }
 
 .signup-link {
-  color: #18a058;
+  color: #1fc76f;
   text-decoration: none;
   font-weight: 500;
+  margin-left: 4px;
   transition: color 0.2s;
 }
 
 .signup-link:hover {
-  color: #36ad6a;
+  color: #1fc76f;
   text-decoration: underline;
 }
 
 :deep(.brand-button) {
-  background-color: #18a058 !important;
-  border-color: #18a058 !important;
+  background: #e6f8f0 !important;
+  border: 1px solid #1fc76f !important;
+  color: #0d684b !important;
+}
+
+:deep(.brand-button .n-button__border),
+:deep(.brand-button .n-button__state-border) {
+  border: none !important;
+  border-color: transparent !important;
 }
 
 :deep(.brand-button:hover) {
-  background-color: #36ad6a !important;
-  border-color: #36ad6a !important;
+  background: #dcfce7 !important;
+  border-color: #1fc76f !important;
+  color: #166534 !important;
+  box-shadow: 0 2px 8px rgba(31, 199, 111, 0.15) !important;
+}
+
+:deep(.brand-button:hover .n-button__border),
+:deep(.brand-button:hover .n-button__state-border) {
+  border: none !important;
+  border-color: transparent !important;
+}
+
+:deep(.brand-button:active) {
+  background: #1fc76f !important;
+  border-color: #1fc76f !important;
+  color: white !important;
+  box-shadow: 0 1px 4px rgba(31, 199, 111, 0.2) !important;
+}
+
+:deep(.brand-button:active .n-button__border),
+:deep(.brand-button:active .n-button__state-border) {
+  border: none !important;
+  border-color: transparent !important;
 }
 
 :deep(.brand-button:focus) {
-  background-color: #18a058 !important;
-  border-color: #18a058 !important;
+  background: #e6f8f0 !important;
+  border-color: #1fc76f !important;
+  color: #0d684b !important;
+}
+
+:deep(.brand-button:focus .n-button__border),
+:deep(.brand-button:focus .n-button__state-border) {
+  border: none !important;
+  border-color: transparent !important;
 }
 </style>
diff --git a/apps/jingrow/frontend/src/views/auth/Signup.vue b/apps/jingrow/frontend/src/views/auth/Signup.vue
index 514c057..26a352d 100644
--- a/apps/jingrow/frontend/src/views/auth/Signup.vue
+++ b/apps/jingrow/frontend/src/views/auth/Signup.vue
@@ -284,10 +284,10 @@ onMounted(async () => {
 }
 
 .title {
-  font-size: 28px;
+  font-size: 32px;
   font-weight: 700;
   color: #1f2937;
-  margin: 0 0 6px 0;
+  margin: 0 0 8px 0;
 }
 
 .subtitle {
@@ -303,7 +303,7 @@ onMounted(async () => {
 }
 
 .login-link {
-  color: #18a058;
+  color: #1fc76f;
   text-decoration: none;
   font-weight: 500;
   margin-left: 4px;
@@ -311,23 +311,58 @@ onMounted(async () => {
 }
 
 .login-link:hover {
-  color: #36ad6a;
+  color: #1fc76f;
   text-decoration: underline;
 }
 
 :deep(.brand-button) {
-  background-color: #18a058 !important;
-  border-color: #18a058 !important;
+  background: #e6f8f0 !important;
+  border: 1px solid #1fc76f !important;
+  color: #0d684b !important;
+}
+
+:deep(.brand-button .n-button__border),
+:deep(.brand-button .n-button__state-border) {
+  border: none !important;
+  border-color: transparent !important;
 }
 
 :deep(.brand-button:hover) {
-  background-color: #36ad6a !important;
-  border-color: #36ad6a !important;
+  background: #dcfce7 !important;
+  border-color: #1fc76f !important;
+  color: #166534 !important;
+  box-shadow: 0 2px 8px rgba(31, 199, 111, 0.15) !important;
+}
+
+:deep(.brand-button:hover .n-button__border),
+:deep(.brand-button:hover .n-button__state-border) {
+  border: none !important;
+  border-color: transparent !important;
+}
+
+:deep(.brand-button:active) {
+  background: #1fc76f !important;
+  border-color: #1fc76f !important;
+  color: white !important;
+  box-shadow: 0 1px 4px rgba(31, 199, 111, 0.2) !important;
+}
+
+:deep(.brand-button:active .n-button__border),
+:deep(.brand-button:active .n-button__state-border) {
+  border: none !important;
+  border-color: transparent !important;
 }
 
 :deep(.brand-button:focus) {
-  background-color: #18a058 !important;
-  border-color: #18a058 !important;
+  background: #e6f8f0 !important;
+  border-color: #1fc76f !important;
+  color: #0d684b !important;
+}
+
+:deep(.brand-button:focus .n-button__border),
+:deep(.brand-button:focus .n-button__state-border) {
+  border: none !important;
+  border-color: transparent !important;
 }
 </style>