users can click outside of modal to close the modal for info only modals. Take away that ability for important modals

frontend/src/components/ConditionCheckViewerModal.tsx

@@ -24,6 +24,16 @@ const ConditionCheckViewerModal: React.FC<ConditionCheckViewerModalProps> = ({
   const [selectedImage, setSelectedImage] = useState(0);
   const [loading, setLoading] = useState(false);
 
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onHide();
+    };
+    if (show) {
+      document.addEventListener("keydown", handleKeyDown);
+    }
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [show, onHide]);
+
   useEffect(() => {
     const fetchImageUrls = async () => {
       if (!conditionCheck?.imageFilenames?.length) return;

frontend/src/components/DeclineRentalModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect } from "react";
 import { rentalAPI } from "../services/api";
 import { Rental } from "../types";
 
@@ -65,38 +65,17 @@ const DeclineRentalModal: React.FC<DeclineRentalModalProps> = ({
     onHide();
   };
 
-  const handleBackdropClick = useCallback(
-    (e: React.MouseEvent) => {
-      if (e.target === e.currentTarget && !processing) {
-        handleClose();
-      }
-    },
-    [handleClose, processing]
-  );
-
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent) => {
-      if (e.key === "Escape" && !processing) {
-        handleClose();
-      }
-    },
-    [handleClose, processing]
-  );
-
   useEffect(() => {
     if (show) {
-      document.addEventListener("keydown", handleKeyDown);
       document.body.style.overflow = "hidden";
     } else {
-      document.removeEventListener("keydown", handleKeyDown);
       document.body.style.overflow = "unset";
     }
 
     return () => {
-      document.removeEventListener("keydown", handleKeyDown);
       document.body.style.overflow = "unset";
     };
-  }, [show, handleKeyDown]);
+  }, [show]);
 
   if (!show) return null;
 
@@ -104,7 +83,6 @@ const DeclineRentalModal: React.FC<DeclineRentalModalProps> = ({
     <div
       className="modal d-block"
       style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
-      onClick={handleBackdropClick}
     >
       <div className="modal-dialog modal-dialog-centered">
         <div className="modal-content">

frontend/src/components/RentalCancellationModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect } from "react";
 import { rentalAPI } from "../services/api";
 import { RefundPreview, Rental } from "../types";
 
@@ -129,38 +129,17 @@ const RentalCancellationModal: React.FC<RentalCancellationModalProps> = ({
     return "success";
   };
 
-  const handleBackdropClick = useCallback(
-    (e: React.MouseEvent) => {
-      if (e.target === e.currentTarget) {
-        handleClose();
-      }
-    },
-    [handleClose]
-  );
-
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        handleClose();
-      }
-    },
-    [handleClose]
-  );
-
   useEffect(() => {
     if (show) {
-      document.addEventListener("keydown", handleKeyDown);
       document.body.style.overflow = "hidden";
     } else {
-      document.removeEventListener("keydown", handleKeyDown);
       document.body.style.overflow = "unset";
     }
 
     return () => {
-      document.removeEventListener("keydown", handleKeyDown);
       document.body.style.overflow = "unset";
     };
-  }, [show, handleKeyDown]);
+  }, [show]);
 
   if (!show) return null;
 
@@ -168,7 +147,6 @@ const RentalCancellationModal: React.FC<RentalCancellationModalProps> = ({
     <div
       className="modal d-block"
       style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
-      onClick={handleBackdropClick}
     >
       <div className="modal-dialog modal-lg modal-dialog-centered">
         <div className="modal-content">

frontend/src/components/ReturnStatusModal.tsx

@@ -353,38 +353,17 @@ const ReturnStatusModal: React.FC<ReturnStatusModalProps> = ({
     onHide();
   }, [onHide]);
 
-  const handleBackdropClick = useCallback(
-    (e: React.MouseEvent) => {
-      if (e.target === e.currentTarget) {
-        handleClose();
-      }
-    },
-    [handleClose]
-  );
-
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        handleClose();
-      }
-    },
-    [handleClose]
-  );
-
   useEffect(() => {
     if (show) {
-      document.addEventListener("keydown", handleKeyDown);
       document.body.style.overflow = "hidden";
     } else {
-      document.removeEventListener("keydown", handleKeyDown);
       document.body.style.overflow = "unset";
     }
 
     return () => {
-      document.removeEventListener("keydown", handleKeyDown);
       document.body.style.overflow = "unset";
     };
-  }, [show, handleKeyDown]);
+  }, [show]);
 
   if (!show) return null;
 
@@ -392,7 +371,6 @@ const ReturnStatusModal: React.FC<ReturnStatusModalProps> = ({
     <div
       className="modal d-block"
       style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
-      onClick={handleBackdropClick}
     >
       <div className="modal-dialog modal-lg modal-dialog-centered">
         <div className="modal-content">

frontend/src/components/ReviewDetailsModal.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Rental } from "../types";
 import StarRating from "./StarRating";
 
@@ -15,6 +15,16 @@ const ReviewDetailsModal: React.FC<ReviewDetailsModalProps> = ({
   rental,
   userType,
 }) => {
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    if (show) {
+      document.addEventListener("keydown", handleKeyDown);
+    }
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [show, onClose]);
+
   if (!show) return null;
 
   const formatDateTime = (dateString: string) => {
@@ -29,6 +39,9 @@ const ReviewDetailsModal: React.FC<ReviewDetailsModalProps> = ({
       className="modal d-block"
       tabIndex={-1}
       style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
     >
       <div className="modal-dialog modal-dialog-centered modal-lg">
         <div className="modal-content">

frontend/src/components/SuccessModal.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 interface SuccessModalProps {
   show: boolean;
@@ -7,19 +7,32 @@ interface SuccessModalProps {
   message: string;
 }
 
-const SuccessModal: React.FC<SuccessModalProps> = ({ 
-  show, 
-  onClose, 
+const SuccessModal: React.FC<SuccessModalProps> = ({
+  show,
+  onClose,
   title = "Success!",
-  message 
+  message
 }) => {
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    if (show) {
+      document.addEventListener('keydown', handleKeyDown);
+    }
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [show, onClose]);
+
   if (!show) return null;
 
   return (
-    <div 
-      className="modal d-block" 
-      tabIndex={-1} 
+    <div
+      className="modal d-block"
+      tabIndex={-1}
       style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
     >
       <div className="modal-dialog modal-dialog-centered">
         <div className="modal-content">