Fixed popup design and refresh list

src/components/Helpers/CustomPopUp/index.jsx

@@ -1,8 +1,14 @@
-import React, { useState } from "react";
-
-const CustomPopUp = ({ name, btn_class, title, children }) => {
-  const [isOpen, setIsOpen] = useState(false);
+import React, { useEffect } from "react";
 
+const CustomPopUp = ({
+  name,
+  btn_class,
+  title,
+  children,
+  isOpen,
+  setIsOpen,
+  modalHandler,
+}) => {
   const handleOpen = () => {
     setIsOpen(true);
   };
@@ -11,6 +17,15 @@ const CustomPopUp = ({ name, btn_class, title, children }) => {
     setIsOpen(false);
   };
 
+  useEffect(() => {
+    if (modalHandler) {
+      document.body.style.overflowY = "hidden";
+    }
+    return () => {
+      document.body.style.overflowY = "unset";
+    };
+  });
+
   return (
     <>
       <button onClick={handleOpen} className={btn_class}>
@@ -18,15 +33,26 @@ const CustomPopUp = ({ name, btn_class, title, children }) => {
       </button>
 
       {isOpen && (
-        <div className={`fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50 transition-opacity ${isOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}`}>
-          <div className="bg-white rounded-md p-6 shadow-lg transform transition-all duration-300 ease-in-out lg:max-w-[400px] lg:min-h-[300px] max-w-[300px] min-h-[200px] w-full">
-            <div className="w-full flex justify-end">
-              <button onClick={handleClose}>
-                <CloseIcon />
-              </button>
+        <div className="modal-com">
+          <div
+            className={`fixed top-0 left-0 w-full lg:h-[100vh] h-full bg-black bg-opacity-40 backdrop-filter backdrop-blur-sm z-50`}
+          ></div>
+          <div className="children-element fixed lg:h-100vh h-full z-[99999999999999] w-full lg:w-auto ">
+            <div className="bg-white rounded-md p-6 shadow-lg transform transition-all duration-300 ease-in-out dark:bg-dark-white logout-modal-wrapper lg:w-[460px] lg:h-auto  max-[467px]:max-w-[26rem]">
+              <div className="w-full flex items-center justify-between lg:px-4 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple">
+                {title && (
+                  <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide cursor-default">
+                    {title}
+                  </h1>
+                )}
+                <button onClick={handleClose}>
+                  <CloseIcon />
+                </button>
+              </div>
+              <div className="logout-modal-body w-full flex flex-col items-center px-4 py-8">
+                {children && children}
+              </div>
             </div>
-            {title && <h2 className="text-xl font-bold mb-2">{title}</h2>}
-            {children}
           </div>
         </div>
       )}

src/components/Helpers/ModalCom.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 
-export default function ModalCom({ action, children, situation }) {
+export default function ModalCom({ action, children, situation, isOpen }) {
   useEffect(() => {
     if (situation) {
       document.body.style.overflowY = "hidden";
@@ -13,7 +13,7 @@ export default function ModalCom({ action, children, situation }) {
   return (
     <div className="modal-com">
       <div
-        onClick={action}
+        onClick={action || isOpen}
         className="fixed top-0 left-0 w-full lg:h-[100vh] h-full bg-black bg-opacity-40 backdrop-filter backdrop-blur-sm z-50"
       ></div>
       <div className="children-element fixed lg:h-100vh h-full z-[99999999999999] w-full lg:w-auto ">