- enhanced modal animations

package.json

@@ -1,7 +1,7 @@
 {
   "name": "in-car-system-fe",
   "private": true,
-  "version": "1.0.17",
+  "version": "1.0.18",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/SightingModal/SightingModal.tsx

@@ -21,6 +21,7 @@ type SightingModalProps = {
 };
 
 const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }: SightingModalProps) => {
+  console.log(sighting);
   const { dispatch } = useAlertHitContext();
 
   const { query, mutation } = useCameraBlackboard();
@@ -147,13 +148,13 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
           {hotlistNames && hotlistNames.length > 0 && (
             <div className="flex flex-col border-b border-gray-600 mb-4">
               <p className="text-gray-300">Hotlists</p>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-x-[90%] lg:gap-x-[15%] w-[50%]">
+              <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-[20%] w-[50%]">
                 {hotlistNames.map((hotlistName, index) => (
-                  <div className="items-center px-2.5 py-0.5 rounded-sm me-2 bg-amber-500 w-55 m-2" key={index}>
+                  <span className="items-center px-2.5 py-0.5 rounded-sm me-2 bg-amber-500 w-50 m-2" key={index}>
                     <p className="font-medium text-2xl break-all text-amber-800">
                       {hotlistName ? hotlistName?.replace(/\.csv$/i, "") : "-"}
                     </p>
-                  </div>
+                  </span>
                 ))}
               </div>
             </div>

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"
+      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"
+      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>

src/components/UI/VersionsModal.tsx

@@ -15,10 +15,10 @@ const VersionsModal = ({ isDevModalOpen, handleClose, data }: VersionsModalProps
 
   return (
     <ModalComponent isModalOpen={isDevModalOpen} close={handleClose}>
-      <div className="flex justify-end">
+      <div className="flex justify-end overflow-auto">
         <button
           onClick={handleClose}
-          className="p-2 border border-gray-600 rounded-md text-gray-200 hover:bg-gray-700 transition mb-4"
+          className="p-2 border border-gray-600 rounded-md text-gray-200 hover:bg-gray-700 transition"
         >
           Close
         </button>

src/context/providers/IntegrationsContextProvider.tsx

@@ -44,7 +44,10 @@ export const IntegrationsProvider = ({ children }: IntegrationsProviderType) =>
         if (catResult?.result) {
           dispatch({ type: "NPEDCATENABLED", payload: catResult.result });
         } else {
-          console.log("Early return: catResult check failed");
+          dispatch({
+            type: "NPEDCATENABLED",
+            payload: { catA: true, catB: true, catC: true, catD: true },
+          });
         }
       } catch (error) {
         console.error("Error in fetchData:", error);

src/index.css

@@ -37,3 +37,33 @@ body {
   stroke-width: 20px;
   stroke-linejoin: round;
 }
+
+/* Modal animations */
+.ReactModal__Overlay {
+  opacity: 0;
+  transition: opacity 200ms ease-in-out;
+}
+
+.ReactModal__Overlay--after-open {
+  opacity: 1;
+}
+
+.ReactModal__Overlay--before-close {
+  opacity: 0;
+}
+
+.ReactModal__Content {
+  transform: scale(0.9) translateY(-20px);
+  opacity: 0;
+  transition: all 200ms ease-in-out;
+}
+
+.ReactModal__Content--after-open {
+  transform: scale(1) translateY(0);
+  opacity: 1;
+}
+
+.ReactModal__Content--before-close {
+  transform: scale(0.9) translateY(-20px);
+  opacity: 0;
+}