From 81e54efaae0ec1d5f1f90c3ca40448f8c61f0e80 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 1 Jul 2021 16:43:59 +0800
Subject: ...

---
 FrontEnd/src/views/admin/UserAdmin.tsx                  | 12 ++++++------
 FrontEnd/src/views/center/TimelineBoard.tsx             |  6 +++---
 FrontEnd/src/views/common/button/Button.css             | 16 +++++++++-------
 FrontEnd/src/views/common/dailog/ConfirmDialog.tsx      |  7 +++++--
 FrontEnd/src/views/common/dailog/Dialog.css             |  9 +++++++++
 FrontEnd/src/views/common/dailog/OperationDialog.css    |  0
 FrontEnd/src/views/common/dailog/OperationDialog.tsx    | 16 +++++++++++-----
 FrontEnd/src/views/common/index.css                     |  3 ++-
 FrontEnd/src/views/common/menu/Menu.css                 |  2 +-
 FrontEnd/src/views/login/index.tsx                      |  2 +-
 FrontEnd/src/views/settings/index.tsx                   | 11 ++++++-----
 FrontEnd/src/views/timeline-common/TimelinePostView.tsx |  2 +-
 12 files changed, 54 insertions(+), 32 deletions(-)
 create mode 100644 FrontEnd/src/views/common/dailog/OperationDialog.css

(limited to 'FrontEnd/src/views')

