From 2ff368fde1004286a86f77026916ddb2f5290d2e Mon Sep 17 00:00:00 2001
From: bluecloud <96812901+pitb2022@users.noreply.github.com>
Date: Wed, 11 Oct 2023 13:39:24 +0800
Subject: [PATCH 1/2] fix(DialogBeta): fix handle clickable

---
 src/components/DialogBeta/Handle.tsx        | 25 +++++++++++++++++++++
 src/components/DialogBeta/index.tsx         |  3 ++-
 src/components/DialogBeta/styles.module.css |  2 +-
 3 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 src/components/DialogBeta/Handle.tsx

diff --git a/src/components/DialogBeta/Handle.tsx b/src/components/DialogBeta/Handle.tsx
new file mode 100644
index 0000000000..0f24069538
--- /dev/null
+++ b/src/components/DialogBeta/Handle.tsx
@@ -0,0 +1,25 @@
+import { useIntl } from 'react-intl'
+
+import styles from './styles.module.css'
+
+interface HandleProps {
+  closeDialog: () => void
+}
+
+const Handle: React.FC<HandleProps> = ({ closeDialog, ...props }) => {
+  const intl = useIntl()
+
+  return (
+    <button
+      type="button"
+      className={styles.handle}
+      aria-label={intl.formatMessage({ defaultMessage: 'Close' })}
+      onClick={closeDialog}
+      {...props}
+    >
+      <span className={styles.icon} />
+    </button>
+  )
+}
+
+export default Handle
diff --git a/src/components/DialogBeta/index.tsx b/src/components/DialogBeta/index.tsx
index ee3adc4147..6e3323ce07 100644
--- a/src/components/DialogBeta/index.tsx
+++ b/src/components/DialogBeta/index.tsx
@@ -11,11 +11,11 @@ import { capitalizeFirstLetter, dom } from '~/common/utils'
 import { Media, useOutsideClick } from '~/components'
 
 import { RoundedButton, TextButton } from '../Dialog/Buttons'
-import Handle from '../Dialog/Handle'
 import Header from '../Dialog/Header'
 import Lazy from '../Dialog/Lazy'
 import Content from './Content'
 import Footer from './Footer'
+import Handle from './Handle'
 import styles from './styles.module.css'
 
 export interface DialogBetaOverlayProps {
@@ -74,6 +74,7 @@ const Container: React.FC<
     const topDialog = dialogs[dialogs.length - 1]
     const isTopDialog =
       topDialog && node.current && topDialog.contains(node.current)
+    console.log({ dialogs, topDialog, isTopDialog })
 
     if (!isTopDialog) {
       return
diff --git a/src/components/DialogBeta/styles.module.css b/src/components/DialogBeta/styles.module.css
index a9f0440fab..c9d6b375f1 100644
--- a/src/components/DialogBeta/styles.module.css
+++ b/src/components/DialogBeta/styles.module.css
@@ -60,7 +60,7 @@
   position: absolute;
   top: 0;
   left: 50%;
-  z-index: var(--z-index-dialog);
+  z-index: calc(var(--z-index-dialog) + 1);
   padding: var(--spacing-x-tight);
   transform: translateX(-50%);
 

From f33871a60bc3914446a6a7916c2c364958c38cbb Mon Sep 17 00:00:00 2001
From: bluecloud <96812901+pitb2022@users.noreply.github.com>
Date: Wed, 11 Oct 2023 13:44:08 +0800
Subject: [PATCH 2/2] fix(DialogBeta): remove log

---
 src/components/DialogBeta/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/DialogBeta/index.tsx b/src/components/DialogBeta/index.tsx
index 6e3323ce07..d48a183221 100644
--- a/src/components/DialogBeta/index.tsx
+++ b/src/components/DialogBeta/index.tsx
@@ -74,7 +74,6 @@ const Container: React.FC<
     const topDialog = dialogs[dialogs.length - 1]
     const isTopDialog =
       topDialog && node.current && topDialog.contains(node.current)
-    console.log({ dialogs, topDialog, isTopDialog })
 
     if (!isTopDialog) {
       return