From 234167b7493ca2988a8fabdcd46a238f1a305e26 Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Thu, 5 Oct 2023 18:36:51 +0300
Subject: [PATCH] close image modal on image click

---
 packages/app/src/Element/Deck/SpotlightMedia.tsx | 2 +-
 packages/app/src/Element/Modal.tsx               | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/Element/Deck/SpotlightMedia.tsx b/packages/app/src/Element/Deck/SpotlightMedia.tsx
index 1c748bb2..0b3bf439 100644
--- a/packages/app/src/Element/Deck/SpotlightMedia.tsx
+++ b/packages/app/src/Element/Deck/SpotlightMedia.tsx
@@ -74,7 +74,7 @@ export function SpotlightMedia(props: SpotlightMediaProps) {
 
 export function SpotlightMediaModal(props: SpotlightMediaProps) {
   return (
-    <Modal id="spotlight" onClose={props.onClose} className="spotlight">
+    <Modal id="spotlight" onClick={props.onClose} onClose={props.onClose} className="spotlight">
       <SpotlightMedia {...props} />
     </Modal>
   );
diff --git a/packages/app/src/Element/Modal.tsx b/packages/app/src/Element/Modal.tsx
index d67b3598..7415caef 100644
--- a/packages/app/src/Element/Modal.tsx
+++ b/packages/app/src/Element/Modal.tsx
@@ -5,6 +5,7 @@ export interface ModalProps {
   id: string;
   className?: string;
   onClose?: (e: React.MouseEvent | KeyboardEvent) => void;
+  onClick?: (e: React.MouseEvent) => void;
   children: ReactNode;
 }
 
@@ -28,7 +29,10 @@ export default function Modal(props: ModalProps) {
   return (
     <div className={`modal${props.className ? ` ${props.className}` : ""}`} onClick={props.onClose}>
       <div className="modal-body" onClick={props.onClose}>
-        <div onClick={e => e.stopPropagation()}>{props.children}</div>
+        <div onClick={e => {
+          e.stopPropagation();
+          props.onClick?.(e);
+        }}>{props.children}</div>
       </div>
     </div>
   );