From ae1b296b5e967d1e329f5a1e6165ca0f05dce0cb Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Fri, 21 Jul 2023 17:25:01 +0800
Subject: ...

---
 FrontEnd/src/views/common/dialog/Dialog.tsx | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

(limited to 'FrontEnd/src/views/common/dialog/Dialog.tsx')

diff --git a/FrontEnd/src/views/common/dialog/Dialog.tsx b/FrontEnd/src/views/common/dialog/Dialog.tsx
index 79a31954..31dd113b 100644
--- a/FrontEnd/src/views/common/dialog/Dialog.tsx
+++ b/FrontEnd/src/views/common/dialog/Dialog.tsx
@@ -1,6 +1,9 @@
 import { ReactNode } from "react";
 import ReactDOM from "react-dom";
 import { CSSTransition } from "react-transition-group";
+import classNames from "classnames";
+
+import { ThemeColor } from "../common";
 
 import "./Dialog.css";
 
@@ -11,14 +14,21 @@ if (optionalPortalElement == null) {
 const portalElement = optionalPortalElement;
 
 interface DialogProps {
-  onClose: () => void;
   open: boolean;
+  onClose: () => void;
+  color?: ThemeColor;
   children?: ReactNode;
   disableCloseOnClickOnOverlay?: boolean;
 }
 
-export default function Dialog(props: DialogProps) {
-  const { open, onClose, children, disableCloseOnClickOnOverlay } = props;
+export default function Dialog({
+  open,
+  onClose,
+  color,
+  children,
+  disableCloseOnClickOnOverlay,
+}: DialogProps) {
+  color = color ?? "primary";
 
   return ReactDOM.createPortal(
     <CSSTransition
@@ -29,7 +39,7 @@ export default function Dialog(props: DialogProps) {
       classNames="cru-dialog"
     >
       <div
-        className="cru-dialog-overlay"
+        className={classNames("cru-dialog-overlay", `cru-${color}`)}
         onPointerDown={
           disableCloseOnClickOnOverlay
             ? undefined
@@ -38,7 +48,7 @@ export default function Dialog(props: DialogProps) {
               }
         }
       >
-        <div className="cru-dialog-background"/>
+        <div className="cru-dialog-background" />
         <div
           className="cru-dialog-container"
           onPointerDown={(e) => e.stopPropagation()}
-- 
cgit v1.2.3

