From 8796470c6c9d43cb573c23221540d9aac6407e85 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 1 Jul 2021 20:12:39 +0800
Subject: ...

---
 FrontEnd/src/views/login/index.tsx | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

(limited to 'FrontEnd/src/views/login/index.tsx')

diff --git a/FrontEnd/src/views/login/index.tsx b/FrontEnd/src/views/login/index.tsx
index 782acdaa..ed696437 100644
--- a/FrontEnd/src/views/login/index.tsx
+++ b/FrontEnd/src/views/login/index.tsx
@@ -79,11 +79,14 @@ const LoginPage: React.FC = (_) => {
 
   return (
     <div className="login-container container-fluid mt-2">
-      <h1 className="text-center">{t("welcome")}</h1>
-      <div>
-        <label htmlFor="username">{t("user.username")}</label>
+      <h1 className="cru-text-center cru-color-primary">{t("welcome")}</h1>
+      <div className="cru-operation-dialog-group">
+        <label className="cru-operation-dialog-label" htmlFor="username">
+          {t("user.username")}
+        </label>
         <input
           id="username"
+          type="text"
           disabled={process}
           onChange={(e) => {
             setUsername(e.target.value);
@@ -92,9 +95,15 @@ const LoginPage: React.FC = (_) => {
           value={username}
         />
         {usernameDirty && username === "" && (
-          <div>{t("login.emptyUsername")}</div>
+          <div className="cru-operation-dialog-error-text">
+            {t("login.emptyUsername")}
+          </div>
         )}
-        <label htmlFor="password">{t("user.password")}</label>
+      </div>
+      <div className="cru-operation-dialog-group">
+        <label className="cru-operation-dialog-label" htmlFor="password">
+          {t("user.password")}
+        </label>
         <input
           id="password"
           type="password"
@@ -107,10 +116,12 @@ const LoginPage: React.FC = (_) => {
           onKeyDown={onEnterPressInPassword}
         />
         {passwordDirty && password === "" && (
-          <div>{t("login.emptyPassword")}</div>
+          <div className="cru-operation-dialog-error-text">
+            {t("login.emptyPassword")}
+          </div>
         )}
       </div>
-      <div>
+      <div className="cru-operation-dialog-group">
         <input
           id="remember-me"
           type="checkbox"
@@ -119,7 +130,9 @@ const LoginPage: React.FC = (_) => {
             setRememberMe(e.currentTarget.checked);
           }}
         />
-        <label>{t("user.rememberMe")}</label>
+        <label className="cru-operation-dialog-inline-label">
+          {t("user.rememberMe")}
+        </label>
       </div>
       {error ? <p className="text-danger">{t(error)}</p> : null}
       <div className="cru-text-end">
-- 
cgit v1.2.3