From fa540c046d126449f77e46edd379bbc84e02d05d Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Sat, 26 Jun 2021 00:00:54 +0800
Subject: ...

---
 FrontEnd/src/views/settings/index.tsx | 33 ++++++++++++++++++---------------
 1 file changed, 18 insertions(+), 15 deletions(-)

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

diff --git a/FrontEnd/src/views/settings/index.tsx b/FrontEnd/src/views/settings/index.tsx
index 840bb7e8..b78e071a 100644
--- a/FrontEnd/src/views/settings/index.tsx
+++ b/FrontEnd/src/views/settings/index.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import { useHistory } from "react-router";
 import { useTranslation } from "react-i18next";
-import { Container, Form, Row, Col, Button, Modal } from "react-bootstrap";
 
 import { useUser, userService } from "@/services/user";
 
@@ -27,12 +26,16 @@ const ConfirmLogoutDialog: React.FC<{
       </Modal.Header>
       <Modal.Body>{t("settings.dialogConfirmLogout.prompt")}</Modal.Body>
       <Modal.Footer>
-        <Button variant="secondary" onClick={onClose}>
-          {t("operationDialog.cancel")}
-        </Button>
-        <Button variant="danger" onClick={onConfirm}>
-          {t("operationDialog.confirm")}
-        </Button>
+        <Button
+          text="operationDialog.cancel"
+          color="secondary"
+          onClick={onClose}
+        />
+        <Button
+          text="operationDialog.confirm"
+          variant="danger"
+          onClick={onConfirm}
+        />
       </Modal.Footer>
     </Modal>
   );