diff --git a/FrontEnd/src/views/admin/UserAdmin.tsx b/FrontEnd/src/views/admin/UserAdmin.tsx
index 481db1cc..6d2760f2 100644
--- a/FrontEnd/src/views/admin/UserAdmin.tsx
+++ b/FrontEnd/src/views/admin/UserAdmin.tsx
@@ -206,23 +206,23 @@ const UserItem: React.FC<UserItemProps> = ({ user, on }) => {
   return (
     <div className="admin-user-item">
       <i
-        className="bi-pencil-square float-end icon-button text-warning"
+        className="bi-pencil-square float-end icon-button cru-color-warning"
         onClick={() => setEditMaskVisible(true)}
       />
-      <h4 className="text-primary">{user.username}</h4>
-      <div className="text-secondary">
+      <h4 className="cru-color-primary">{user.username}</h4>
+      <div className="cru-color-secondary">
         {t("admin:user.nickname")}
         {user.nickname}
       </div>
-      <div className="text-secondary">
+      <div className="cru-color-secondary">
         {t("admin:user.uniqueId")}
         {user.uniqueId}
       </div>
-      <div className="text-secondary">
+      <div className="cru-color-secondary">
         {t("admin:user.permissions")}
         {user.permissions.map((permission) => {
           return (
-            <span key={permission} className="text-danger">
+            <span key={permission} className="cru-color-danger">
               {permission}{" "}
             </span>
           );
diff --git a/FrontEnd/src/views/center/TimelineBoard.tsx b/FrontEnd/src/views/center/TimelineBoard.tsx
index 3961a7bc..8c1f5fac 100644
--- a/FrontEnd/src/views/center/TimelineBoard.tsx
+++ b/FrontEnd/src/views/center/TimelineBoard.tsx
@@ -48,16 +48,16 @@ const TimelineBoardItem: React.FC<TimelineBoardItemProps> = ({
         <TimelineLogo className="icon" />
       )}
       <span className="title">{title}</span>
-      <small className="ms-2 text-secondary">{name}</small>
+      <small className="ms-2 cru-color-secondary">{name}</small>
       <span className="flex-grow-1"></span>
       {actions != null ? (
         <div className="right">
           <i
-            className="bi-trash icon-button text-danger px-2"
+            className="bi-trash icon-button cru-color-danger px-2"
             onClick={actions.onDelete}
           />
           <i
-            className="bi-grip-vertical icon-button text-gray px-2 touch-action-none"
+            className="bi-grip-vertical icon-button px-2 touch-action-none"
             onPointerDown={(e) => {
               e.currentTarget.setPointerCapture(e.pointerId);
               actions.onMove.start(e);
diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css
index ec2dd798..54127f05 100644
--- a/FrontEnd/src/views/common/button/Button.css
+++ b/FrontEnd/src/views/common/button/Button.css
@@ -57,7 +57,8 @@
 }
 
 .cru-button:not(.outline):disabled {
-  background-color: var(--cru-button-f3-color);
+  background-color: var(--cru-disable-color);
+  cursor: auto;
 }
 
 .cru-button.outline {
@@ -67,23 +68,24 @@
   padding: 0.2em 0.5em;
   border-radius: 0.2em;
   transition: all 0.6s;
-  background-color: var(--cru-background-color);
+  background-color: white;
 }
 
 .cru-button.outline:hover {
   color: var(--cru-button-f1-color);
   border-color: var(--cru-button-f1-color);
-  background-color: var(--cru-background-1-color);
+  background-color: var(--cru-background-color);
 }
 
 .cru-button.outline:active {
   color: var(--cru-button-f2-color);
   border-color: var(--cru-button-f2-color);
-  background-color: var(--cru-background-2-color);
+  background-color: var(--cru-background-1-color);
 }
 
 .cru-button.outline:disabled {
-  color: var(--cru-button-f3-color);
-  border-color: var(--cru-button-f3-color);
-  background-color: var(--cru-background-3-color);
+  color: var(--cru-disable-color);
+  border-color: var(--cru-disable-color);
+  background-color: white;
+  cursor: auto;
 }
diff --git a/FrontEnd/src/views/common/dailog/ConfirmDialog.tsx b/FrontEnd/src/views/common/dailog/ConfirmDialog.tsx
index 1ad52350..c10b1cdb 100644
--- a/FrontEnd/src/views/common/dailog/ConfirmDialog.tsx
+++ b/FrontEnd/src/views/common/dailog/ConfirmDialog.tsx
@@ -16,12 +16,15 @@ const ConfirmDialog: React.FC<{
 
   return (
     <Dialog onClose={onClose} open={open}>
-      <h3 className="text-danger">{convertI18nText(title, t)}</h3>
+      <h3 className="cru-color-danger">{convertI18nText(title, t)}</h3>
+      <hr />
       <p>{convertI18nText(body, t)}</p>
-      <div>
+      <hr />
+      <div className="cru-dialog-bottom-area">
         <Button
           text="operationDialog.cancel"
           color="secondary"
+          outline
           onClick={onClose}
         />
         <Button
diff --git a/FrontEnd/src/views/common/dailog/Dialog.css b/FrontEnd/src/views/common/dailog/Dialog.css
index abce04fd..c1209d99 100644
--- a/FrontEnd/src/views/common/dailog/Dialog.css
+++ b/FrontEnd/src/views/common/dailog/Dialog.css
@@ -20,3 +20,12 @@
   padding: 1.5em;
   background-color: white;
 }
+
+.cru-dialog-bottom-area {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.cru-dialog-bottom-area > * {
+  margin: 0 0.5em
+}
diff --git a/FrontEnd/src/views/common/dailog/OperationDialog.css b/FrontEnd/src/views/common/dailog/OperationDialog.css
new file mode 100644
index 00000000..e69de29b
diff --git a/FrontEnd/src/views/common/dailog/OperationDialog.tsx b/FrontEnd/src/views/common/dailog/OperationDialog.tsx
index 1e765276..f394a3d3 100644
--- a/FrontEnd/src/views/common/dailog/OperationDialog.tsx
+++ b/FrontEnd/src/views/common/dailog/OperationDialog.tsx
@@ -11,6 +11,8 @@ import Button from "../button/Button";
 import LoadingButton from "../button/LoadingButton";
 import Dialog from "./Dialog";
 
+import "./OperationDialog.css";
+
 interface DefaultErrorPromptProps {
   error?: string;
 }
@@ -18,13 +20,13 @@ interface DefaultErrorPromptProps {
 const DefaultErrorPrompt: React.FC<DefaultErrorPromptProps> = (props) => {
   const { t } = useTranslation();
 
-  let result = <p className="text-danger">{t("operationDialog.error")}</p>;
+  let result = <p className="cru-color-danger">{t("operationDialog.error")}</p>;
 
   if (props.error != null) {
     result = (
       <>
         {result}
-        <p className="text-danger">{props.error}</p>
+        <p className="cru-color-danger">{props.error}</p>
       </>
     );
   }
@@ -392,10 +394,12 @@ const OperationDialog = <
             }
           })}
         </div>
-        <div>
+        <hr />
+        <div className="cru-dialog-bottom-area">
           <Button
             text="operationDialog.cancel"
             color="secondary"
+            outline
             onClick={close}
           />
           <LoadingButton
@@ -421,7 +425,7 @@ const OperationDialog = <
       content =
         props.successPrompt?.(result.data) ?? t("operationDialog.success");
       if (typeof content === "string")
-        content = <p className="text-success">{content}</p>;
+        content = <p className="cru-color-success">{content}</p>;
     } else {
       content = props.failurePrompt?.(result.data) ?? <DefaultErrorPrompt />;
       if (typeof content === "string")
@@ -430,6 +434,7 @@ const OperationDialog = <
     body = (
       <>
         <div>{content}</div>
+        <hr />
         <div>
           <Button text="operationDialog.ok" color="primary" onClick={close} />
         </div>
@@ -446,11 +451,12 @@ const OperationDialog = <
     <Dialog open={props.open} onClose={close}>
       <h3
         className={
-          props.themeColor != null ? "text-" + props.themeColor : undefined
+          props.themeColor != null ? "cru-color-" + props.themeColor : undefined
         }
       >
         {title}
       </h3>
+      <hr />
       {body}
     </Dialog>
   );
diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css
index 02eed6d9..62167cfc 100644
--- a/FrontEnd/src/views/common/index.css
+++ b/FrontEnd/src/views/common/index.css
@@ -2,7 +2,8 @@
   --cru-background-color: #f8f9fa;
   --cru-background-1-color: #e9ecef;
   --cru-background-2-color: #dee2e6;
-  --cru-background-3-color: #ced4da;
+
+  --cru-disable-color: #ced4da;
 
   --cru-primary-color: rgb(0, 123, 255);
   --cru-primary-l1-color: rgb(26, 136, 255);
diff --git a/FrontEnd/src/views/common/menu/Menu.css b/FrontEnd/src/views/common/menu/Menu.css
index c933b34f..a30eb5c6 100644
--- a/FrontEnd/src/views/common/menu/Menu.css
+++ b/FrontEnd/src/views/common/menu/Menu.css
@@ -22,7 +22,7 @@
 }
 
 .cru-menu-item.color-secondary:hover {
-  color: var(--cru-text-on-secondary-color);
+  color: var(--cru-secondary-t-color);
   background-color: var(--cru-secondary-color);
 }
 
diff --git a/FrontEnd/src/views/login/index.tsx b/FrontEnd/src/views/login/index.tsx
index 6d70c64a..782acdaa 100644
--- a/FrontEnd/src/views/login/index.tsx
+++ b/FrontEnd/src/views/login/index.tsx
@@ -122,7 +122,7 @@ const LoginPage: React.FC = (_) => {
         <label>{t("user.rememberMe")}</label>
       </div>
       {error ? <p className="text-danger">{t(error)}</p> : null}
-      <div className="text-end">
+      <div className="cru-text-end">
         <LoadingButton
           loading={process}
           onClick={(e) => {
diff --git a/FrontEnd/src/views/settings/index.tsx b/FrontEnd/src/views/settings/index.tsx
index f25911d7..69a74327 100644
--- a/FrontEnd/src/views/settings/index.tsx
+++ b/FrontEnd/src/views/settings/index.tsx
@@ -28,7 +28,7 @@ const SettingsPage: React.FC = (_) => {
       <div className="container">
         {user ? (
           <Card className="my-3 py-3">
-            <h3 className="px-3 mb-3 text-primary">
+            <h3 className="px-3 mb-3 cru-color-primary">
               {t("settings.subheaders.account")}
             </h3>
             <div
@@ -44,13 +44,13 @@ const SettingsPage: React.FC = (_) => {
               {t("settings.changeNickname")}
             </div>
             <div
-              className="settings-item clickable text-danger"
+              className="settings-item clickable cru-color-danger"
               onClick={() => setDialog("changepassword")}
             >
               {t("settings.changePassword")}
             </div>
             <div
-              className="settings-item clickable text-danger"
+              className="settings-item clickable cru-color-danger"
               onClick={() => {
                 setDialog("logout");
               }}
@@ -60,13 +60,13 @@ const SettingsPage: React.FC = (_) => {
           </Card>
         ) : null}
         <Card className="my-3 py-3">
-          <h3 className="px-3 mb-3 text-primary">
+          <h3 className="px-3 mb-3 cru-color-primary">
             {t("settings.subheaders.customization")}
           </h3>
           <div className="row settings-item first mx-0">
             <div className="col col-12 col-sm-auto">
               <div>{t("settings.languagePrimary")}</div>
-              <small className="d-block text-secondary">
+              <small className="d-block cru-color-secondary">
                 {t("settings.languageSecondary")}
               </small>
             </div>
@@ -94,6 +94,7 @@ const SettingsPage: React.FC = (_) => {
                 title="settings.dialogConfirmLogout.title"
                 body="settings.dialogConfirmLogout.prompt"
                 onClose={() => setDialog(null)}
+                open
                 onConfirm={() => {
                   void userService.logout().then(() => {
                     history.push("/");
diff --git a/FrontEnd/src/views/timeline-common/TimelinePostView.tsx b/FrontEnd/src/views/timeline-common/TimelinePostView.tsx
index 995c43df..652ff9c9 100644
--- a/FrontEnd/src/views/timeline-common/TimelinePostView.tsx
+++ b/FrontEnd/src/views/timeline-common/TimelinePostView.tsx
@@ -64,7 +64,7 @@ const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => {
       >
         {post.editable ? (
           <i
-            className="bi-chevron-down icon-button primary-enhance float-end"
+            className="bi-chevron-down icon-button primary-enhance cru-float-right"
             onClick={(e) => {
               setOperationMaskVisible(true);
               e.stopPropagation();
-- 
cgit v1.2.3