New source found from dndbeyond.com

ddb_main/components/MaxCharactersDialog/MaxCharactersDialog.tsx

@@ -1,65 +1,74 @@
-import { HTMLAttributes, useEffect, useRef } from "react";
+import clsx from "clsx";
 
-import { Button } from "@dndbeyond/ttui/components/Button";
+import CloseIcon from "@dndbeyond/fontawesome-cache/svgs/solid/x.svg";
 
+import { Button } from "../Button";
+import { Dialog, DialogProps } from "../Dialog";
 import { MaxCharactersMessageText } from "../MaxCharactersMessageText";
 import styles from "./styles.module.css";
 
-interface MaxCharactersDialogProps extends HTMLAttributes<HTMLDialogElement> {
+interface MaxCharactersDialogProps
+  extends Omit<DialogProps, "onClose" | "open"> {
   open: boolean;
   onClose: () => void;
   useMyCharactersLink?: boolean;
+  hasLockedCharacters?: boolean;
 }
 
 export const MaxCharactersDialog: React.FC<MaxCharactersDialogProps> = ({
   open,
   onClose,
   useMyCharactersLink,
+  hasLockedCharacters,
+  className,
   ...props
 }) => {
-  const dialogRef = useRef<HTMLDialogElement>(null);
-
-  const handleClickBackdrop = (e) => {
-    const rect = dialogRef.current?.getBoundingClientRect();
-    const isClickInDialog =
-      rect &&
-      rect.top <= e.clientY &&
-      e.clientY <= rect.top + rect.height &&
-      rect.left <= e.clientX &&
-      e.clientX <= rect.left + rect.width;
-
-    if (!isClickInDialog) (dialogRef.current as any)?.close();
-  };
-
-  useEffect(() => {
-    if (open) {
-      // Hacky workaround since showModal() isn't
-      // supported by TypeScript <4.8.3
-      (dialogRef.current as any)?.showModal();
-    } else {
-      // Hacky workaround since close() isn't
-      // supported by TypeScript <4.8.3
-      (dialogRef.current as any)?.close();
-    }
-  }, [onClose, open]);
-
   return (
-    <dialog
-      className={styles.maxCharactersDialog}
-      ref={dialogRef}
-      onClick={handleClickBackdrop}
+    <Dialog
+      className={clsx([styles.dialog, className])}
+      open={open}
+      onClose={onClose}
+      modal
       {...props}
     >
-      <header>
-        <h2 className={styles.dialogTitle}>Your character slots are full</h2>
-      </header>
-      <MaxCharactersMessageText useMyCharactersLink={useMyCharactersLink} />
-      <footer className={styles.dialogFooter}>
-        <Button href="/store/subscribe" variant="outline">
-          Subscribe
+      <header className={styles.header}>
+        <h2 className={styles.title}>Your character slots are full</h2>
+        <Button
+          className={styles.closeButton}
+          variant="tool"
+          onClick={onClose}
+          aria-label="Close Modal"
+        >
+          <CloseIcon />
+        </Button>
+      </header>
+      <div className={styles.content}>
+        <MaxCharactersMessageText
+          hasLockedCharacters={hasLockedCharacters}
+          useMyCharactersLink={useMyCharactersLink}
+        />
+      </div>
+      <footer className={styles.footer}>
+        {!hasLockedCharacters && (
+          <Button
+            className={styles.cardButton}
+            href="/store/subscribe"
+            color="info"
+            size="x-small"
+            variant="outline"
+          >
+            Subscribe
+          </Button>
+        )}
+        <Button
+          className={styles.cardButton}
+          color="info"
+          size="x-small"
+          onClick={onClose}
+        >
+          Close
         </Button>
-        <Button onClick={onClose}>Close</Button>
       </footer>
-    </dialog>
+    </Dialog>
   );
 };