feat: implemented clicking outside modals closes them

Author: AlexVOiceover

public/favicon.ico

@@ -129,6 +129,7 @@ const ShareEmailModal: React.FC<{ onClose: () => void }> = ({ onClose }) => {
             margin: '-8px',
             background: '#f9f9f9',
           }}
+          onClick={(e) => e.stopPropagation()}
         >
           {/* Postal stamp decoration */}
           <div className='absolute top-4 right-4 w-16 h-20 border-2 border-gray-400 border-dashed rounded-sm opacity-20 flex items-center justify-center pointer-events-none'>

src/components/modals/ShareEmailModal.tsx

@@ -72,9 +72,23 @@ const UserDataModal: React.FC<UserDataModalProps> = ({ onOpenChange }) => {
     setIsEditingUsername(false);
   };
 
+  // Handler for clicks outside the modal
+  const handleOutsideClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    // Only close if the click was directly on the overlay (not on the modal content)
+    if (e.target === e.currentTarget) {
+      onOpenChange(false);
+    }
+  };
+
   return (
-    <div className='fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-black/50'>
-      <div className='bg-white m-2 sm:m-5 max-w-3xl w-full min-w-[280px] rounded-lg p-0 overflow-hidden shadow-xl'>
+    <div 
+      className='fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-black/50'
+      onClick={handleOutsideClick}
+    >
+      <div 
+        className='bg-white m-2 sm:m-5 max-w-3xl w-full min-w-[280px] rounded-lg p-0 overflow-hidden shadow-xl'
+        onClick={(e) => e.stopPropagation()} // Prevent clicks inside from closing
+      >
         <div className='bg-brand-pink p-2 flex items-center justify-between sm:rounded-t-lg'>
           <h2 className='text-xl font-semibold text-white'>User's Data</h2>
           <button

src/components/modals/UserDataModal.tsx

@@ -10,7 +10,7 @@ const Input = React.forwardRef<
     <input
       type={type}
       className={cn(
-        'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-gray-900 ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
       ref={ref}

src/components/ui/input.tsx

@@ -37,13 +37,17 @@ const SimpleDialogPortal: React.FC<{ children: React.ReactNode }> = ({ children
   return <>{children}</>;
 };
 
-const SimpleDialogOverlay: React.FC<{ className?: string }> = ({ className }) => {
+const SimpleDialogOverlay: React.FC<{ className?: string; onClick?: () => void }> = ({ 
+  className,
+  onClick 
+}) => {
   return (
     <div 
       className={cn(
         'fixed inset-0 z-50 bg-black/80',
         className
-      )} 
+      )}
+      onClick={onClick}
     />
   );
 };
@@ -61,13 +65,19 @@ const SimpleDialogContent = React.forwardRef<HTMLDivElement, SimpleDialogContent
       }, [onOpenAutoFocus]);
     }
 
+    // Stop click propagation to prevent closing the dialog when clicking content
+    const handleContentClick = (e: React.MouseEvent) => {
+      e.stopPropagation();
+    };
+
     return (
       <div
         ref={ref}
         className={cn(
           'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border-0 bg-background p-0 shadow-lg duration-200',
           className
         )}
+        onClick={handleContentClick}
         {...props}
       >
         {children}
@@ -162,7 +172,7 @@ const SimpleDialog: React.FC<SimpleDialogProps> = ({
     <SimpleDialogContext.Provider value={{ isOpen: isDialogOpen, onOpenChange }}>
       {isDialogOpen ? (
         <div className={cn('fixed inset-0 z-50', className)}>
-          <SimpleDialogOverlay />
+          <SimpleDialogOverlay onClick={() => onOpenChange(false)} />
           {children}
         </div>
       ) : (