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/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 +++++++++++-----
 4 files changed, 25 insertions(+), 7 deletions(-)
 create mode 100644 FrontEnd/src/views/common/dailog/OperationDialog.css

(limited to 'FrontEnd/src/views/common/dailog')

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>
   );
-- 
cgit v1.2.3