feat: add UI to close about license modals

* Explicit close for about and license modals
* Close about/license models with click outside the modal.

Author: gnoulk

src/AboutModal.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { useModalRef } from "./misc/useModalRef";
 
 import cannonKeys from "./assets/cannonkeys.png";
@@ -173,19 +174,27 @@ const sponsors = [
 ];
 
 export const AboutModal = ({ open, onClose }: AboutModalProps) => {
-  const ref = useModalRef(open);
+  const ref = useModalRef(open, true);
 
   return (
     <dialog
       ref={ref}
-      onClose={onClose}
       className="p-5 rounded-lg border-text-base border min-w-min w-[70vw]"
+      onClose={onClose}
     >
-      <p className="py-1">
-        ZMK Studio is made possible thanks to the generous donation of time from
-        our contributors, as well as the financial sponsorship from the
-        following vendors:
-      </p>
+      <div className="flex justify-between items-start">
+        <p className="py-1 mr-2">
+          ZMK Studio is made possible thanks to the generous donation of time
+          from our contributors, as well as the financial sponsorship from the
+          following vendors:
+        </p>
+        <button
+          className="p-1.5 rounded-md bg-gray-100 text-black hover:bg-gray-300"
+          onClick={onClose}
+        >
+          Close
+        </button>
+      </div>
       <div className="grid gap-2 auto-rows-auto grid-cols-[auto_minmax(min-content,1fr)] justify-items-center items-center">
         {sponsors.map((s) => {
           const heightVariants = {
@@ -195,7 +204,7 @@ export const AboutModal = ({ open, onClose }: AboutModalProps) => {
           };
 
           return (
-            <>
+            <React.Fragment key={s.level}>
               <label>{s.level}</label>
               <div
                 className={`grid grid-rows-1 gap-x-1 auto-cols-fr grid-flow-col justify-items-center items-center ${
@@ -210,7 +219,7 @@ export const AboutModal = ({ open, onClose }: AboutModalProps) => {
                   };
 
                   return (
-                    <a href={v.url} target="_blank">
+                    <a key={v.name} href={v.url} target="_blank">
                       <picture aria-label={v.name}>
                         {v.darkModeImg && (
                           <source
@@ -225,7 +234,7 @@ export const AboutModal = ({ open, onClose }: AboutModalProps) => {
                   );
                 })}
               </div>
-            </>
+            </React.Fragment>
           );
         })}
       </div>

src/misc/LicenseNoticeModal.tsx

@@ -11,19 +11,28 @@ export const LicenseNoticeModal = ({
   open,
   onClose,
 }: LicenseNoticeModalProps) => {
-  const ref = useModalRef(open);
+  const ref = useModalRef(open, true);
+
   return (
     <dialog
       ref={ref}
-      onClose={onClose}
       className="p-5 rounded-lg border-text-base border min-w-min w-[60vw]"
+      onClose={onClose}
     >
       <div>
-        <p>
-          ZMK Studio is released under the open source Apache 2.0 license. A
-          copy of the NOTICE file from the ZMK Studio repository is included
-          here:
-        </p>
+        <div className="flex justify-between items-start">
+          <p className="mr-2">
+            ZMK Studio is released under the open source Apache 2.0 license. A
+            copy of the NOTICE file from the ZMK Studio repository is included
+            here:
+          </p>
+          <button
+            className="p-1.5 rounded-md bg-gray-100 text-black hover:bg-gray-300"
+            onClick={onClose}
+          >
+            Close
+          </button>
+        </div>
         <pre className="m-4 font-mono text-xs">{NOTICE}</pre>
       </div>
     </dialog>

src/misc/useModalRef.ts

@@ -1,7 +1,8 @@
 import { MutableRefObject, useEffect, useRef } from "react";
 
 export function useModalRef(
-  open: boolean
+  open: boolean,
+  closeOnOutsideClick?: boolean,
 ): MutableRefObject<HTMLDialogElement | null> {
   const ref = useRef<HTMLDialogElement | null>(null);
 
@@ -10,10 +11,32 @@ export function useModalRef(
       if (ref.current && !ref.current?.open) {
         ref.current?.showModal();
       }
+      if (closeOnOutsideClick) {
+        const handleClickOutside = (e: MouseEvent) => {
+          const target = e.target as HTMLDialogElement | null;
+          if (!target) return;
+
+          const { top, left, width, height } = target.getBoundingClientRect();
+          const clickedInDialog =
+            top <= e.clientY &&
+            e.clientY <= top + height &&
+            left <= e.clientX &&
+            e.clientX <= left + width;
+
+          if (!clickedInDialog) {
+            target.close();
+          }
+        };
+
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+          document.removeEventListener("mousedown", handleClickOutside);
+        };
+      }
     } else {
       ref.current?.close();
     }
-  }, [open]);
+  }, [open, closeOnOutsideClick]);
 
   return ref;
 }