Replaced faulty lightbox with custom basic lightbox

package-lock.json

@@ -19,7 +19,7 @@
         "nodemailer": "^6.7.3",
         "react": "17.0.2",
         "react-dom": "17.0.2",
-        "react-image-lightbox": "^5.1.4",
+        "react-hotkeys-hook": "^3.4.4",
         "react-swipeable": "^6.2.1",
         "turndown": "^7.1.1"
       },
@@ -4986,11 +4986,6 @@
       "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==",
       "dev": true
     },
-    "node_modules/exenv": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
-      "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
-    },
     "node_modules/external-editor": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
@@ -5570,6 +5565,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/hotkeys-js": {
+      "version": "3.8.7",
+      "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.8.7.tgz",
+      "integrity": "sha512-ckAx3EkUr5XjDwjEHDorHxRO2Kb7z6Z2Sxul4MbBkN8Nho7XDslQsgMJT+CiJ5Z4TgRxxvKHEpuLE3imzqy4Lg=="
+    },
     "node_modules/http-cache-semantics": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
@@ -7589,6 +7589,7 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -7695,46 +7696,23 @@
         "react": "17.0.2"
       }
     },
-    "node_modules/react-image-lightbox": {
+    "node_modules/react-hotkeys-hook": {
-      "version": "5.1.4",
+      "version": "3.4.4",
-      "resolved": "https://registry.npmjs.org/react-image-lightbox/-/react-image-lightbox-5.1.4.tgz",
+      "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-3.4.4.tgz",
-      "integrity": "sha512-kTiAODz091bgT7SlWNHab0LSMZAPJtlNWDGKv7pLlLY1krmf7FuG1zxE0wyPpeA8gPdwfr3cu6sPwZRqWsc3Eg==",
+      "integrity": "sha512-vaORq07rWgmuF3owWRhgFV/3VL8/l2q9lz0WyVEddJnWTtKW+AOgU5YgYKuwN6h6h7bCcLG3MFsJIjCrM/5DvQ==",
       "dependencies": {
-        "prop-types": "^15.7.2",
+        "hotkeys-js": "3.8.7"
-        "react-modal": "^3.11.1"
       },
       "peerDependencies": {
-        "react": "16.x || 17.x",
+        "react": ">=16.8.1",
-        "react-dom": "16.x || 17.x"
+        "react-dom": ">=16.8.1"
       }
     },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-    },
+      "dev": true
-    "node_modules/react-lifecycles-compat": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
-    },
-    "node_modules/react-modal": {
-      "version": "3.14.4",
-      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.14.4.tgz",
-      "integrity": "sha512-8surmulejafYCH9wfUmFyj4UfbSJwjcgbS9gf3oOItu4Hwd6ivJyVBETI0yHRhpJKCLZMUtnhzk76wXTsNL6Qg==",
-      "dependencies": {
-        "exenv": "^1.2.0",
-        "prop-types": "^15.7.2",
-        "react-lifecycles-compat": "^3.0.0",
-        "warning": "^4.0.3"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "peerDependencies": {
-        "react": "^0.14.0 || ^15.0.0 || ^16 || ^17",
-        "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17"
-      }
     },
     "node_modules/react-swipeable": {
       "version": "6.2.1",
@@ -8728,14 +8706,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/warning": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
-      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
-      "dependencies": {
-        "loose-envify": "^1.0.0"
-      }
-    },
     "node_modules/wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
@@ -12852,11 +12822,6 @@
       "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==",
       "dev": true
     },
-    "exenv": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
-      "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
-    },
     "external-editor": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
@@ -13295,6 +13260,11 @@
         "has-symbols": "^1.0.2"
       }
     },
+    "hotkeys-js": {
+      "version": "3.8.7",
+      "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.8.7.tgz",
+      "integrity": "sha512-ckAx3EkUr5XjDwjEHDorHxRO2Kb7z6Z2Sxul4MbBkN8Nho7XDslQsgMJT+CiJ5Z4TgRxxvKHEpuLE3imzqy4Lg=="
+    },
     "http-cache-semantics": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
@@ -14746,6 +14716,7 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
       "requires": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -14819,35 +14790,19 @@
         "scheduler": "^0.20.2"
       }
     },
-    "react-image-lightbox": {
+    "react-hotkeys-hook": {
-      "version": "5.1.4",
+      "version": "3.4.4",
-      "resolved": "https://registry.npmjs.org/react-image-lightbox/-/react-image-lightbox-5.1.4.tgz",
+      "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-3.4.4.tgz",
-      "integrity": "sha512-kTiAODz091bgT7SlWNHab0LSMZAPJtlNWDGKv7pLlLY1krmf7FuG1zxE0wyPpeA8gPdwfr3cu6sPwZRqWsc3Eg==",
+      "integrity": "sha512-vaORq07rWgmuF3owWRhgFV/3VL8/l2q9lz0WyVEddJnWTtKW+AOgU5YgYKuwN6h6h7bCcLG3MFsJIjCrM/5DvQ==",
       "requires": {
-        "prop-types": "^15.7.2",
+        "hotkeys-js": "3.8.7"
-        "react-modal": "^3.11.1"
       }
     },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-    },
