fixed theme for modals

se-buw · Jun 9, 2024 · b9dab90 · b9dab90
1 parent 0b1c6d9
commit b9dab90
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 8 deletions.
diff --git a/frontend/src/assets/style/Modal.css b/frontend/src/assets/style/Modal.css
@@ -0,0 +1,31 @@
+.modal-content {
+  background-color: var(--background-color);
+  color: var(--primary-text-color);
+}
+
+.modal-header {
+  border-bottom: 1px solid var(--border-color);
+}
+
+.modal-footer {
+  border-top: 1px solid var(--border-color);
+}
+
+.modal-title {
+  color: var(--foreground-color);
+}
+
+.btn-close:hover {
+  color: var(--select-hover);
+}
+
+.modal-body p {
+  color: var(--primary-text-color);
+}
+.modal-header .btn-close {
+  display: none;
+}
+
+.modal-footer .btn {
+  box-shadow: none;
+}
diff --git a/frontend/src/components/Utils/Modals/ConfirmModal.jsx b/frontend/src/components/Utils/Modals/ConfirmModal.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import {
   MDBBtn,
   MDBModal,
@@ -9,7 +9,7 @@ import {
   MDBModalBody,
   MDBModalFooter,
 } from 'mdb-react-ui-kit';
-
+import '../../../assets/style/Modal.css'
 
 const ConfirmModal = ({ isOpen, onClose, title, message, onConfirm }) => {
   const toggleOpen = () => onClose();
@@ -27,13 +27,13 @@ const ConfirmModal = ({ isOpen, onClose, title, message, onConfirm }) => {
         onClose={toggleOpen}
         tabIndex='-1'>
         <MDBModalDialog>
-          <MDBModalContent>
-            <MDBModalHeader>
-              <MDBModalTitle>{title}</MDBModalTitle>
+          <MDBModalContent className='model-content'>
+            <MDBModalHeader className='modal-header'>
+              <MDBModalTitle className='modal-title'>{title}</MDBModalTitle>
               <MDBBtn className='btn-close' color='none' onClick={toggleOpen}></MDBBtn>
             </MDBModalHeader>
-            <MDBModalBody> <p>{message}</p></MDBModalBody>
-            <MDBModalFooter>
+            <MDBModalBody className='modal-body'> <p>{message}</p></MDBModalBody>
+            <MDBModalFooter className='modal-footer'>
               <MDBBtn color='secondary' onClick={toggleOpen}>
                 Close
               </MDBBtn>

diff --git a/frontend/src/components/Utils/Modals/MessageModal.jsx b/frontend/src/components/Utils/Modals/MessageModal.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import {
   MDBBtn,
   MDBModal,