fix onclose functionality

cornell-dti · Nov 6, 2024 · f265bcb · f265bcb
1 parent 5cbde28
commit f265bcb
Showing 1 changed file with 21 additions and 4 deletions.
diff --git a/frontend/src/components/PhotoCarousel/PhotoCarousel.tsx b/frontend/src/components/PhotoCarousel/PhotoCarousel.tsx
@@ -31,10 +31,11 @@ const useStyles = makeStyles((theme) => ({
     justifyContent: 'center',
     flexDirection: 'column',
     overflow: 'visible',
-    height: '90dvh',
-    [theme.breakpoints.down('lg')]: {
+    height: '80vh',
+    [theme.breakpoints.down('md')]: {
       height: '60dvw',
     },
+    cursor: 'pointer',
   },
 }));
 const ImageBox = styled(Box)({
@@ -47,6 +48,7 @@ const ImageBox = styled(Box)({
     objectFit: 'contain',
     width: 'calc(69dvw - 96px)',
     margin: 'auto',
+    cursor: 'default',
   },
 });
 
@@ -73,20 +75,35 @@ const PhotoCarousel = ({ photos, open, onClose, startIndex }: Props) => {
       onClose={onClose}
       fullWidth
       maxWidth={false}
+      style={{ cursor: 'pointer' }}
       PaperProps={{ className: modalBackground }}
     >
-      <Container>
+      <Container
+        onClick={(e) => {
+          const target = e.target as HTMLElement;
+          if (
+            target.tagName !== 'IMG' &&
+            target.tagName !== 'BUTTON' &&
+            target.tagName !== 'svg' &&
+            target.tagName !== 'circle'
+          ) {
+            console.log(target.tagName);
+            onClose?.();
+          }
+        }}
+      >
         <Carousel
           autoPlay={false}
           className={carouselContainer}
           navButtonsAlwaysVisible={true}
           navButtonsProps={{ className: navButton }}
           indicatorContainerProps={{ className: indicatorContainer }}
           index={startIndex}
+          animation="fade"
         >
           {photos.map((src, index) => {
             return (
-              <ImageBox key={index}>
+              <ImageBox key={index} style={{ backgroundColor: 'rgba(0, 0, 0, 0.05)' }}>
                 <CardMedia component="img" src={src} />
               </ImageBox>
             );