From 69b37119ef108d37888c74cc8917e61aebcd83a6 Mon Sep 17 00:00:00 2001
From: Touha Zohair <touha98@gmail.com>
Date: Sun, 31 Dec 2023 21:20:07 +0600
Subject: [PATCH 01/25] basic dialog component

---
 .../layout-elements/Dialog/Dialog.tsx         | 69 +++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 src/components/layout-elements/Dialog/Dialog.tsx

diff --git a/src/components/layout-elements/Dialog/Dialog.tsx b/src/components/layout-elements/Dialog/Dialog.tsx
new file mode 100644
index 000000000..7dc3242a7
--- /dev/null
+++ b/src/components/layout-elements/Dialog/Dialog.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+import { border, makeClassName, tremorTwMerge } from "lib";
+import { Dialog as HeadlessuiDialog } from "@headlessui/react";
+import { RootStylesContext } from "contexts";
+
+const makeDisplayClassName = makeClassName("Dialog");
+
+type Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never };
+type XOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
+
+export type DialogProps = React.HTMLAttributes<HTMLDivElement> & {
+  open: boolean;
+  onClose: (val: boolean) => void;
+} & XOR<{ unmount?: boolean }, { static?: boolean }>;
+
+const Dialog = React.forwardRef<HTMLDivElement, DialogProps>(
+  (
+    props = {
+      open: false,
+      onClose: () => {},
+      unmount: true,
+    },
+    ref,
+  ) => {
+    const { children, className, ...other } = props;
+    const rootStyles =
+      React.useContext(RootStylesContext) ?? tremorTwMerge(border.sm.all, "rounded-tremor-default");
+
+    return (
+      <HeadlessuiDialog
+        as="div"
+        ref={ref}
+        {...other}
+        className={tremorTwMerge(
+          makeDisplayClassName("root"),
+          //light
+          "bg-tremor-background border-tremor-border",
+          // dark
+          "dark:bg-dark-tremor-background dark:border-dark-tremor-border",
+          // dialog
+          "relative z-50",
+          className,
+        )}
+      >
+        <div className="fixed inset-0 bg-dark-tremor-background/20 dark:bg-tremor-background/20 opacity-50"></div>
+
+        <div className="fixed inset-0 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center">
+            <HeadlessuiDialog.Panel
+              className={tremorTwMerge(
+                "w-full max-w-xl transform overflow-hidden",
+                "bg-tremor-background border-tremor-border",
+                "dark:bg-dark-tremor-background dark:border-dark-tremor-border",
+                "p-6 text-left align-middle shadow-tremor transition-all rounded-xl",
+                rootStyles,
+              )}
+            >
+              {children}
+            </HeadlessuiDialog.Panel>
+          </div>
+        </div>
+      </HeadlessuiDialog>
+    );
+  },
+);
+
+Dialog.displayName = "Dialog";
+
+export default Dialog;

From 720ce66404107ef483d805c7d7d7a7402cf0fa91 Mon Sep 17 00:00:00 2001
From: Touha Zohair <touha98@gmail.com>
Date: Sun, 31 Dec 2023 21:20:14 +0600
Subject: [PATCH 02/25] export dialog

---
 src/components/layout-elements/Dialog/index.ts | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 src/components/layout-elements/Dialog/index.ts

diff --git a/src/components/layout-elements/Dialog/index.ts b/src/components/layout-elements/Dialog/index.ts
new file mode 100644
index 000000000..3dff0a8ab
--- /dev/null
+++ b/src/components/layout-elements/Dialog/index.ts
@@ -0,0 +1 @@
+export { default as Dialog } from "./Dialog";

From 1d4fed7ff476fb19a84c26ca8d0159c1784136d3 Mon Sep 17 00:00:00 2001
From: Touha Zohair <touha98@gmail.com>
Date: Sun, 31 Dec 2023 21:45:12 +0600
Subject: [PATCH 03/25] separate root element

---
 .../layout-elements/Dialog/Dialog.tsx         | 80 +++++++------------
 1 file changed, 29 insertions(+), 51 deletions(-)

diff --git a/src/components/layout-elements/Dialog/Dialog.tsx b/src/components/layout-elements/Dialog/Dialog.tsx
index 7dc3242a7..6112eecb7 100644
--- a/src/components/layout-elements/Dialog/Dialog.tsx
+++ b/src/components/layout-elements/Dialog/Dialog.tsx
@@ -1,7 +1,6 @@
 import React from "react";
-import { border, makeClassName, tremorTwMerge } from "lib";
+import { makeClassName, tremorTwMerge } from "lib";
 import { Dialog as HeadlessuiDialog } from "@headlessui/react";
-import { RootStylesContext } from "contexts";
 
 const makeDisplayClassName = makeClassName("Dialog");
 
@@ -13,56 +12,35 @@ export type DialogProps = React.HTMLAttributes<HTMLDivElement> & {
   onClose: (val: boolean) => void;
 } & XOR<{ unmount?: boolean }, { static?: boolean }>;
 
-const Dialog = React.forwardRef<HTMLDivElement, DialogProps>(
-  (
-    props = {
-      open: false,
-      onClose: () => {},
-      unmount: true,
-    },
-    ref,
-  ) => {
-    const { children, className, ...other } = props;
-    const rootStyles =
-      React.useContext(RootStylesContext) ?? tremorTwMerge(border.sm.all, "rounded-tremor-default");
-
-    return (
-      <HeadlessuiDialog
-        as="div"
-        ref={ref}
-        {...other}
-        className={tremorTwMerge(
-          makeDisplayClassName("root"),
-          //light
-          "bg-tremor-background border-tremor-border",
-          // dark
-          "dark:bg-dark-tremor-background dark:border-dark-tremor-border",
-          // dialog
-          "relative z-50",
-          className,
-        )}
-      >
-        <div className="fixed inset-0 bg-dark-tremor-background/20 dark:bg-tremor-background/20 opacity-50"></div>
-
-        <div className="fixed inset-0 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center">
-            <HeadlessuiDialog.Panel
-              className={tremorTwMerge(
-                "w-full max-w-xl transform overflow-hidden",
-                "bg-tremor-background border-tremor-border",
-                "dark:bg-dark-tremor-background dark:border-dark-tremor-border",
-                "p-6 text-left align-middle shadow-tremor transition-all rounded-xl",
-                rootStyles,
-              )}
-            >
-              {children}
-            </HeadlessuiDialog.Panel>
-          </div>
+const Dialog = React.forwardRef<HTMLDivElement, DialogProps>((props, ref) => {
+  const { children, className, ...other } = props;
+
+  return (
+    <HeadlessuiDialog
+      as="div"
+      ref={ref}
+      {...other}
+      className={tremorTwMerge(
+        makeDisplayClassName("root"),
+        //light
+        "bg-tremor-background border-tremor-border",
+        // dark
+        "dark:bg-dark-tremor-background dark:border-dark-tremor-border",
+        // dialog
+        "relative z-50",
+        className,
+      )}
+    >
+      <div className="fixed inset-0 bg-dark-tremor-background/20 dark:bg-tremor-background/20 opacity-50"></div>
+
+      <div className="fixed inset-0 overflow-y-auto">
+        <div className="flex min-h-full items-center justify-center p-4 text-center">
+          {children}
         </div>
-      </HeadlessuiDialog>
-    );
-  },
-);
+      </div>
+    </HeadlessuiDialog>
+  );
+});
 
 Dialog.displayName = "Dialog";
 

