From c941e37435ac220cdc473dc7fdc46852ec3f9a64 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 4 Oct 2024 20:44:43 +0800
Subject: [PATCH] refactor: enhance login page styling for improved UX (#6757)
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:

微调登录相关页面的样式。

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

```release-note
None
```
---
 .../src/main/resources/static/styles/main.css | 36 ++++++++++---------
 .../gateway_modules/common_fragments.html     |  4 +--
 .../gateway_modules/login_fragments.html      | 24 ++++++-------
 .../src/main/resources/templates/signup.html  | 10 +++---
 4 files changed, 39 insertions(+), 35 deletions(-)

diff --git a/application/src/main/resources/static/styles/main.css b/application/src/main/resources/static/styles/main.css
index b449f94f9..0f325cd5d 100644
--- a/application/src/main/resources/static/styles/main.css
+++ b/application/src/main/resources/static/styles/main.css
@@ -1,6 +1,6 @@
 /* Base */
 .gateway-page {
-    width: 100vw;
+    width: 100%;
     height: 100vh;
     background-color: #f5f5f5;
     overflow: auto;
@@ -34,8 +34,10 @@
     --spacing-xl: 1.25em;
     --spacing-lg: 1em;
     --spacing-md: 0.875em;
-    --spacing-sm: 0.5em;
-    --text-md: 0.875em;
+    --spacing-sm: 0.625em;
+    --spacing-xs: 0.5em;
+    --text-base: 1em;
+    --text-sm: 0.875em;
 }
 
 .gateway-wrapper {
@@ -88,7 +90,7 @@
 .halo-form .form-item-group {
     gap: var(--spacing-lg);
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     margin-bottom: 1.3em;
 }
 
@@ -142,7 +144,7 @@
 .halo-form .form-input-stack-select {
     all: unset;
     color: var(--color-text);
-    font-size: var(--text-md);
+    font-size: var(--text-sm);
     padding-right: 1.85em;
     display: inline-flex;
     align-items: center;
@@ -153,16 +155,18 @@
 
 .halo-form .form-input-stack-text {
     color: var(--color-text);
-    font-size: var(--text-md);
+    font-size: var(--text-sm);
 }
 
 .halo-form .form-item label {
     color: var(--color-text);
-    margin-bottom: 0.5em;
+    margin-bottom: 0.625em;
+    font-size: var(--text-base);
+    font-weight: 500;
 }
 
 .halo-form .form-item .form-label-group {
-    margin-bottom: 0.5em;
+    margin-bottom: 0.625em;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -174,7 +178,7 @@
 
 .halo-form .form-item-extra-link {
     color: var(--color-link);
-    font-size: var(--text-md);
+    font-size: var(--text-sm);
     text-decoration: none;
 }
 
@@ -187,7 +191,7 @@
 
 .halo-form .form-item-compact label {
     color: var(--color-text);
-    font-size: var(--text-md);
+    font-size: var(--text-sm);
 }
 
 .halo-form button[type="submit"] {
@@ -263,7 +267,7 @@
     border-radius: var(--rounded-base);
     border: 1px solid var(--color-border);
     color: var(--color-text);
-    font-size: var(--text-md);
+    font-size: var(--text-sm);
     grid-column: span 1 / span 1;
     height: 100%;
     cursor: pointer;
@@ -281,7 +285,7 @@
 
 .auth-provider-items {
     all: unset;
-    gap: var(--spacing-md);
+    gap: var(--spacing-sm);
     margin: 0;
     display: flex;
     flex-wrap: wrap;
@@ -300,12 +304,12 @@
 
 .auth-provider-items li a {
     gap: var(--spacing-sm);
+    font-size: var(--text-sm);
     padding: 0.7em 1em;
     display: flex;
     align-items: center;
     color: #1f2937;
     text-decoration: none;
-    font-size: 0.8em;
 }
 
 .auth-provider-items li img {
@@ -328,7 +332,7 @@
 
 .divider-wrapper {
     color: var(--color-text);
-    font-size: var(--text-md);
+    font-size: var(--text-sm);
     gap: var(--spacing-lg);
     display: flex;
     align-items: center;
@@ -347,7 +351,7 @@
     border-radius: var(--rounded-base);
     margin-bottom: var(--spacing-xl);
     padding: var(--spacing-md) var(--spacing-xl);
-    font-size: var(--text-md);
+    font-size: var(--text-sm);
     overflow: hidden;
     position: relative;
     color: var(--color-text);
@@ -411,4 +415,4 @@
 
 ::-ms-reveal {
     display: none;
-}
\ No newline at end of file
+}
diff --git a/application/src/main/resources/templates/gateway_modules/common_fragments.html b/application/src/main/resources/templates/gateway_modules/common_fragments.html
index dc5df4b1b..78885a91f 100644
--- a/application/src/main/resources/templates/gateway_modules/common_fragments.html
+++ b/application/src/main/resources/templates/gateway_modules/common_fragments.html
@@ -30,7 +30,7 @@
         .language-switcher select {
             all: unset;
             border: 1px solid var(--color-border);
-            font-size: var(--text-md);
+            font-size: var(--text-sm);
             height: 2em;
             border-radius: var(--rounded-lg);
             outline: none;
@@ -111,4 +111,4 @@
             </li>
         </ul>
     </th:block>
-</div>
+</div>
\ No newline at end of file
diff --git a/application/src/main/resources/templates/gateway_modules/login_fragments.html b/application/src/main/resources/templates/gateway_modules/login_fragments.html
index b9cdf7148..ed976a484 100644
--- a/application/src/main/resources/templates/gateway_modules/login_fragments.html
+++ b/application/src/main/resources/templates/gateway_modules/login_fragments.html
@@ -1,11 +1,11 @@
 <!-- Those fragments are only for login template-->
 <form
-        th:fragment="form"
-        class="halo-form"
-        name="login-form"
-        id="login-form"
-        th:action="${authProvider.spec.authenticationUrl}"
-        th:method="${authProvider.spec.method}"
+    th:fragment="form"
+    class="halo-form"
+    name="login-form"
+    id="login-form"
+    th:action="${authProvider.spec.authenticationUrl}"
+    th:method="${authProvider.spec.method}"
 >
     <div class="alert alert-error" role="alert" th:if="${param.error.size() > 0}" th:with="error = ${param.error[0]}">
         <strong th:if="${error == 'invalid-credential'}">
@@ -28,7 +28,7 @@
     <div th:replace="~{__${fragmentTemplateName}__::form}"></div>
 
     <div th:if="${authProvider.spec.rememberMeSupport}" class="form-item-compact">
-        <input type="checkbox" id="remember-me" name="remember-me" value="true"/>
+        <input type="checkbox" id="remember-me" name="remember-me" value="true" />
         <label for="remember-me" th:text="#{form.rememberMe.label}"></label>
     </div>
 
@@ -40,14 +40,14 @@
 <div th:remove="tag" th:fragment="formAuthProviders">
     <th:block th:unless="${#lists.isEmpty(formAuthProviders)}">
         <div class="divider-wrapper">
-            <hr/>
+            <hr />
             <th:block th:text="#{otherLogin.label}"></th:block>
-            <hr/>
+            <hr />
         </div>
         <ul class="auth-provider-items">
             <li th:each="provider : ${formAuthProviders}">
                 <a th:href="'/login?method=' + ${provider.metadata.name}">
-                    <img th:src="${provider.spec.logo}"/>
+                    <img th:src="${provider.spec.logo}" />
                     <span th:text="${provider.spec.displayName}"></span>
                 </a>
             </li>
@@ -59,7 +59,7 @@
     <style>
         .signup-notice,
         .returntosite-notice {
-            font-size: var(--text-md);
+            font-size: var(--text-sm);
             color: var(--color-text);
             text-align: center;
             margin: 1em 0;
@@ -95,4 +95,4 @@
             <span th:text="#{returnToSite}"></span>
         </a>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/application/src/main/resources/templates/signup.html b/application/src/main/resources/templates/signup.html
index 2276f5b70..7ec0d4777 100644
--- a/application/src/main/resources/templates/signup.html
+++ b/application/src/main/resources/templates/signup.html
@@ -143,11 +143,11 @@
                         <th:block
                             th:replace="~{gateway_modules/input_fragments :: password(id = 'confirmPassword', name = 'confirmPassword', required = 'true', minlength = 6, enableToggle = true)}"
                         ></th:block>
-                         <p
-                             class="alert alert-error"
-                             th:if="${#fields.hasErrors('confirmPassword')}"
-                             th:errors="*{confirmPassword}"
-                         ></p>
+                        <p
+                            class="alert alert-error"
+                            th:if="${#fields.hasErrors('confirmPassword')}"
+                            th:errors="*{confirmPassword}"
+                        ></p>
                     </div>
 
                     <div class="form-item">