refactor: rewrite the Dialog component

packages/keybr-pages-browser/lib/themes/ThemeSwitcher.tsx

@@ -35,7 +35,6 @@ export function ThemeSwitcher() {
     <div className={styles.root}>
       {design && (
         <Dialog
-          backdrop={true}
           onClose={() => {
             setDesign(false);
           }}

packages/keybr-widget/lib/components/dialog/Dialog.module.less

@@ -1,11 +1,15 @@
 .root {
+  display: flex;
+  position: fixed;
+  inset: 0;
+  z-index: 1;
+  align-items: center;
+  justify-content: center;
+}
+
+.content {
   padding: 2rem;
-  border: none;
   color: var(--Popup__color);
   background-color: var(--Popup__background-color);
   box-shadow: var(--Popup__box-shadow);
 }
-
-.backdrop::backdrop {
-  backdrop-filter: blur(5px);
-}

packages/keybr-widget/lib/components/dialog/Dialog.tsx

@@ -1,36 +1,28 @@
-import { clsx } from "clsx";
-import { type ReactNode, useEffect, useRef } from "react";
+import { type ReactNode } from "react";
+import { Backdrop } from "../popup/index.ts";
 import { Portal } from "../portal/index.ts";
 import { DialogContext } from "./context.ts";
 import * as styles from "./Dialog.module.less";
 import { type DialogProps } from "./Dialog.types.ts";
 
-export function Dialog({
-  backdrop,
-  children,
-  onClose,
-}: DialogProps): ReactNode {
-  const ref = useRef<HTMLDialogElement>(null);
-  useEffect(() => {
-    ref.current?.showModal();
-  }, []);
+export function Dialog({ children, onClose }: DialogProps): ReactNode {
   return (
     <Portal>
-      <dialog
-        ref={ref}
-        className={clsx(styles.root, backdrop && styles.backdrop)}
-      >
-        <DialogContext.Provider
-          value={{
-            closeDialog: () => {
-              ref.current?.close();
-              onClose?.();
-            },
-          }}
-        >
-          {children}
-        </DialogContext.Provider>
-      </dialog>
+      <Backdrop>
+        <div className={styles.root}>
+          <div className={styles.content}>
+            <DialogContext.Provider
+              value={{
+                closeDialog: () => {
+                  onClose?.();
+                },
+              }}
+            >
+              {children}
+            </DialogContext.Provider>
+          </div>
+        </div>
+      </Backdrop>
     </Portal>
   );
 }

packages/keybr-widget/lib/components/dialog/Dialog.types.ts

@@ -1,7 +1,6 @@
 import { type ReactNode } from "react";
 
 export type DialogProps = {
-  readonly backdrop?: boolean;
   readonly children: ReactNode;
   readonly onClose?: () => void;
 };