From 8b3e5f44b574a664f534dd9dad80b54bcade4952 Mon Sep 17 00:00:00 2001
From: Touha Zohair <touha98@gmail.com>
Date: Sun, 31 Dec 2023 21:45:32 +0600
Subject: [PATCH 04/25] dialogpanel componenet

---
 .../layout-elements/Dialog/DialogPanel.tsx    | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 src/components/layout-elements/Dialog/DialogPanel.tsx

diff --git a/src/components/layout-elements/Dialog/DialogPanel.tsx b/src/components/layout-elements/Dialog/DialogPanel.tsx
new file mode 100644
index 000000000..cf1c00732
--- /dev/null
+++ b/src/components/layout-elements/Dialog/DialogPanel.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { border, makeClassName, tremorTwMerge } from "lib";
+import { Dialog as HeadlessuiDialog } from "@headlessui/react";
+import { RootStylesContext } from "contexts";
+
+const makeDisplayClassName = makeClassName("Dialog");
+
+export type DialogPanelProps = React.HTMLAttributes<HTMLDivElement>;
+
+const Dialog = React.forwardRef<HTMLDivElement, DialogPanelProps>((props, ref) => {
+  const { children, className, ...other } = props;
+  const rootStyles =
+    React.useContext(RootStylesContext) ?? tremorTwMerge(border.sm.all, "rounded-tremor-default");
+
+  return (
+    <HeadlessuiDialog.Panel
+      ref={ref}
+      className={tremorTwMerge(
+        makeDisplayClassName("panel"),
+        "w-full max-w-xl transform overflow-hidden, rounded-tremor-default",
+        "bg-tremor-background border-tremor-border",
+        "dark:bg-dark-tremor-background dark:border-dark-tremor-border",
+        "p-6 text-left align-middle shadow-tremor transition-all rounded-xl",
+        rootStyles,
+        className,
+      )}
+      {...other}
+    >
+      {children}
+    </HeadlessuiDialog.Panel>
+  );
+});
+
+Dialog.displayName = "Dialog";
+
+export default Dialog;

From f1343c0063c386b2427fcefb43b39804fa67cada Mon Sep 17 00:00:00 2001
From: Touha Zohair <touha98@gmail.com>
Date: Sun, 31 Dec 2023 21:45:45 +0600
Subject: [PATCH 05/25] export dialogpanel component

---
 src/components/layout-elements/Dialog/index.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/layout-elements/Dialog/index.ts b/src/components/layout-elements/Dialog/index.ts
index 3dff0a8ab..945dcab0a 100644
--- a/src/components/layout-elements/Dialog/index.ts
+++ b/src/components/layout-elements/Dialog/index.ts
@@ -1 +1,2 @@
-export { default as Dialog } from "./Dialog";
+export { default as Dialog, type DialogProps } from "./Dialog";
+export { default as DialogPanel, type DialogPanelProps } from "./DialogPanel";

From 6dd063cb91ba5dcdb635743e4bc7d45dd6317a35 Mon Sep 17 00:00:00 2001
From: Touha Zohair <touha98@gmail.com>
Date: Sun, 31 Dec 2023 21:50:27 +0600
Subject: [PATCH 06/25] Refactor DialogPanel styles

---
 src/components/layout-elements/Dialog/DialogPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/layout-elements/Dialog/DialogPanel.tsx b/src/components/layout-elements/Dialog/DialogPanel.tsx
index cf1c00732..d5f7588a5 100644
--- a/src/components/layout-elements/Dialog/DialogPanel.tsx
+++ b/src/components/layout-elements/Dialog/DialogPanel.tsx
@@ -20,7 +20,7 @@ const Dialog = React.forwardRef<HTMLDivElement, DialogPanelProps>((props, ref) =
         "w-full max-w-xl transform overflow-hidden, rounded-tremor-default",
         "bg-tremor-background border-tremor-border",
         "dark:bg-dark-tremor-background dark:border-dark-tremor-border",
-        "p-6 text-left align-middle shadow-tremor transition-all rounded-xl",
+        "text-left align-middle shadow-tremor transition-all p-6",
         rootStyles,
         className,
       )}

From b1ab987d8c5e2a666a948c8c8d4ff5aaedc47fc9 Mon Sep 17 00:00:00 2001
From: Touha Zohair <touha98@gmail.com>
Date: Sun, 31 Dec 2023 21:52:25 +0600
Subject: [PATCH 07/25] Refactor dialog display class name

---
 src/components/layout-elements/Dialog/Dialog.tsx      | 2 +-
 src/components/layout-elements/Dialog/DialogPanel.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/layout-elements/Dialog/Dialog.tsx b/src/components/layout-elements/Dialog/Dialog.tsx
index 6112eecb7..da86e4b6a 100644
--- a/src/components/layout-elements/Dialog/Dialog.tsx
+++ b/src/components/layout-elements/Dialog/Dialog.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { makeClassName, tremorTwMerge } from "lib";
 import { Dialog as HeadlessuiDialog } from "@headlessui/react";
 
-const makeDisplayClassName = makeClassName("Dialog");
+const makeDisplayClassName = makeClassName("dialog");
 
 type Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never };
 type XOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
diff --git a/src/components/layout-elements/Dialog/DialogPanel.tsx b/src/components/layout-elements/Dialog/DialogPanel.tsx
index d5f7588a5..93fa93848 100644
--- a/src/components/layout-elements/Dialog/DialogPanel.tsx
+++ b/src/components/layout-elements/Dialog/DialogPanel.tsx
@@ -3,7 +3,7 @@ import { border, makeClassName, tremorTwMerge } from "lib";
 import { Dialog as HeadlessuiDialog } from "@headlessui/react";
 import { RootStylesContext } from "contexts";
 
