From 2de02c9ad405b99287d3f29239e4431cd475b6b8 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 11 Oct 2024 16:03:05 +0800
Subject: [PATCH] refactor: improve ui of login page (#6809)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area core
/kind improvement
/milestone 2.20.x

#### What this PR does / why we need it:

优化登录页面的 UI。

<img width="1910" alt="image" src="https://github.com/user-attachments/assets/736b1f72-e7c1-4c19-a0d9-dc935c738931">


#### Does this PR introduce a user-facing change?

```release-note
None
```
---
 .../src/main/resources/static/styles/main.css     | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/application/src/main/resources/static/styles/main.css b/application/src/main/resources/static/styles/main.css
index c7ac03b8e..757a53115 100644
--- a/application/src/main/resources/static/styles/main.css
+++ b/application/src/main/resources/static/styles/main.css
@@ -2,7 +2,6 @@
 .gateway-page {
     width: 100%;
     height: 100vh;
-    background-color: #f5f5f5;
     overflow: auto;
 }
 
@@ -44,6 +43,7 @@
     margin: 0 auto;
     max-width: 28em;
     padding: 5% 1em;
+    line-height: 1.5;
     font-family:
         ui-sans-serif,
         system-ui,
@@ -64,6 +64,7 @@
 /* Form */
 .halo-form-wrapper {
     border-radius: var(--rounded-lg);
+    border: 1px solid #dfe6ecb3;
     background: #fff;
     padding: 1.5em;
 }
@@ -79,11 +80,11 @@
 .halo-form .form-item {
     display: flex;
     flex-direction: column;
-    margin-bottom: 1.3em;
+    margin-bottom: 1.5em;
     width: 100%;
 }
 
-.halo-form .form-item:last-child {
+.halo-form .form-item:last-of-type {
     margin-bottom: 0;
 }
 
@@ -91,7 +92,7 @@
     gap: var(--spacing-lg);
     display: flex;
     align-items: flex-start;
-    margin-bottom: 1.3em;
+    margin-bottom: 1.5em;
 }
 
 .halo-form .form-item-group .form-item {
@@ -160,13 +161,13 @@
 
 .halo-form .form-item label {
     color: var(--color-text);
-    margin-bottom: 0.625em;
+    margin-bottom: 0.75rem;
     font-size: var(--text-base);
     font-weight: 500;
 }
 
 .halo-form .form-item .form-label-group {
-    margin-bottom: 0.625em;
+    margin-bottom: 0.75em;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -305,7 +306,7 @@
 .pill-items li a {
     gap: var(--spacing-sm);
     font-size: var(--text-sm);
-    padding: 0.7em 1em;
+    padding: 0.6em 0.9em;
     display: flex;
     align-items: center;
     color: #1f2937;