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/Card.css          |  4 ----
 FrontEnd/src/views/common/dialog/Dialog.css |  2 +-
 FrontEnd/src/views/common/dialog/Dialog.tsx | 20 +++++++++++++++-----
 3 files changed, 16 insertions(+), 10 deletions(-)

(limited to 'FrontEnd/src/views')

diff --git a/FrontEnd/src/views/common/Card.css b/FrontEnd/src/views/common/Card.css
index 5b3dbbe9..f4cdc31c 100644
--- a/FrontEnd/src/views/common/Card.css
+++ b/FrontEnd/src/views/common/Card.css
@@ -5,7 +5,3 @@
   border-color: var(--cru-key-container-color);
   transition: all 0.3s;
 }
-
-.cru-card:hover {
-  border-color: var(--cru-key-1-color);
-}
\ No newline at end of file
diff --git a/FrontEnd/src/views/common/dialog/Dialog.css b/FrontEnd/src/views/common/dialog/Dialog.css
index 108bd823..99e1a516 100644
--- a/FrontEnd/src/views/common/dialog/Dialog.css
+++ b/FrontEnd/src/views/common/dialog/Dialog.css
@@ -27,7 +27,7 @@
 
   margin: auto;
 
-  border: var(--cru-primary-color) 1px solid;
+  border: var(--cru-key-container-color) 1px solid;
   border-radius: 5px;
   padding: 1.5em;
   background-color: var(--cru-surface-color);
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