...

17 files changed, 96 insertions, 116 deletions

diff --git a/FrontEnd/src/views/admin/UserAdmin.tsx b/FrontEnd/src/views/admin/UserAdmin.tsx
index 2a123a76..125219c3 100644
--- a/FrontEnd/src/views/admin/UserAdmin.tsx
+++ b/FrontEnd/src/views/admin/UserAdmin.tsx
@@ -3,7 +3,7 @@ import classnames from "classnames";
 
 import OperationDialog, {
   OperationDialogBoolInput,
-} from "../common/OperationDialog";
+} from "../common/dailog/OperationDialog";
 
 import { AuthUser } from "@/services/user";
 import {
@@ -45,7 +45,7 @@ const CreateUserDialog: React.FC<DialogProps<undefined, HttpUser>> = ({
           password,
         })
       }
-      close={close}
+      onClose={close}
       open={open}
       onSuccessAndClose={onSuccess}
     />
@@ -61,7 +61,7 @@ const UserDeleteDialog: React.FC<DialogProps<{ username: string }, unknown>> =
     return (
       <OperationDialog
         open={open}
-        close={close}
+        onClose={close}
         title="admin:user.dialog.delete.title"
         themeColor="danger"
         inputPrompt={() => (
@@ -86,7 +86,7 @@ const UserModifyDialog: React.FC<
   return (
     <OperationDialog
       open={open}
-      close={close}
+      onClose={close}
       title="admin:user.dialog.modify.title"
       themeColor="danger"
       inputPrompt={() => (
@@ -137,7 +137,7 @@ const UserPermissionModifyDialog: React.FC<
   return (
     <OperationDialog
       open={open}
-      close={close}
+      onClose={close}
       title="admin:user.dialog.modifyPermissions.title"
       themeColor="danger"
       inputPrompt={() => (
diff --git a/FrontEnd/src/views/center/TimelineCreateDialog.tsx b/FrontEnd/src/views/center/TimelineCreateDialog.tsx
index b4e25ba1..4871a5e0 100644
--- a/FrontEnd/src/views/center/TimelineCreateDialog.tsx
+++ b/FrontEnd/src/views/center/TimelineCreateDialog.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { useHistory } from "react-router";
 
 import { validateTimelineName } from "@/services/timeline";
-import OperationDialog from "../common/OperationDialog";
+import OperationDialog from "../common/dailog/OperationDialog";
 import { getHttpTimelineClient, HttpTimelineInfo } from "@/http/timeline";
 
 interface TimelineCreateDialogProps {
@@ -16,7 +16,7 @@ const TimelineCreateDialog: React.FC<TimelineCreateDialogProps> = (props) => {
   return (
     <OperationDialog
       open={props.open}
-      close={props.close}
+      onClose={props.close}
       themeColor="success"
       title="home.createDialog.title"
       inputScheme={
diff --git a/FrontEnd/src/views/common/ToggleIconButton.tsx b/FrontEnd/src/views/common/ToggleIconButton.tsx
deleted file mode 100644
index c4d2d132..00000000
--- a/FrontEnd/src/views/common/ToggleIconButton.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-
-export interface ToggleIconButtonProps
-  extends React.HTMLAttributes<HTMLElement> {
-  state: boolean;
-  trueIconClassName: string;
-  falseIconClassName: string;
-}
-
-const ToggleIconButton: React.FC<ToggleIconButtonProps> = ({
-  state,
-  className,
-  trueIconClassName,
-  falseIconClassName,
-  ...otherProps
-}) => {
-  return (
-    <i
-      className={classnames(
-        state ? trueIconClassName : falseIconClassName,
-        "icon-button",
-        className
-      )}
-      {...otherProps}
-    />
-  );
-};
-
-export default ToggleIconButton;
diff --git a/FrontEnd/src/views/common/LoadingButton.tsx b/FrontEnd/src/views/common/button/LoadingButton.tsx
index cd9f1adc..fd1c19b3 100644
--- a/FrontEnd/src/views/common/LoadingButton.tsx
+++ b/FrontEnd/src/views/common/button/LoadingButton.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { Button, ButtonProps, Spinner } from "react-bootstrap";
 
 const LoadingButton: React.FC<{ loading?: boolean } & ButtonProps> = ({
   loading,
diff --git a/FrontEnd/src/views/common/ConfirmDialog.tsx b/FrontEnd/src/views/common/dailog/ConfirmDialog.tsx
index 70dc83f5..1ad52350 100644
--- a/FrontEnd/src/views/common/ConfirmDialog.tsx
+++ b/FrontEnd/src/views/common/dailog/ConfirmDialog.tsx
@@ -2,25 +2,23 @@ import { convertI18nText, I18nText } from "@/common";
 import React from "react";
 import { useTranslation } from "react-i18next";
 
-import Button from "./button/Button";
+import Button from "../button/Button";
+import Dialog from "./Dialog";
 
 const ConfirmDialog: React.FC<{
+  open?: boolean;
   onClose: () => void;
   onConfirm: () => void;
   title: I18nText;
   body: I18nText;
-}> = ({ onClose, onConfirm, title, body }) => {
+}> = ({ open, onClose, onConfirm, title, body }) => {
   const { t } = useTranslation();
 
   return (
-    <Modal onHide={onClose} show centered>
-      <Modal.Header>
-        <Modal.Title className="text-danger">
-          {convertI18nText(title, t)}
-        </Modal.Title>
-      </Modal.Header>
-      <Modal.Body>{convertI18nText(body, t)}</Modal.Body>
-      <Modal.Footer>
+    <Dialog onClose={onClose} open={open}>
+      <h3 className="text-danger">{convertI18nText(title, t)}</h3>
+      <p>{convertI18nText(body, t)}</p>
+      <div>
         <Button
           text="operationDialog.cancel"
           color="secondary"
@@ -34,8 +32,8 @@ const ConfirmDialog: React.FC<{
             onClose();
           }}
         />
-      </Modal.Footer>
-    </Modal>
+      </div>
+    </Dialog>
   );
 };
 
diff --git a/FrontEnd/src/views/common/dailog/Dialog.css b/FrontEnd/src/views/common/dailog/Dialog.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/FrontEnd/src/views/common/dailog/Dialog.css
diff --git a/FrontEnd/src/views/common/dailog/Dialog.tsx b/FrontEnd/src/views/common/dailog/Dialog.tsx
new file mode 100644
index 00000000..5a3902c4
--- /dev/null
+++ b/FrontEnd/src/views/common/dailog/Dialog.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+export interface DialogProps {
+  onClose: () => void;
+  open?: boolean;
+  children?: React.ReactNode;
+}
+
+export default function Dialog(props: DialogProps): React.ReactElement | null {
+  const { open, onClose, children } = props;
+
+  return <div>{children}</div>;
+}
diff --git a/FrontEnd/src/views/common/OperationDialog.tsx b/FrontEnd/src/views/common/dailog/OperationDialog.tsx
index ac4c51b9..129e85d5 100644
--- a/FrontEnd/src/views/common/OperationDialog.tsx
+++ b/FrontEnd/src/views/common/dailog/OperationDialog.tsx
@@ -1,12 +1,13 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Form, Button, Modal } from "react-bootstrap";
 import { TwitterPicker } from "react-color";
 import moment from "moment";
 
 import { convertI18nText, I18nText, UiLogicError } from "@/common";
 
-import LoadingButton from "./LoadingButton";
+import Button from "../button/Button";
+import LoadingButton from "../button/LoadingButton";
+import Dialog from "./Dialog";
 
 interface DefaultErrorPromptProps {
   error?: string;
@@ -141,7 +142,7 @@ export interface OperationDialogProps<
   OperationInputInfoList extends readonly OperationDialogInput[]
 > {
   open: boolean;
-  close: () => void;
+  onClose: () => void;
   title: I18nText | (() => React.ReactNode);
   themeColor?: "danger" | "success" | string;
   onProcess: (
@@ -204,7 +205,7 @@ const OperationDialog = <
 
   const close = (): void => {
     if (step.type !== "process") {
-      props.close();
+      props.onClose();
       if (step.type === "success" && props.onSuccessAndClose) {
         props.onSuccessAndClose(step.data);
       }
@@ -278,7 +279,7 @@ const OperationDialog = <
 
     body = (
       <>
-        <Modal.Body>
+        <div>
           {inputPrompt}
           {inputScheme.map((item, index) => {
             const value = values[index];
@@ -403,11 +404,13 @@ const OperationDialog = <
               );
             }
           })}
-        </Modal.Body>
-        <Modal.Footer>
-          <Button variant="outline-secondary" onClick={close}>
-            {t("operationDialog.cancel")}
-          </Button>
+        </div>
+        <div>
+          <Button
+            text="operationDialog.cancel"
+            color="secondary"
+            onClick={close}
+          />
           <LoadingButton
             variant={props.themeColor}
             loading={process}
@@ -421,7 +424,7 @@ const OperationDialog = <
           >
             {t("operationDialog.confirm")}
           </LoadingButton>
-        </Modal.Footer>
+        </div>
       </>
     );
   } else {
@@ -439,12 +442,10 @@ const OperationDialog = <
     }
     body = (
       <>
-        <Modal.Body>{content}</Modal.Body>
-        <Modal.Footer>
-          <Button variant="primary" onClick={close}>
-            {t("operationDialog.ok")}
-          </Button>
-        </Modal.Footer>
+        <div>{content}</div>
+        <div>
+          <Button text="operationDialog.ok" color="primary" onClick={close} />
+        </div>
       </>
     );
   }
@@ -455,16 +456,16 @@ const OperationDialog = <
       : convertI18nText(props.title, t);
 
   return (
-    <Modal show={props.open} onHide={close}>
-      <Modal.Header
+    <Dialog open={props.open} onClose={close}>
+      <h3
         className={
           props.themeColor != null ? "text-" + props.themeColor : undefined
         }
       >
         {title}
-      </Modal.Header>
+      </h3>
       {body}
-    </Modal>
+    </Dialog>
   );
 };
 
diff --git a/FrontEnd/src/views/login/index.tsx b/FrontEnd/src/views/login/index.tsx
index 55bd2f8c..89aeb47a 100644
--- a/FrontEnd/src/views/login/index.tsx
+++ b/FrontEnd/src/views/login/index.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 import { useUser, userService } from "@/services/user";
 
 import AppBar from "../common/AppBar";
-import LoadingButton from "../common/LoadingButton";
+import LoadingButton from "../common/button/LoadingButton";
 
 import "./index.css";
 
diff --git a/FrontEnd/src/views/settings/ChangeAvatarDialog.tsx b/FrontEnd/src/views/settings/ChangeAvatarDialog.tsx
index 1baab1cc..0bf51c21 100644
--- a/FrontEnd/src/views/settings/ChangeAvatarDialog.tsx
+++ b/FrontEnd/src/views/settings/ChangeAvatarDialog.tsx
@@ -10,6 +10,7 @@ import { getHttpUserClient } from "@/http/user";
 
 import ImageCropper, { Clip, applyClipToImage } from "../common/ImageCropper";
 import Button from "../common/button/Button";
+import Dialog from "../common/dailog/Dialog";
 
 export interface ChangeAvatarDialogProps {
   open: boolean;
@@ -159,29 +160,27 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => {
   };
 
   return (
-    <Modal show={props.open} onHide={close}>
-      <Modal.Header>
-        <Modal.Title> {t("settings.dialogChangeAvatar.title")}</Modal.Title>
-      </Modal.Header>
+    <Dialog open={props.open} onClose={close}>
+      <h3>{t("settings.dialogChangeAvatar.title")}</h3>
       {(() => {
         if (state === "select") {
           return (
             <>
-              <Modal.Body className="container">
+              <div className="container">
                 <div className="row">
                   {t("settings.dialogChangeAvatar.prompt.select")}
                 </div>
                 <div className="row">
                   <input type="file" accept="image/*" onChange={onSelectFile} />
                 </div>
-              </Modal.Body>
-              <Modal.Footer>
+              </div>
+              <div>
                 <Button
                   text="operationDialog.cancel"
                   color="secondary"
                   onClick={close}
                 />
-              </Modal.Footer>
+              </div>
             </>
           );
         } else if (state === "crop") {
@@ -190,7 +189,7 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => {
           }
           return (
             <>
-              <Modal.Body className="container">
+              <div className="container">
                 <div className="row justify-content-center">
                   <ImageCropper
                     clip={clip}
@@ -202,8 +201,8 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => {
                 <div className="row">
                   {t("settings.dialogChangeAvatar.prompt.crop")}
                 </div>
-              </Modal.Body>
-              <Modal.Footer>
+              </div>
+              <div>
                 <Button
                   text="operationDialog.cancel"
                   color="secondary"
@@ -222,18 +221,18 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => {
                     cropImgElement == null || clip == null || clip.width === 0
                   }
                 />
-              </Modal.Footer>
+              </div>
             </>
           );
         } else if (state === "processcrop") {
           return (
             <>
-              <Modal.Body className="container">
+              <div className="container">
                 <div className="row">
                   {t("settings.dialogChangeAvatar.prompt.processingCrop")}
                 </div>
-              </Modal.Body>
-              <Modal.Footer>
+              </div>
+              <div>
                 <Button
                   text="operationDialog.cancel"
                   color="secondary"
@@ -244,19 +243,19 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => {
                   color="secondary"
                   onClick={onPreviewPrevious}
                 />
-              </Modal.Footer>
+              </div>
             </>
           );
         } else if (state === "preview") {
           return (
             <>
-              <Modal.Body className="container">
+              <div className="container">
                 {createPreviewRow()}
                 <div className="row">
                   {t("settings.dialogChangeAvatar.prompt.preview")}
                 </div>
-              </Modal.Body>
-              <Modal.Footer>
+              </div>
+              <div>
                 <Button
                   text="operationDialog.cancel"
                   color="secondary"
@@ -272,46 +271,46 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => {
                   color="primary"
                   onClick={upload}
                 />
-              </Modal.Footer>
+              </div>
             </>
           );
         } else if (state === "uploading") {
           return (
             <>
-              <Modal.Body className="container">
+              <div className="container">
                 {createPreviewRow()}
                 <div className="row">
                   {t("settings.dialogChangeAvatar.prompt.uploading")}
                 </div>
-              </Modal.Body>
-              <Modal.Footer></Modal.Footer>
+              </div>
+              <div></div>
             </>
           );
         } else if (state === "success") {
           return (
             <>
-              <Modal.Body className="container">
+              <div className="container">
                 <div className="row p-4 text-success">
                   {t("operationDialog.success")}
                 </div>
-              </Modal.Body>
-              <Modal.Footer>
+              </div>
+              <div>
                 <Button
                   text="operationDialog.ok"
                   color="success"
                   onClick={close}
                 />
-              </Modal.Footer>
+              </div>
             </>
           );
         } else {
           return (
             <>
-              <Modal.Body className="container">
+              <div className="container">
                 {createPreviewRow()}
                 <div className="row text-danger">{trueMessage}</div>
-              </Modal.Body>
-              <Modal.Footer>
+              </div>
+              <div>
                 <Button
                   text="operationDialog.cancel"
                   color="secondary"
@@ -322,12 +321,12 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => {
                   color="primary"
                   onClick={upload}
                 />
-              </Modal.Footer>
+              </div>
             </>
           );
         }
       })()}
-    </Modal>
+    </Dialog>
   );
 };
 
diff --git a/FrontEnd/src/views/settings/ChangeNicknameDialog.tsx b/FrontEnd/src/views/settings/ChangeNicknameDialog.tsx
index 4b44cdd6..605796ca 100644
--- a/FrontEnd/src/views/settings/ChangeNicknameDialog.tsx
+++ b/FrontEnd/src/views/settings/ChangeNicknameDialog.tsx
@@ -2,7 +2,7 @@ import { getHttpUserClient } from "@/http/user";
 import { useUserLoggedIn } from "@/services/user";
 import React from "react";
 
-import OperationDialog from "../common/OperationDialog";
+import OperationDialog from "../common/dailog/OperationDialog";
 
 export interface ChangeNicknameDialogProps {
   open: boolean;
@@ -24,7 +24,7 @@ const ChangeNicknameDialog: React.FC<ChangeNicknameDialogProps> = (props) => {
           nickname: newNickname,
         });
       }}
-      close={props.close}
+      onClose={props.close}
     />
   );
 };
diff --git a/FrontEnd/src/views/settings/ChangePasswordDialog.tsx b/FrontEnd/src/views/settings/ChangePasswordDialog.tsx
index 21eeeb09..944fdaed 100644
--- a/FrontEnd/src/views/settings/ChangePasswordDialog.tsx
+++ b/FrontEnd/src/views/settings/ChangePasswordDialog.tsx
@@ -3,7 +3,7 @@ import { useHistory } from "react-router";
 
 import { userService } from "@/services/user";
 
-import OperationDialog from "../common/OperationDialog";
+import OperationDialog from "../common/dailog/OperationDialog";
 
 export interface ChangePasswordDialogProps {
   open: boolean;
@@ -55,7 +55,7 @@ const ChangePasswordDialog: React.FC<ChangePasswordDialogProps> = (props) => {
         await userService.changePassword(oldPassword, newPassword);
         setRedirect(true);
       }}
-      close={() => {
+      onClose={() => {
         props.close();
         if (redirect) {
           history.push("/login");
diff --git a/FrontEnd/src/views/timeline-common/MarkdownPostEdit.tsx b/FrontEnd/src/views/timeline-common/MarkdownPostEdit.tsx
index 005da933..0e43cb6e 100644
--- a/FrontEnd/src/views/timeline-common/MarkdownPostEdit.tsx
+++ b/FrontEnd/src/views/timeline-common/MarkdownPostEdit.tsx
@@ -9,7 +9,7 @@ import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline";
 import FlatButton from "../common/button/FlatButton";
 import TabPages from "../common/TabPages";
 import TimelinePostBuilder from "@/services/TimelinePostBuilder";
-import ConfirmDialog from "../common/ConfirmDialog";
+import ConfirmDialog from "../common/dailog/ConfirmDialog";
 
 export interface MarkdownPostEditProps {
   timeline: string;
diff --git a/FrontEnd/src/views/timeline-common/PostPropertyChangeDialog.tsx b/FrontEnd/src/views/timeline-common/PostPropertyChangeDialog.tsx
index 001e52d7..988124b6 100644
--- a/FrontEnd/src/views/timeline-common/PostPropertyChangeDialog.tsx
+++ b/FrontEnd/src/views/timeline-common/PostPropertyChangeDialog.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline";
 
-import OperationDialog from "../common/OperationDialog";
+import OperationDialog from "../common/dailog/OperationDialog";
 
 function PostPropertyChangeDialog(props: {
   onClose: () => void;
@@ -14,7 +14,7 @@ function PostPropertyChangeDialog(props: {
   return (
     <OperationDialog
       title="timeline.changePostPropertyDialog.title"
-      close={onClose}
+      onClose={onClose}
       open
       inputScheme={[
         {
diff --git a/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx b/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx
index b522f288..06e508e6 100644
--- a/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx
+++ b/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx
@@ -15,7 +15,7 @@ import { pushAlert } from "@/services/alert";
 import { base64 } from "@/http/common";
 
 import BlobImage from "../common/BlobImage";
-import LoadingButton from "../common/LoadingButton";
+import LoadingButton from "../common/button/LoadingButton";
 import { PopupMenu } from "../common/Menu";
 import Card from "../common/Card";
 import MarkdownPostEdit from "./MarkdownPostEdit";
diff --git a/FrontEnd/src/views/timeline-common/TimelinePropertyChangeDialog.tsx b/FrontEnd/src/views/timeline-common/TimelinePropertyChangeDialog.tsx
index 70f72025..64daa19b 100644
--- a/FrontEnd/src/views/timeline-common/TimelinePropertyChangeDialog.tsx
+++ b/FrontEnd/src/views/timeline-common/TimelinePropertyChangeDialog.tsx
@@ -8,7 +8,7 @@ import {
   TimelineVisibility,
 } from "@/http/timeline";
 
-import OperationDialog from "../common/OperationDialog";
+import OperationDialog from "../common/dailog/OperationDialog";
 
 export interface TimelinePropertyChangeDialogProps {
   open: boolean;
@@ -60,7 +60,7 @@ const TimelinePropertyChangeDialog: React.FC<TimelinePropertyChangeDialogProps>
           ] as const
         }
         open={props.open}
-        close={props.close}
+        onClose={props.close}
         onProcess={([newTitle, newVisibility, newDescription, newColor]) => {
           const req: HttpTimelinePatchRequest = {};
           if (newTitle !== timeline.title) {
diff --git a/FrontEnd/src/views/timeline/TimelineDeleteDialog.tsx b/FrontEnd/src/views/timeline/TimelineDeleteDialog.tsx
index dbca62ca..aedf4f29 100644
--- a/FrontEnd/src/views/timeline/TimelineDeleteDialog.tsx
+++ b/FrontEnd/src/views/timeline/TimelineDeleteDialog.tsx
@@ -4,7 +4,7 @@ import { Trans } from "react-i18next";
 
 import { getHttpTimelineClient, HttpTimelineInfo } from "@/http/timeline";
 
-import OperationDialog from "../common/OperationDialog";
+import OperationDialog from "../common/dailog/OperationDialog";
 
 interface TimelineDeleteDialog {
   timeline: HttpTimelineInfo;
@@ -20,7 +20,7 @@ const TimelineDeleteDialog: React.FC<TimelineDeleteDialog> = (props) => {
   return (
     <OperationDialog
       open={props.open}
-      close={props.close}
+      onClose={props.close}
       title="timeline.deleteDialog.title"
       themeColor="danger"
       inputPrompt={() => {