From 672778ca5d9de5513c86d70394b2dd048639cdea Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 1 Jul 2021 17:16:20 +0800
Subject: ...

---
 FrontEnd/src/views/common/dailog/Dialog.css        |  1 +
 .../src/views/common/dailog/OperationDialog.css    | 26 ++++++++++++
 .../src/views/common/dailog/OperationDialog.tsx    | 49 ++++++++++++++++++----
 .../src/views/timeline/TimelineDeleteDialog.tsx    |  2 +-
 4 files changed, 68 insertions(+), 10 deletions(-)

diff --git a/FrontEnd/src/views/common/dailog/Dialog.css b/FrontEnd/src/views/common/dailog/Dialog.css
index 67bfe2a9..22b420fc 100644
--- a/FrontEnd/src/views/common/dailog/Dialog.css
+++ b/FrontEnd/src/views/common/dailog/Dialog.css
@@ -15,6 +15,7 @@
 
 .cru-dialog-container {
   max-width: 100%;
+  min-width: 30vw;
 
   margin: auto;
 
diff --git a/FrontEnd/src/views/common/dailog/OperationDialog.css b/FrontEnd/src/views/common/dailog/OperationDialog.css
index e69de29b..26c3920b 100644
--- a/FrontEnd/src/views/common/dailog/OperationDialog.css
+++ b/FrontEnd/src/views/common/dailog/OperationDialog.css
@@ -0,0 +1,26 @@
+.cru-operation-dialog-group {
+  display: block;
+  margin: 0.4em 0;
+}
+
+.cru-operation-dialog-label {
+  display: block;
+  font-size: 0.8em;
+  color: var(--cru-primary-color);
+}
+
+.cru-operation-dialog-inline-label {
+  margin-inline-start: 0.5em;
+}
+
+.cru-operation-dialog-error-text {
+  display: block;
+  font-size: 0.8em;
+  color: var(--cru-danger-color);
+}
+
+.cru-operation-dialog-helper-text {
+  display: block;
+  font-size: 0.8em;
+  color: var(--cru-primary-color);
+}
diff --git a/FrontEnd/src/views/common/dailog/OperationDialog.tsx b/FrontEnd/src/views/common/dailog/OperationDialog.tsx
index f394a3d3..083d60da 100644
--- a/FrontEnd/src/views/common/dailog/OperationDialog.tsx
+++ b/FrontEnd/src/views/common/dailog/OperationDialog.tsx
@@ -12,6 +12,7 @@ import LoadingButton from "../button/LoadingButton";
 import Dialog from "./Dialog";
 
 import "./OperationDialog.css";
+import classNames from "classnames";
 
 interface DefaultErrorPromptProps {
   error?: string;
@@ -294,9 +295,17 @@ const OperationDialog = <
 
             if (item.type === "text") {
               return (
-                <div key={index}>
+                <div
+                  key={index}
+                  className={classNames(
+                    "cru-operation-dialog-group",
+                    error != null ? "error" : null
+                  )}
+                >
                   {item.label && (
-                    <label>{convertI18nText(item.label, t)}</label>
+                    <label className="cru-operation-dialog-label">
+                      {convertI18nText(item.label, t)}
+                    </label>
                   )}
                   <input
                     type={item.password === true ? "password" : "text"}
@@ -307,8 +316,16 @@ const OperationDialog = <
                     }}
                     disabled={process}
                   />
-                  {error != null && <div>{error}</div>}
-                  {item.helperText && <div>{t(item.helperText)}</div>}
+                  {error != null && (
+                    <div className="cru-operation-dialog-error-text">
+                      {error}
+                    </div>
+                  )}
+                  {item.helperText && (
+                    <div className="cru-operation-dialog-helper-text">
+                      {t(item.helperText)}
+                    </div>
+                  )}
                 </div>
               );
             } else if (item.type === "bool") {
@@ -327,8 +344,16 @@ const OperationDialog = <
               );
             } else if (item.type === "select") {
               return (
-                <div key={index}>
-                  <label>{convertI18nText(item.label, t)}</label>
+                <div
+                  key={index}
+                  className={classNames(
+                    "cru-operation-dialog-group",
+                    error != null ? "error" : null
+                  )}
+                >
+                  <label className="cru-operation-dialog-label">
+                    {convertI18nText(item.label, t)}
+                  </label>
                   <select
                     value={value as string}
                     onChange={(event) => {
@@ -364,10 +389,13 @@ const OperationDialog = <
                       disabled={process}
                     />
                   ) : null}
-                  <label>{convertI18nText(item.label, t)}</label>
+                  <label className="cru-operation-dialog-inline-label">
+                    {convertI18nText(item.label, t)}
+                  </label>
                   {value !== null && (
                     <TwitterPicker
                       color={value as string}
+                      triangle="hide"
                       onChange={(result) => updateValue(index, result.hex)}
                     />
                   )}
@@ -401,6 +429,7 @@ const OperationDialog = <
             color="secondary"
             outline
             onClick={close}
+            disabled={process}
           />
           <LoadingButton
             color={props.themeColor}
@@ -435,7 +464,7 @@ const OperationDialog = <
       <>
         <div>{content}</div>
         <hr />
-        <div>
+        <div className="cru-dialog-bottom-area">
           <Button text="operationDialog.ok" color="primary" onClick={close} />
         </div>
       </>
@@ -451,7 +480,9 @@ const OperationDialog = <
     <Dialog open={props.open} onClose={close}>
       <h3
         className={
-          props.themeColor != null ? "cru-color-" + props.themeColor : undefined
+          props.themeColor != null
+            ? "cru-color-" + props.themeColor
+            : "cru-color-primary"
         }
       >
         {title}
diff --git a/FrontEnd/src/views/timeline/TimelineDeleteDialog.tsx b/FrontEnd/src/views/timeline/TimelineDeleteDialog.tsx
index aedf4f29..68dedf86 100644
--- a/FrontEnd/src/views/timeline/TimelineDeleteDialog.tsx
+++ b/FrontEnd/src/views/timeline/TimelineDeleteDialog.tsx
@@ -26,7 +26,7 @@ const TimelineDeleteDialog: React.FC<TimelineDeleteDialog> = (props) => {
       inputPrompt={() => {
         return (
           <Trans i18nKey="timeline.deleteDialog.inputPrompt">
-            0<code className="mx-2">{{ name }}</code>2
+            0<code className="mx-2">{{ name: timeline.name }}</code>2
           </Trans>
         );
       }}
-- 
cgit v1.2.3