+      "dev": true
-    "react-lifecycles-compat": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
-    },
-    "react-modal": {
-      "version": "3.14.4",
-      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.14.4.tgz",
-      "integrity": "sha512-8surmulejafYCH9wfUmFyj4UfbSJwjcgbS9gf3oOItu4Hwd6ivJyVBETI0yHRhpJKCLZMUtnhzk76wXTsNL6Qg==",
-      "requires": {
-        "exenv": "^1.2.0",
-        "prop-types": "^15.7.2",
-        "react-lifecycles-compat": "^3.0.0",
-        "warning": "^4.0.3"
-      }
     },
     "react-swipeable": {
       "version": "6.2.1",
@@ -15579,14 +15534,6 @@
       "integrity": "sha512-41BrgH+dIbCFXClcSapVs5M6GkENd3gQOJpEfPDNa71LsUGMXDL0jMWpI/Rh7WhX+Aalfz2TTS3Zt5pUsbnhLg==",
       "dev": true
     },
-    "warning": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
-      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
-      "requires": {
-        "loose-envify": "^1.0.0"
-      }
-    },
     "wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",

package.json

@@ -26,7 +26,7 @@
     "nodemailer": "^6.7.3",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-image-lightbox": "^5.1.4",
+    "react-hotkeys-hook": "^3.4.4",
     "react-swipeable": "^6.2.1",
     "turndown": "^7.1.1"
   },

src/components/LightBox.tsx

@@ -1,6 +1,8 @@
-import { useMediaMobile } from "hooks/useMediaQuery";
+import { Dispatch, SetStateAction, useCallback } from "react";
-import { Dispatch, SetStateAction } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
-import Lightbox from "react-image-lightbox";
+import Img from "./Img";
+import Button from "./Inputs/Button";
+import Popup from "./Popup";
 
 interface Props {
   setState:
@@ -14,25 +16,46 @@ interface Props {
 
 export default function LightBox(props: Props): JSX.Element {
   const { state, setState, images, index, setIndex } = props;
-  const mobile = useMediaMobile();
+  const handlePrevious = useCallback(() => {
+    setIndex((previousIndex) => (previousIndex > 0 ? previousIndex - 1 : 0));
+  }, [setIndex]);
+
+  const handleNext = useCallback(() => {
+    setIndex((previousIndex) =>
+      previousIndex < images.length - 1 ? previousIndex + 1 : images.length - 1
+    );
+  }, [images.length, setIndex]);
+
+  useHotkeys("left", handlePrevious);
+  useHotkeys("right", handleNext);
 
   return (
     <>
       {state && (
-        <Lightbox
+        <Popup setState={setState} state={state} fillViewport>
-          reactModalProps={{
+          <div
-            parentSelector: () => document.getElementById("MyAppLayout"),
+            className="grid grid-cols-[4em,1fr,4em] place-items-center
-          }}
+            gap-4 w-full h-full overflow-hidden"
-          mainSrc={images[index]}
+          >
-          prevSrc={index > 0 ? images[index - 1] : undefined}
+            <div>
-          nextSrc={index < images.length ? images[index + 1] : undefined}
+              {index > 0 && (
-          onMovePrevRequest={() => setIndex(index - 1)}
+                <Button onClick={handlePrevious}>
-          onMoveNextRequest={() => setIndex(index + 1)}
+                  <span className="material-icons">chevron_left</span>
-          imageCaption=""
+                </Button>
-          imageTitle=""
+              )}
-          onCloseRequest={() => setState(false)}
+            </div>
-          imagePadding={mobile ? 0 : 70}
+
-        />
+            <Img className="max-h-full" image={images[index]} />
+
+            <div>
+              {index < images.length - 1 && (
+                <Button onClick={handleNext}>
+                  <span className="material-icons">chevron_right</span>
+                </Button>
+              )}
+            </div>
+          </div>
+        </Popup>
       )}
     </>
   );

src/components/Popup.tsx

@@ -34,7 +34,7 @@ export default function Popup(props: Props): JSX.Element {
           props.state ? "scale-100" : "scale-0"
         } ${
           props.fillViewport
-            ? "absolute inset-10 top-20"
+            ? "absolute inset-10"
             : "relative max-h-[80vh] overflow-y-auto mobile:w-[85vw]"
         } ${
           props.hideBackground