...

4 files changed, 16 insertions, 11 deletions

diff --git a/FrontEnd/src/pages/setting/index.css b/FrontEnd/src/pages/setting/index.css
index 9458d937..d9cba24f 100644
--- a/FrontEnd/src/pages/setting/index.css
+++ b/FrontEnd/src/pages/setting/index.css
@@ -36,7 +36,6 @@
 

 .setting-item-container:hover {

   background-color: var(--cru-key-container-1-color);

-  border-bottom-color: var(--cru-key-container-1-color);

 }

 

 .setting-item-label-sub {

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()}