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

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