-const makeDisplayClassName = makeClassName("Dialog");
+const makeDisplayClassName = makeClassName("dialog");
 
 export type DialogPanelProps = React.HTMLAttributes<HTMLDivElement>;
 
@@ -17,7 +17,7 @@ const Dialog = React.forwardRef<HTMLDivElement, DialogPanelProps>((props, ref) =
       ref={ref}
       className={tremorTwMerge(
         makeDisplayClassName("panel"),
-        "w-full max-w-xl transform overflow-hidden, rounded-tremor-default",
+        "w-full max-w-xl transform overflow-hidden",
         "bg-tremor-background border-tremor-border",
         "dark:bg-dark-tremor-background dark:border-dark-tremor-border",
         "text-left align-middle shadow-tremor transition-all p-6",

From 6357685ac4159e4663440ac680720a7a7d7e8d89 Mon Sep 17 00:00:00 2001
From: Touha Zohair <touha98@gmail.com>
Date: Sun, 31 Dec 2023 21:56:39 +0600
Subject: [PATCH 08/25] Fix export  Dialog to DialogPanel

---
 src/components/layout-elements/Dialog/DialogPanel.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/layout-elements/Dialog/DialogPanel.tsx b/src/components/layout-elements/Dialog/DialogPanel.tsx
index 93fa93848..02f7699d3 100644
--- a/src/components/layout-elements/Dialog/DialogPanel.tsx
+++ b/src/components/layout-elements/Dialog/DialogPanel.tsx
@@ -7,7 +7,7 @@ const makeDisplayClassName = makeClassName("dialog");
 
 export type DialogPanelProps = React.HTMLAttributes<HTMLDivElement>;
 
-const Dialog = React.forwardRef<HTMLDivElement, DialogPanelProps>((props, ref) => {
+const DialogPanel = React.forwardRef<HTMLDivElement, DialogPanelProps>((props, ref) => {
   const { children, className, ...other } = props;
   const rootStyles =
     React.useContext(RootStylesContext) ?? tremorTwMerge(border.sm.all, "rounded-tremor-default");
@@ -31,6 +31,6 @@ const Dialog = React.forwardRef<HTMLDivElement, DialogPanelProps>((props, ref) =
   );
 });
 
-Dialog.displayName = "Dialog";
+DialogPanel.displayName = "DialogPanel";
 
-export default Dialog;
+export default DialogPanel;

From 102729786ec48eff3f645caaee7f7a851ae1cf38 Mon Sep 17 00:00:00 2001
From: Touha Zohair <touha98@gmail.com>
Date: Sun, 31 Dec 2023 23:21:39 +0600
Subject: [PATCH 09/25] Update Dialog and DialogPanel styles

---
 src/components/layout-elements/Dialog/Dialog.tsx      | 2 +-
 src/components/layout-elements/Dialog/DialogPanel.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/layout-elements/Dialog/Dialog.tsx b/src/components/layout-elements/Dialog/Dialog.tsx
index da86e4b6a..9c13ea782 100644
--- a/src/components/layout-elements/Dialog/Dialog.tsx
+++ b/src/components/layout-elements/Dialog/Dialog.tsx
@@ -31,7 +31,7 @@ const Dialog = React.forwardRef<HTMLDivElement, DialogProps>((props, ref) => {
         className,
       )}
     >
-      <div className="fixed inset-0 bg-dark-tremor-background/20 dark:bg-tremor-background/20 opacity-50"></div>
+      <div className="fixed backdrop-blur-sm inset-0 bg-tremor-background/30 dark:bg-dark-tremor-background/30 opacity-50"></div>
 
       <div className="fixed inset-0 overflow-y-auto">
         <div className="flex min-h-full items-center justify-center p-4 text-center">
diff --git a/src/components/layout-elements/Dialog/DialogPanel.tsx b/src/components/layout-elements/Dialog/DialogPanel.tsx
index 02f7699d3..4b7e1c2ba 100644
--- a/src/components/layout-elements/Dialog/DialogPanel.tsx
+++ b/src/components/layout-elements/Dialog/DialogPanel.tsx
@@ -18,8 +18,8 @@ const DialogPanel = React.forwardRef<HTMLDivElement, DialogPanelProps>((props, r
       className={tremorTwMerge(
         makeDisplayClassName("panel"),
         "w-full max-w-xl transform overflow-hidden",
-        "bg-tremor-background border-tremor-border",
-        "dark:bg-dark-tremor-background dark:border-dark-tremor-border",
+        "bg-tremor-background",
+        "dark:bg-dark-tremor-background",
         "text-left align-middle shadow-tremor transition-all p-6",
         rootStyles,
         className,

From d73a8d9e6a19d4107099ea9480f8e27d8458879e Mon Sep 17 00:00:00 2001
From: Touha Zohair <touha98@gmail.com>
Date: Mon, 1 Jan 2024 01:45:36 +0600
Subject: [PATCH 10/25] overlayClassName

---
 src/components/layout-elements/Dialog/Dialog.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/layout-elements/Dialog/Dialog.tsx b/src/components/layout-elements/Dialog/Dialog.tsx
index 9c13ea782..5d8f3e894 100644
--- a/src/components/layout-elements/Dialog/Dialog.tsx
+++ b/src/components/layout-elements/Dialog/Dialog.tsx
@@ -10,10 +10,11 @@ type XOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T
 export type DialogProps = React.HTMLAttributes<HTMLDivElement> & {
   open: boolean;
   onClose: (val: boolean) => void;
+  overlayClassName?: string;
 } & XOR<{ unmount?: boolean }, { static?: boolean }>;
 
 const Dialog = React.forwardRef<HTMLDivElement, DialogProps>((props, ref) => {
-  const { children, className, ...other } = props;
+  const { children, className, overlayClassName, ...other } = props;
 
   return (
     <HeadlessuiDialog
@@ -31,7 +32,13 @@ const Dialog = React.forwardRef<HTMLDivElement, DialogProps>((props, ref) => {
         className,
       )}
     >
-      <div className="fixed backdrop-blur-sm inset-0 bg-tremor-background/30 dark:bg-dark-tremor-background/30 opacity-50"></div>
+      <div
+        className={tremorTwMerge(
+          "fixed inset-0",
+          "bg-tremor-background/20 dark:bg-dark-tremor-background/20 backdrop-blur-sm",
+          overlayClassName,
+        )}
+      ></div>
 
       <div className="fixed inset-0 overflow-y-auto">
         <div className="flex min-h-full items-center justify-center p-4 text-center">

From 99c7fad08d4635b0b0b1c9fb7d73b33f516d4e8a Mon Sep 17 00:00:00 2001
From: Touha Zohair <touha98@gmail.com>
Date: Mon, 1 Jan 2024 09:56:33 +0600
Subject: [PATCH 11/25] transition added

---
 .../layout-elements/Dialog/Dialog.tsx         | 61 ++++++++++---------
 .../layout-elements/Dialog/DialogPanel.tsx    | 40 +++++++-----
 2 files changed, 57 insertions(+), 44 deletions(-)

diff --git a/src/components/layout-elements/Dialog/Dialog.tsx b/src/components/layout-elements/Dialog/Dialog.tsx
index 5d8f3e894..a32a182ad 100644
--- a/src/components/layout-elements/Dialog/Dialog.tsx
+++ b/src/components/layout-elements/Dialog/Dialog.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { makeClassName, tremorTwMerge } from "lib";
-import { Dialog as HeadlessuiDialog } from "@headlessui/react";
+import { Dialog as HeadlessuiDialog, Transition } from "@headlessui/react";
 
 const makeDisplayClassName = makeClassName("dialog");
 
@@ -17,35 +17,38 @@ const Dialog = React.forwardRef<HTMLDivElement, DialogProps>((props, ref) => {
   const { children, className, overlayClassName, ...other } = props;
 
   return (
-    <HeadlessuiDialog
-      as="div"
-      ref={ref}
-      {...other}
-      className={tremorTwMerge(
-        makeDisplayClassName("root"),
-        //light
-        "bg-tremor-background border-tremor-border",
-        // dark
-        "dark:bg-dark-tremor-background dark:border-dark-tremor-border",
-        // dialog
-        "relative z-50",
-        className,
-      )}
-    >
-      <div
-        className={tremorTwMerge(
-          "fixed inset-0",
-          "bg-tremor-background/20 dark:bg-dark-tremor-background/20 backdrop-blur-sm",
-          overlayClassName,
-        )}
-      ></div>
-
-      <div className="fixed inset-0 overflow-y-auto">
-        <div className="flex min-h-full items-center justify-center p-4 text-center">
-          {children}
+    <Transition as={React.Fragment} appear show={props.open}>
+      <HeadlessuiDialog
+        as="div"
+        ref={ref}
+        {...other}
+        className={tremorTwMerge(makeDisplayClassName("root"), "relative z-50", className)}
+      >
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div
+            className={tremorTwMerge(
+              "fixed inset-0 backdrop-blur-sm",
+              "bg-tremor-background/20 dark:bg-dark-tremor-background/20",
+              overlayClassName,
+            )}
+          ></div>
+        </Transition.Child>
+
+        <div className="fixed inset-0 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center">
+            {children}
+          </div>
         </div>
-      </div>
-    </HeadlessuiDialog>
+      </HeadlessuiDialog>
+    </Transition>
   );
 });
 
diff --git a/src/components/layout-elements/Dialog/DialogPanel.tsx b/src/components/layout-elements/Dialog/DialogPanel.tsx
index 4b7e1c2ba..9d8377ab0 100644
--- a/src/components/layout-elements/Dialog/DialogPanel.tsx
+++ b/src/components/layout-elements/Dialog/DialogPanel.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { border, makeClassName, tremorTwMerge } from "lib";
-import { Dialog as HeadlessuiDialog } from "@headlessui/react";
+import { Dialog as HeadlessuiDialog, Transition } from "@headlessui/react";
 import { RootStylesContext } from "contexts";
 
 const makeDisplayClassName = makeClassName("dialog");
@@ -13,21 +13,31 @@ const DialogPanel = React.forwardRef<HTMLDivElement, DialogPanelProps>((props, r
     React.useContext(RootStylesContext) ?? tremorTwMerge(border.sm.all, "rounded-tremor-default");
 
   return (
-    <HeadlessuiDialog.Panel
-      ref={ref}
-      className={tremorTwMerge(
-        makeDisplayClassName("panel"),
-        "w-full max-w-xl transform overflow-hidden",
-        "bg-tremor-background",
-        "dark:bg-dark-tremor-background",
-        "text-left align-middle shadow-tremor transition-all p-6",
-        rootStyles,
-        className,
-      )}
-      {...other}
+    <Transition.Child
+      as={React.Fragment}
+      enter="ease-out duration-300"
+      enterFrom="opacity-0 scale-95"
+      enterTo="opacity-100 scale-100"
+      leave="ease-in duration-200"
+      leaveFrom="opacity-100 scale-100"
+      leaveTo="opacity-0 scale-95"
     >
-      {children}
-    </HeadlessuiDialog.Panel>
+      <HeadlessuiDialog.Panel
+        ref={ref}
+        className={tremorTwMerge(
+          makeDisplayClassName("panel"),
+          "w-full max-w-xl transform overflow-hidden",
+          "bg-tremor-background",
+          "dark:bg-dark-tremor-background",
+          "align-middle shadow-tremor transition-all p-6",
+          rootStyles,
+          className,
+        )}
+        {...other}
+      >
+        {children}
+      </HeadlessuiDialog.Panel>
+    </Transition.Child>
   );
 });
 

From 33f59ff7bf9853fa7ad3a5031ebf06a7dba58afc Mon Sep 17 00:00:00 2001
From: Touha Zohair <touha98@gmail.com>
Date: Mon, 1 Jan 2024 09:58:31 +0600
Subject: [PATCH 12/25] refactot style

---
 src/components/layout-elements/Dialog/DialogPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/layout-elements/Dialog/DialogPanel.tsx b/src/components/layout-elements/Dialog/DialogPanel.tsx
index 9d8377ab0..4b82103f2 100644
--- a/src/components/layout-elements/Dialog/DialogPanel.tsx
+++ b/src/components/layout-elements/Dialog/DialogPanel.tsx
@@ -29,7 +29,7 @@ const DialogPanel = React.forwardRef<HTMLDivElement, DialogPanelProps>((props, r
           "w-full max-w-xl transform overflow-hidden",
           "bg-tremor-background",
           "dark:bg-dark-tremor-background",
-          "align-middle shadow-tremor transition-all p-6",
+          "text-left align-middle shadow-tremor transition-all p-6",
           rootStyles,
           className,
         )}

From 4b9d0849f802a3eccbb928215b2eee8a94b7d4b8 Mon Sep 17 00:00:00 2001
From: Touha Zohair <touha98@gmail.com>
Date: Mon, 1 Jan 2024 10:25:48 +0600
Subject: [PATCH 13/25] Dialog panel default text color set

---
 src/components/layout-elements/Dialog/Dialog.tsx  |  2 +-
 .../layout-elements/Dialog/DialogPanel.tsx        | 15 +++++++++------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/layout-elements/Dialog/Dialog.tsx b/src/components/layout-elements/Dialog/Dialog.tsx
index a32a182ad..6c8bbcffb 100644
--- a/src/components/layout-elements/Dialog/Dialog.tsx
+++ b/src/components/layout-elements/Dialog/Dialog.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { makeClassName, tremorTwMerge } from "lib";
 import { Dialog as HeadlessuiDialog, Transition } from "@headlessui/react";
+import { makeClassName, tremorTwMerge } from "lib";
 
 const makeDisplayClassName = makeClassName("dialog");
 
diff --git a/src/components/layout-elements/Dialog/DialogPanel.tsx b/src/components/layout-elements/Dialog/DialogPanel.tsx
index 4b82103f2..ee6cc06d5 100644
--- a/src/components/layout-elements/Dialog/DialogPanel.tsx
+++ b/src/components/layout-elements/Dialog/DialogPanel.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { border, makeClassName, tremorTwMerge } from "lib";
 import { Dialog as HeadlessuiDialog, Transition } from "@headlessui/react";
+import { border, makeClassName, spacing, tremorTwMerge } from "lib";
 import { RootStylesContext } from "contexts";
 
 const makeDisplayClassName = makeClassName("dialog");
@@ -10,7 +10,8 @@ export type DialogPanelProps = React.HTMLAttributes<HTMLDivElement>;
 const DialogPanel = React.forwardRef<HTMLDivElement, DialogPanelProps>((props, ref) => {
   const { children, className, ...other } = props;
   const rootStyles =
-    React.useContext(RootStylesContext) ?? tremorTwMerge(border.sm.all, "rounded-tremor-default");
+    React.useContext(RootStylesContext) ??
+    tremorTwMerge(border.sm.all, spacing.threeXl.paddingAll, "rounded-tremor-default");
 
   return (
     <Transition.Child
@@ -26,10 +27,12 @@ const DialogPanel = React.forwardRef<HTMLDivElement, DialogPanelProps>((props, r
         ref={ref}
         className={tremorTwMerge(
           makeDisplayClassName("panel"),
-          "w-full max-w-xl transform overflow-hidden",
-          "bg-tremor-background",
-          "dark:bg-dark-tremor-background",
-          "text-left align-middle shadow-tremor transition-all p-6",
+          // light
+          "bg-tremor-background  text-tremor-content",
+          // dark
+          "dark:bg-dark-tremor-background dark:text-dark-tremor-content",
+          // common
+          "w-full max-w-xl transform overflow-hidden text-left align-middle shadow-tremor transition-all",
           rootStyles,
           className,
         )}

From 0b9b12cbde65279bc43da0de50109326a80810b9 Mon Sep 17 00:00:00 2001
From: Touha Zohair <touha98@gmail.com>
Date: Mon, 1 Jan 2024 10:26:32 +0600
Subject: [PATCH 14/25] dialog story added

---
 .../layout-elements/Dialog.stories.tsx        | 55 +++++++++++++++++++
 .../layout-elements/helpers/SimpleDialog.tsx  | 29 ++++++++++
 2 files changed, 84 insertions(+)
 create mode 100644 src/stories/layout-elements/Dialog.stories.tsx
 create mode 100644 src/stories/layout-elements/helpers/SimpleDialog.tsx

diff --git a/src/stories/layout-elements/Dialog.stories.tsx b/src/stories/layout-elements/Dialog.stories.tsx
new file mode 100644
index 000000000..462b3201e
--- /dev/null
+++ b/src/stories/layout-elements/Dialog.stories.tsx
@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Dialog } from "components/layout-elements/Dialog";
+import SimpleDialog from "./helpers/SimpleDialog";
+
+const meta: Meta<typeof Dialog> = {
+  title: "UI/Layout/Dialog",
+  component: Dialog,
+  parameters: {
+    sourceLink:
+      "https://github.com/tremorlabs/tremor/tree/main/src/components/layout-elements/Dialog",
+    docs: {
+      description: {
+        component: "Dialogs are used to display content in a layer above the app.",
+      },
+      source: {
+        code: `
+import { useState } from "react";
+import { Dialog, DialogPanel, Button, Title } from "@tremor/react";
+
+export const SimpleDialog = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+        <>
+            <div className="text-center">
+                <Button onClick={() => setIsOpen(true)}>Open Dialog</Button>
+            </div>
+            <Dialog open={isOpen} onClose={(val) => setIsOpen(val)}>
+            <DialogPanel className="w-full max-w-sm">
+                <Title className="mb-3">Account Creted Successfully</Title>
+                Your account has been created successfully. You can now login to your account. For more
+                information, please contact us.
+                <div className="mt-3">
+                <Button variant="light" onClick={() => setIsOpen(false)}>
+                    Got it!
+                </Button>
+                </div>
+            </DialogPanel>
+            </Dialog>
+        </>
+    );
+}; 
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Dialog>;
+
+export const Default: Story = {
+  render: SimpleDialog,
+  parameters: {},
+};
diff --git a/src/stories/layout-elements/helpers/SimpleDialog.tsx b/src/stories/layout-elements/helpers/SimpleDialog.tsx
new file mode 100644
index 000000000..c33ab25a0
--- /dev/null
+++ b/src/stories/layout-elements/helpers/SimpleDialog.tsx
@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+import { Dialog, DialogPanel } from "components/layout-elements/Dialog";
+import { Button, Title } from "components";
+
+const SimpleDialog = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <>
+      <div className="text-center">
+        <Button variant="primary" onClick={() => setIsOpen(true)}>
+          Open Dialog
+        </Button>
+      </div>
+      <Dialog open={isOpen} onClose={(val) => setIsOpen(val)} static={true}>
+        <DialogPanel className="w-full max-w-sm">
+          <Title className="mb-3">Account Creted Successfully</Title>
+          Your account has been created successfully. You can now login to your account. For more
+          information, please contact us.
+          <div className="mt-3">
+            <Button variant="light" onClick={() => setIsOpen(false)}>
+              Got it!
+            </Button>
+          </div>
+        </DialogPanel>
+      </Dialog>
+    </>
+  );
+};
+export default SimpleDialog;

From ed5f7a4cdf8d72af2147b15bb954c554c5182e1e Mon Sep 17 00:00:00 2001
From: Touha Zohair <touha98@gmail.com>
Date: Mon, 1 Jan 2024 10:29:55 +0600
Subject: [PATCH 15/25] Panel ring added

---
 src/components/layout-elements/Dialog/DialogPanel.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/layout-elements/Dialog/DialogPanel.tsx b/src/components/layout-elements/Dialog/DialogPanel.tsx
index ee6cc06d5..85a8f3afa 100644
--- a/src/components/layout-elements/Dialog/DialogPanel.tsx
+++ b/src/components/layout-elements/Dialog/DialogPanel.tsx
@@ -28,11 +28,11 @@ const DialogPanel = React.forwardRef<HTMLDivElement, DialogPanelProps>((props, r
         className={tremorTwMerge(
           makeDisplayClassName("panel"),
           // light
-          "bg-tremor-background  text-tremor-content",
+          "bg-tremor-background  text-tremor-content ring-tremor-ring",
           // dark
-          "dark:bg-dark-tremor-background dark:text-dark-tremor-content",
+          "dark:bg-dark-tremor-background dark:text-dark-tremor-content dark:ring-dark-tremor-ring",
           // common
-          "w-full max-w-xl transform overflow-hidden text-left align-middle shadow-tremor transition-all",
+          "w-full max-w-xl overflow-hidden text-left align-middle ring-1 shadow-tremor transition-all transform",
           rootStyles,
           className,
         )}

From b4185ff2f1cdbd661029b7fe644bec3692344ad4 Mon Sep 17 00:00:00 2001
From: Touha Zohair <touha98@gmail.com>
Date: Mon, 1 Jan 2024 11:02:48 +0600
Subject: [PATCH 16/25] unit testing dialog component

---
 src/tests/layout-elements/Dialog.test.tsx | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 src/tests/layout-elements/Dialog.test.tsx

diff --git a/src/tests/layout-elements/Dialog.test.tsx b/src/tests/layout-elements/Dialog.test.tsx
new file mode 100644
index 000000000..8d4d12819
--- /dev/null
+++ b/src/tests/layout-elements/Dialog.test.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { act, render } from "@testing-library/react";
+
+import { Dialog, DialogPanel } from "components/layout-elements/Dialog";
+
+describe("Dialog", () => {
+  test("renders the Dialog component", async () => {
+    const { findByText } = render(
+      <Dialog open onClose={() => {}}>
+        <DialogPanel>Test</DialogPanel>
+      </Dialog>,
+    );
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 300));
+    });
+    const message = await findByText("Test");
+    expect(message.textContent).toBe("Test");
+  });
+});

From 8fe1215b35f18359dc7e0b03ec979e7368c4dcd1 Mon Sep 17 00:00:00 2001
From: Touha Zohair <touha98@gmail.com>
Date: Mon, 1 Jan 2024 11:29:10 +0600
Subject: [PATCH 17/25] overlay bg updated

---
 src/components/layout-elements/Dialog/Dialog.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/layout-elements/Dialog/Dialog.tsx b/src/components/layout-elements/Dialog/Dialog.tsx
index 6c8bbcffb..55e64c27d 100644
--- a/src/components/layout-elements/Dialog/Dialog.tsx
+++ b/src/components/layout-elements/Dialog/Dialog.tsx
@@ -34,11 +34,7 @@ const Dialog = React.forwardRef<HTMLDivElement, DialogProps>((props, ref) => {
           leaveTo="opacity-0"
         >
           <div
-            className={tremorTwMerge(
-              "fixed inset-0 backdrop-blur-sm",
-              "bg-tremor-background/20 dark:bg-dark-tremor-background/20",
-              overlayClassName,
-            )}
+            className={tremorTwMerge("fixed inset-0 bg-gray-900 bg-opacity-25", overlayClassName)}
           ></div>
         </Transition.Child>
 

From 0237a5cc36520e8a4c4bbafe49e3b435766c5189 Mon Sep 17 00:00:00 2001
From: Touha Zohair <touha98@gmail.com>
Date: Mon, 1 Jan 2024 11:29:33 +0600
Subject: [PATCH 18/25] dialog border removed

---
 src/components/layout-elements/Dialog/DialogPanel.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/layout-elements/Dialog/DialogPanel.tsx b/src/components/layout-elements/Dialog/DialogPanel.tsx
index 85a8f3afa..b2a8a8fc8 100644
--- a/src/components/layout-elements/Dialog/DialogPanel.tsx
+++ b/src/components/layout-elements/Dialog/DialogPanel.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Dialog as HeadlessuiDialog, Transition } from "@headlessui/react";
-import { border, makeClassName, spacing, tremorTwMerge } from "lib";
+import { makeClassName, spacing, tremorTwMerge } from "lib";
 import { RootStylesContext } from "contexts";
 
 const makeDisplayClassName = makeClassName("dialog");
@@ -11,7 +11,7 @@ const DialogPanel = React.forwardRef<HTMLDivElement, DialogPanelProps>((props, r
   const { children, className, ...other } = props;
   const rootStyles =
     React.useContext(RootStylesContext) ??
-    tremorTwMerge(border.sm.all, spacing.threeXl.paddingAll, "rounded-tremor-default");
+    tremorTwMerge(spacing.threeXl.paddingAll, "rounded-tremor-default");
 
   return (
     <Transition.Child
@@ -28,11 +28,11 @@ const DialogPanel = React.forwardRef<HTMLDivElement, DialogPanelProps>((props, r
         className={tremorTwMerge(
           makeDisplayClassName("panel"),
           // light
-          "bg-tremor-background  text-tremor-content ring-tremor-ring",
+          "bg-tremor-background  text-tremor-content",
           // dark
-          "dark:bg-dark-tremor-background dark:text-dark-tremor-content dark:ring-dark-tremor-ring",
+          "dark:bg-dark-tremor-background dark:text-dark-tremor-content",
           // common
-          "w-full max-w-xl overflow-hidden text-left align-middle ring-1 shadow-tremor transition-all transform",
+          "w-full max-w-xl overflow-hidden text-left align-middle ring-1 ring-tremor shadow-tremor transition-all transform",
           rootStyles,
           className,
         )}

From 59ad3c8dfa849d3c7823b0a895a76f9e1c793cf4 Mon Sep 17 00:00:00 2001
From: Touha Zohair <touha98@gmail.com>
Date: Mon, 1 Jan 2024 11:37:44 +0600
Subject: [PATCH 19/25] export Dialog component from layout elements

---
 src/components/layout-elements/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/layout-elements/index.ts b/src/components/layout-elements/index.ts
index 3dcdb29c7..c92f948a4 100644
--- a/src/components/layout-elements/index.ts
+++ b/src/components/layout-elements/index.ts
@@ -3,3 +3,4 @@ export * from "./Card";
 export * from "./Divider";
 export * from "./Flex";
 export * from "./Grid";
+export * from "./Dialog";

From d411fc38bdbf5983296ff036fce857a79c92e693 Mon Sep 17 00:00:00 2001
From: Touha Zohair <touha98@gmail.com>
Date: Mon, 1 Jan 2024 11:39:34 +0600
Subject: [PATCH 20/25] refactor imports

---
 src/stories/layout-elements/Dialog.stories.tsx       | 2 +-
 src/stories/layout-elements/helpers/SimpleDialog.tsx | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/stories/layout-elements/Dialog.stories.tsx b/src/stories/layout-elements/Dialog.stories.tsx
index 462b3201e..6539f28a3 100644
--- a/src/stories/layout-elements/Dialog.stories.tsx
+++ b/src/stories/layout-elements/Dialog.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Dialog } from "components/layout-elements/Dialog";
+import { Dialog } from "components";
 import SimpleDialog from "./helpers/SimpleDialog";
 
 const meta: Meta<typeof Dialog> = {
diff --git a/src/stories/layout-elements/helpers/SimpleDialog.tsx b/src/stories/layout-elements/helpers/SimpleDialog.tsx
index c33ab25a0..259c961c0 100644
--- a/src/stories/layout-elements/helpers/SimpleDialog.tsx
+++ b/src/stories/layout-elements/helpers/SimpleDialog.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from "react";
-import { Dialog, DialogPanel } from "components/layout-elements/Dialog";
-import { Button, Title } from "components";
+import { Dialog, DialogPanel, Button, Title } from "components";
 
 const SimpleDialog = () => {
   const [isOpen, setIsOpen] = useState(false);

From 058d99d13c35b8a1f9f4ac923134d77b812d614e Mon Sep 17 00:00:00 2001
From: Touha Zohair <touha98@gmail.com>
Date: Mon, 1 Jan 2024 11:41:04 +0600
Subject: [PATCH 21/25] Update import for Dialog components

---
 src/tests/layout-elements/Dialog.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tests/layout-elements/Dialog.test.tsx b/src/tests/layout-elements/Dialog.test.tsx
index 8d4d12819..4058ed172 100644
--- a/src/tests/layout-elements/Dialog.test.tsx
+++ b/src/tests/layout-elements/Dialog.test.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { act, render } from "@testing-library/react";
 
-import { Dialog, DialogPanel } from "components/layout-elements/Dialog";
+import { Dialog, DialogPanel } from "components";
 
 describe("Dialog", () => {
   test("renders the Dialog component", async () => {

From 2c1a4fcaaf56796b30b58238049ed986601ab783 Mon Sep 17 00:00:00 2001
From: severinlandolt <sev.landolt@gmail.com>
Date: Fri, 5 Jan 2024 02:57:40 +0100
Subject: [PATCH 22/25] Story fixes

---
 .../layout-elements/Dialog/DialogPanel.tsx    |  2 +-
 .../layout-elements/Dialog.stories.tsx        | 34 -------------------
 .../layout-elements/helpers/SimpleDialog.tsx  |  2 +-
 3 files changed, 2 insertions(+), 36 deletions(-)

diff --git a/src/components/layout-elements/Dialog/DialogPanel.tsx b/src/components/layout-elements/Dialog/DialogPanel.tsx
index b2a8a8fc8..e18cf86a8 100644
--- a/src/components/layout-elements/Dialog/DialogPanel.tsx
+++ b/src/components/layout-elements/Dialog/DialogPanel.tsx
@@ -32,7 +32,7 @@ const DialogPanel = React.forwardRef<HTMLDivElement, DialogPanelProps>((props, r
           // dark
           "dark:bg-dark-tremor-background dark:text-dark-tremor-content",
           // common
-          "w-full max-w-xl overflow-hidden text-left align-middle ring-1 ring-tremor shadow-tremor transition-all transform",
+          "w-full max-w-xl overflow-hidden text-left align-middle ring-1 ring-tremor-border shadow-tremor transition-all transform",
           rootStyles,
           className,
         )}
diff --git a/src/stories/layout-elements/Dialog.stories.tsx b/src/stories/layout-elements/Dialog.stories.tsx
index 6539f28a3..ec5ab7f74 100644
--- a/src/stories/layout-elements/Dialog.stories.tsx
+++ b/src/stories/layout-elements/Dialog.stories.tsx
@@ -9,40 +9,6 @@ const meta: Meta<typeof Dialog> = {
   parameters: {
     sourceLink:
       "https://github.com/tremorlabs/tremor/tree/main/src/components/layout-elements/Dialog",
-    docs: {
-      description: {
-        component: "Dialogs are used to display content in a layer above the app.",
-      },
-      source: {
-        code: `
-import { useState } from "react";
-import { Dialog, DialogPanel, Button, Title } from "@tremor/react";
-
-export const SimpleDialog = () => {
-    const [isOpen, setIsOpen] = useState(false);
-    return (
-        <>
-            <div className="text-center">
-                <Button onClick={() => setIsOpen(true)}>Open Dialog</Button>
-            </div>
-            <Dialog open={isOpen} onClose={(val) => setIsOpen(val)}>
-            <DialogPanel className="w-full max-w-sm">
-                <Title className="mb-3">Account Creted Successfully</Title>
-                Your account has been created successfully. You can now login to your account. For more
-                information, please contact us.
-                <div className="mt-3">
-                <Button variant="light" onClick={() => setIsOpen(false)}>
-                    Got it!
-                </Button>
-                </div>
-            </DialogPanel>
-            </Dialog>
-        </>
-    );
-}; 
-        `,
-      },
-    },
   },
 };
 
diff --git a/src/stories/layout-elements/helpers/SimpleDialog.tsx b/src/stories/layout-elements/helpers/SimpleDialog.tsx
index 259c961c0..439ba7a20 100644
--- a/src/stories/layout-elements/helpers/SimpleDialog.tsx
+++ b/src/stories/layout-elements/helpers/SimpleDialog.tsx
@@ -12,7 +12,7 @@ const SimpleDialog = () => {
       </div>
       <Dialog open={isOpen} onClose={(val) => setIsOpen(val)} static={true}>
         <DialogPanel className="w-full max-w-sm">
-          <Title className="mb-3">Account Creted Successfully</Title>
+          <Title className="mb-3">Account Created Successfully</Title>
           Your account has been created successfully. You can now login to your account. For more
           information, please contact us.
           <div className="mt-3">

From 90ee3643923e12ec38007080cd15120f3031f262 Mon Sep 17 00:00:00 2001
From: christopherkindl <53372002+christopherkindl@users.noreply.github.com>
Date: Fri, 5 Jan 2024 15:18:56 +0100
Subject: [PATCH 23/25] add: styling

---
 src/components/layout-elements/Dialog/Dialog.tsx      | 9 +++++----
 src/components/layout-elements/Dialog/DialogPanel.tsx | 6 +++---
 src/stories/layout-elements/helpers/SimpleDialog.tsx  | 2 +-
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/layout-elements/Dialog/Dialog.tsx b/src/components/layout-elements/Dialog/Dialog.tsx
index 55e64c27d..28297ab97 100644
--- a/src/components/layout-elements/Dialog/Dialog.tsx
+++ b/src/components/layout-elements/Dialog/Dialog.tsx
@@ -34,14 +34,15 @@ const Dialog = React.forwardRef<HTMLDivElement, DialogProps>((props, ref) => {
           leaveTo="opacity-0"
         >
           <div
-            className={tremorTwMerge("fixed inset-0 bg-gray-900 bg-opacity-25", overlayClassName)}
+            className={tremorTwMerge(
+              "fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity",
+              overlayClassName,
+            )}
           ></div>
         </Transition.Child>
 
         <div className="fixed inset-0 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center">
-            {children}
-          </div>
+          <div className="flex min-h-full items-center justify-center p-4">{children}</div>
         </div>
       </HeadlessuiDialog>
     </Transition>
diff --git a/src/components/layout-elements/Dialog/DialogPanel.tsx b/src/components/layout-elements/Dialog/DialogPanel.tsx
index e18cf86a8..02636c303 100644
--- a/src/components/layout-elements/Dialog/DialogPanel.tsx
+++ b/src/components/layout-elements/Dialog/DialogPanel.tsx
@@ -28,11 +28,11 @@ const DialogPanel = React.forwardRef<HTMLDivElement, DialogPanelProps>((props, r
         className={tremorTwMerge(
           makeDisplayClassName("panel"),
           // light
-          "bg-tremor-background  text-tremor-content",
+          "bg-tremor-background  text-tremor-content ring-tremor-ring",
           // dark
-          "dark:bg-dark-tremor-background dark:text-dark-tremor-content",
+          "dark:bg-dark-tremor-background dark:text-dark-tremor-content dark:ring-dark-tremor-ring",
           // common
-          "w-full max-w-xl overflow-hidden text-left align-middle ring-1 ring-tremor-border shadow-tremor transition-all transform",
+          "overflow-hidden text-left shadow-xl ring-1 shadow-tremor transition-all transform",
           rootStyles,
           className,
         )}
diff --git a/src/stories/layout-elements/helpers/SimpleDialog.tsx b/src/stories/layout-elements/helpers/SimpleDialog.tsx
index 439ba7a20..1e00fc85b 100644
--- a/src/stories/layout-elements/helpers/SimpleDialog.tsx
+++ b/src/stories/layout-elements/helpers/SimpleDialog.tsx
@@ -11,7 +11,7 @@ const SimpleDialog = () => {
         </Button>
       </div>
       <Dialog open={isOpen} onClose={(val) => setIsOpen(val)} static={true}>
-        <DialogPanel className="w-full max-w-sm">
+        <DialogPanel className="max-w-md">
           <Title className="mb-3">Account Created Successfully</Title>
           Your account has been created successfully. You can now login to your account. For more
           information, please contact us.

From a96d50d6c78430f9a161ed14876f8ff918b2d26d Mon Sep 17 00:00:00 2001
From: Touha Zohair <39002455+iamtouha@users.noreply.github.com>
Date: Wed, 10 Jan 2024 00:31:54 +0600
Subject: [PATCH 24/25] Add role prop to Dialog component.

---
 src/components/layout-elements/Dialog/Dialog.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/layout-elements/Dialog/Dialog.tsx b/src/components/layout-elements/Dialog/Dialog.tsx
index 28297ab97..5e8148227 100644
--- a/src/components/layout-elements/Dialog/Dialog.tsx
+++ b/src/components/layout-elements/Dialog/Dialog.tsx
@@ -10,6 +10,7 @@ type XOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T
 export type DialogProps = React.HTMLAttributes<HTMLDivElement> & {
   open: boolean;
   onClose: (val: boolean) => void;
+  role?: "dialog" | "alertdialog";
   overlayClassName?: string;
 } & XOR<{ unmount?: boolean }, { static?: boolean }>;
 

From 5f7afbf4b5dfb66c9345fb1503651b2fdabb2976 Mon Sep 17 00:00:00 2001
From: severinlandolt <sev.landolt@gmail.com>
Date: Tue, 9 Jan 2024 20:15:48 +0100
Subject: [PATCH 25/25] lint

---
 src/components/layout-elements/Dialog/Dialog.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/layout-elements/Dialog/Dialog.tsx b/src/components/layout-elements/Dialog/Dialog.tsx
index d73242415..f04e0de5c 100644
--- a/src/components/layout-elements/Dialog/Dialog.tsx
+++ b/src/components/layout-elements/Dialog/Dialog.tsx
@@ -11,11 +11,10 @@ export type DialogProps = React.HTMLAttributes<HTMLDivElement> & {
   open: boolean;
   onClose: (val: boolean) => void;
   role?: "dialog" | "alertdialog";
-  overlayClassName?: string;
 } & XOR<{ unmount?: boolean }, { static?: boolean }>;
 
 const Dialog = React.forwardRef<HTMLDivElement, DialogProps>((props, ref) => {
-  const { children, className, overlayClassName, ...other } = props;
+  const { children, className, ...other } = props;
   return (
     <Transition as={React.Fragment} appear show={props.open}>
       <HeadlessuiDialog