- enhanced modal animations

src/components/UI/ModalComponent.tsx

@@ -12,8 +12,16 @@ const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) =
     <Modal
       isOpen={isModalOpen}
       onRequestClose={close}
-      className="bg-[#1e2a38] p-3 rounded-lg shadow-lg w-[95%] mt-[2%] md:w-[60%] h-[100%] md:h-[95%] lg:h-[85%] z-[100] overflow-y-auto"
-      overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100"
+      className="bg-[#1e2a38] p-3 rounded-lg shadow-lg w-[95%] mt-[2%] md:w-[60%] h-[100%] md:h-[95%] lg:h-[80%] z-[100] overflow-y-hidden border border-gray-500"
+      overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100 "
+      style={{
+        overlay: {
+          transition: "opacity 200ms ease-in-out",
+        },
+        content: {
+          transition: "all 200ms ease-in-out",
+        },
+      }}
     >
       {children}
     </Modal>