@@ -51,7 +54,7 @@ const SettingsPage: React.FC = (_) => {
 
   return (
     <>
-      <Container>
+      <div className="container">
         {user ? (
           <Card className="my-3 py-3">
             <h3 className="px-3 mb-3 text-primary">
@@ -89,14 +92,14 @@ const SettingsPage: React.FC = (_) => {
           <h3 className="px-3 mb-3 text-primary">
             {t("settings.subheaders.customization")}
           </h3>
-          <Row className="settings-item first mx-0">
-            <Col xs="12" sm="auto">
+          <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">
                 {t("settings.languageSecondary")}
               </small>
-            </Col>
-            <Col xs="auto" className="ms-auto">
+            </div>
+            <div className="col col-12 col-sm-auto">
               <Form.Control
                 as="select"
                 value={language}
@@ -107,10 +110,10 @@ const SettingsPage: React.FC = (_) => {
                 <option value="zh">中文</option>
                 <option value="en">English</option>
               </Form.Control>
-            </Col>
-          </Row>
+            </div>
+          </div>
         </Card>
-      </Container>
+      </div>
       {(() => {
         switch (dialog) {
           case "changepassword":
-- 
cgit v1.2.3


From b468fd9a0119b97d1ecc1090a028975e917aa75f Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Sat, 26 Jun 2021 18:50:27 +0800
Subject: ...

---
 FrontEnd/src/views/common/SearchInput.tsx          |  7 ++--
 FrontEnd/src/views/login/index.tsx                 |  5 +--
 FrontEnd/src/views/settings/index.tsx              | 40 ++++------------------
 .../src/views/timeline-common/MarkdownPostEdit.tsx |  5 ++-
 .../src/views/timeline-common/TimelinePostEdit.tsx |  5 ++-
 5 files changed, 15 insertions(+), 47 deletions(-)

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

diff --git a/FrontEnd/src/views/common/SearchInput.tsx b/FrontEnd/src/views/common/SearchInput.tsx
index ccb6dad6..79eb2732 100644
--- a/FrontEnd/src/views/common/SearchInput.tsx
+++ b/FrontEnd/src/views/common/SearchInput.tsx
@@ -38,14 +38,15 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
   );
 
   return (
-    <Form
+    <div
       className={classnames(
         "cru-search-input",
         alwaysOneline ? "flex-nowrap" : "flex-sm-nowrap",
         props.className
       )}
     >
-      <Form.Control
+      <input
+        type="text"
         className="me-sm-2 flex-grow-1"
         value={props.value}
         onChange={onInputChange}
@@ -71,7 +72,7 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
           </Button>
         )}
       </div>
-    </Form>
+    </div>
   );
 };
 
diff --git a/FrontEnd/src/views/login/index.tsx b/FrontEnd/src/views/login/index.tsx
index 89aeb47a..6c0aaf67 100644
--- a/FrontEnd/src/views/login/index.tsx
+++ b/FrontEnd/src/views/login/index.tsx
@@ -80,8 +80,7 @@ const LoginPage: React.FC = (_) => {
   return (
     <div className="login-container container-fluid mt-2">
       <h1 className="text-center">{t("welcome")}</h1>
-      <Form>
-        <Form.Group>
+      <div>
           <Form.Label htmlFor="username">{t("user.username")}</Form.Label>
           <Form.Control
             id="username"
@@ -98,8 +97,6 @@ const LoginPage: React.FC = (_) => {
               {t("login.emptyUsername")}
             </Form.Control.Feedback>
           )}
-        </Form.Group>
-        <Form.Group>
           <Form.Label htmlFor="password">{t("user.password")}</Form.Label>
           <Form.Control
             id="password"
diff --git a/FrontEnd/src/views/settings/index.tsx b/FrontEnd/src/views/settings/index.tsx
index b78e071a..f25911d7 100644
--- a/FrontEnd/src/views/settings/index.tsx
+++ b/FrontEnd/src/views/settings/index.tsx
@@ -7,40 +7,11 @@ import { useUser, userService } from "@/services/user";
 import ChangePasswordDialog from "./ChangePasswordDialog";
 import ChangeAvatarDialog from "./ChangeAvatarDialog";
 import ChangeNicknameDialog from "./ChangeNicknameDialog";
+import ConfirmDialog from "../common/dailog/ConfirmDialog";
 import Card from "../common/Card";
 
 import "./index.css";
 
-const ConfirmLogoutDialog: React.FC<{
-  onClose: () => void;
-  onConfirm: () => void;
-}> = ({ onClose, onConfirm }) => {
-  const { t } = useTranslation();
-
-  return (
-    <Modal show centered onHide={onClose}>
-      <Modal.Header>
-        <Modal.Title className="text-danger">
-          {t("settings.dialogConfirmLogout.title")}
-        </Modal.Title>
-      </Modal.Header>
-      <Modal.Body>{t("settings.dialogConfirmLogout.prompt")}</Modal.Body>
-      <Modal.Footer>
-        <Button
-          text="operationDialog.cancel"
-          color="secondary"
-          onClick={onClose}
-        />
-        <Button
-          text="operationDialog.confirm"
-          variant="danger"
-          onClick={onConfirm}
-        />
-      </Modal.Footer>
-    </Modal>
-  );
-};
-
 const SettingsPage: React.FC = (_) => {
   const { i18n, t } = useTranslation();
   const user = useUser();
@@ -100,8 +71,7 @@ const SettingsPage: React.FC = (_) => {
               </small>
             </div>
             <div className="col col-12 col-sm-auto">
-              <Form.Control
-                as="select"
+              <select
                 value={language}
                 onChange={(e) => {
                   void i18n.changeLanguage(e.target.value);
@@ -109,7 +79,7 @@ const SettingsPage: React.FC = (_) => {
               >
                 <option value="zh">中文</option>
                 <option value="en">English</option>
-              </Form.Control>
+              </select>
             </div>
           </div>
         </Card>
@@ -120,7 +90,9 @@ const SettingsPage: React.FC = (_) => {
             return <ChangePasswordDialog open close={() => setDialog(null)} />;
           case "logout":
             return (
-              <ConfirmLogoutDialog
+              <ConfirmDialog
+                title="settings.dialogConfirmLogout.title"
+                body="settings.dialogConfirmLogout.prompt"
                 onClose={() => setDialog(null)}
                 onConfirm={() => {
                   void userService.logout().then(() => {
diff --git a/FrontEnd/src/views/timeline-common/MarkdownPostEdit.tsx b/FrontEnd/src/views/timeline-common/MarkdownPostEdit.tsx
index 0e43cb6e..6cb64dd3 100644
--- a/FrontEnd/src/views/timeline-common/MarkdownPostEdit.tsx
+++ b/FrontEnd/src/views/timeline-common/MarkdownPostEdit.tsx
@@ -126,8 +126,7 @@ const MarkdownPostEdit: React.FC<MarkdownPostEditProps> = ({
             id: "text",
             tabText: "edit",
             page: (
-              <Form.Control
-                as="textarea"
+              <textarea
                 value={text}
                 disabled={process}
                 onChange={(event) => {
@@ -161,7 +160,7 @@ const MarkdownPostEdit: React.FC<MarkdownPostEditProps> = ({
                     />
                   </div>
                 ))}
-                <Form.Control
+                <input
                   type="file"
                   accept="image/jpeg,image/jpg,image/png,image/gif,image/webp"
                   onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx b/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx
index 06e508e6..5e59bee4 100644
--- a/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx
+++ b/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx
@@ -35,8 +35,7 @@ const TimelinePostEditText: React.FC<TimelinePostEditTextProps> = (props) => {
   const { text, disabled, onChange, className, style } = props;
 
   return (
-    <Form.Control
-      as="textarea"
+    <textarea
       value={text}
       disabled={disabled}
       onChange={(event) => {
@@ -80,7 +79,7 @@ const TimelinePostEditImage: React.FC<TimelinePostEditImageProps> = (props) => {
 
   return (
     <>
-      <Form.Control
+      <input
         type="file"
         onChange={onInputChange}
         accept="image/*"
-- 
cgit v1.2.3


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/settings/index.tsx')

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