From 4225016829a6f1980bc8f6be4b12cb5884337b47 Mon Sep 17 00:00:00 2001
From: Alex van Andel <me@alexvanandel.com>
Date: Tue, 3 Aug 2021 22:17:12 +0000
Subject: [PATCH] Changed the mechanism by which we center the dialog

---
 components/Dialog.tsx       | 10 ++++------
 pages/event-types/index.tsx | 14 ++++++--------
 2 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/components/Dialog.tsx b/components/Dialog.tsx
index bea5407516..b16416ddbc 100644
--- a/components/Dialog.tsx
+++ b/components/Dialog.tsx
@@ -3,7 +3,7 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
 
 export function Dialog({ children, ...props }) {
   return (
-    <DialogPrimitive.Root {...props} className="fixed z-10 inset-0 overflow-y-auto">
+    <DialogPrimitive.Root {...props}>
       <DialogPrimitive.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
       {children}
     </DialogPrimitive.Root>
@@ -13,11 +13,9 @@ export function Dialog({ children, ...props }) {
 export const DialogContent = React.forwardRef(({ children, ...props }, forwardedRef) => (
   <DialogPrimitive.Content
     {...props}
-    ref={forwardedRef}
-    className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-    <div className="inline-block align-bottom bg-white rounded-sm px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
-      {children}
-    </div>
+    className="fixed bg-white rounded top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-left overflow-hidden shadow-xl sm:align-middle sm:max-w-lg sm:w-full p-6"
+    ref={forwardedRef}>
+    {children}
   </DialogPrimitive.Content>
 ));
 
diff --git a/pages/event-types/index.tsx b/pages/event-types/index.tsx
index 64eb7e5588..47e840dcde 100644
--- a/pages/event-types/index.tsx
+++ b/pages/event-types/index.tsx
@@ -149,14 +149,12 @@ export default function Availability({ user, types }) {
             </div>
           </div>
           <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-            <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-              <button type="submit" className="btn btn-primary">
-                Create
-              </button>
-              <DialogClose as="button" className="btn btn-white ml-2">
-                Cancel
-              </DialogClose>
-            </div>
+            <button type="submit" className="btn btn-primary">
+              Continue
+            </button>
+            <DialogClose as="button" className="btn btn-white mx-2">
+              Cancel
+            </DialogClose>
           </div>
         </form>
       </DialogContent>