From c02eaf248631f5ce2717b0975002f86c317b8d76 Mon Sep 17 00:00:00 2001
From: Alex van Andel <me@alexvanandel.com>
Date: Tue, 3 Aug 2021 17:36:55 +0000
Subject: [PATCH 1/3] Implemented @radix-ui/dialog for creating new event types

---
 components/Dialog.tsx       |  27 ++++
 package.json                |   1 +
 pages/event-types/index.tsx | 244 ++++++++++++++++--------------------
 yarn.lock                   | 156 ++++++++++++++++++++++-
 4 files changed, 290 insertions(+), 138 deletions(-)
 create mode 100644 components/Dialog.tsx

diff --git a/components/Dialog.tsx b/components/Dialog.tsx
new file mode 100644
index 0000000000..bea5407516
--- /dev/null
+++ b/components/Dialog.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+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.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+      {children}
+    </DialogPrimitive.Root>
+  );
+}
+
+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>
+  </DialogPrimitive.Content>
+));
+
+DialogContent.displayName = "DialogContent";
+
+export const DialogTrigger = DialogPrimitive.Trigger;
+export const DialogClose = DialogPrimitive.Close;
diff --git a/package.json b/package.json
index 3194fd278d..9738d4d68e 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "@jitsu/sdk-js": "^2.0.1",
     "@prisma/client": "^2.23.0",
     "@radix-ui/react-collapsible": "^0.0.16",
+    "@radix-ui/react-dialog": "^0.0.19",
     "@tailwindcss/forms": "^0.2.1",
     "async": "^3.2.0",
     "bcryptjs": "^2.4.3",
diff --git a/pages/event-types/index.tsx b/pages/event-types/index.tsx
index f78bf5fc72..6ad1eb8bbd 100644
--- a/pages/event-types/index.tsx
+++ b/pages/event-types/index.tsx
@@ -4,7 +4,7 @@ import prisma from "../../lib/prisma";
 import Shell from "../../components/Shell";
 import { useRouter } from "next/router";
 import { getSession, useSession } from "next-auth/client";
-import { Fragment, useRef, useState } from "react";
+import React, { Fragment, useRef } from "react";
 import { Menu, Transition } from "@headlessui/react";
 
 import {
@@ -18,11 +18,11 @@ import {
 } from "@heroicons/react/solid";
 import Loader from "@components/Loader";
 import classNames from "@lib/classNames";
+import { Dialog, DialogContent, DialogTrigger, DialogClose } from "@components/Dialog";
 
 export default function Availability({ user, types }) {
   const [session, loading] = useSession();
   const router = useRouter();
-  const [showAddModal, setShowAddModal] = useState(false);
 
   const titleRef = useRef<HTMLInputElement>();
   const slugRef = useRef<HTMLInputElement>();
@@ -38,7 +38,6 @@ export default function Availability({ user, types }) {
     const enteredLength = lengthRef.current.value;
 
     // TODO: Add validation
-
     await fetch("/api/availability/eventtype", {
       method: "POST",
       body: JSON.stringify({
@@ -53,19 +52,117 @@ export default function Availability({ user, types }) {
     });
 
     if (enteredTitle && enteredLength) {
-      router.replace(router.asPath);
-      toggleAddModal();
+      await router.replace(router.asPath);
     }
   }
 
-  function toggleAddModal() {
-    setShowAddModal(!showAddModal);
-  }
-
   if (loading) {
     return <Loader />;
   }
 
+  const CreateNewEventDialog = (
+    <Dialog>
+      <DialogTrigger>
+        <button className="py-2 px-4 mt-6 border border-transparent rounded-sm shadow-sm text-sm font-medium text-white bg-neutral-900 hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900">
+          <PlusIcon className="w-5 h-5 mr-1 inline" />
+          New event type
+        </button>
+      </DialogTrigger>
+      <DialogContent>
+        <div className="mb-4">
+          <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
+            Add a new event type
+          </h3>
+          <div>
+            <p className="text-sm text-gray-500">Create a new event type for people to book times with.</p>
+          </div>
+        </div>
+        <form onSubmit={createEventTypeHandler}>
+          <div>
+            <div className="mb-4">
+              <label htmlFor="title" className="block text-sm font-medium text-gray-700">
+                Title
+              </label>
+              <div className="mt-1">
+                <input
+                  ref={titleRef}
+                  type="text"
+                  name="title"
+                  id="title"
+                  required
+                  className="shadow-sm focus:ring-neutral-900 focus:border-neutral-900 block w-full sm:text-sm border-gray-300 rounded-sm"
+                  placeholder="Quick Chat"
+                />
+              </div>
+            </div>
+            <div className="mb-4">
+              <label htmlFor="slug" className="block text-sm font-medium text-gray-700">
+                URL
+              </label>
+              <div className="mt-1">
+                <div className="flex rounded-sm shadow-sm">
+                  <span className="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
+                    {location.hostname}/{user.username}/
+                  </span>
+                  <input
+                    ref={slugRef}
+                    type="text"
+                    name="slug"
+                    id="slug"
+                    required
+                    className="flex-1 block w-full focus:ring-neutral-900 focus:border-neutral-900 min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300"
+                  />
+                </div>
+              </div>
+            </div>
+            <div className="mb-4">
+              <label htmlFor="description" className="block text-sm font-medium text-gray-700">
+                Description
+              </label>
+              <div className="mt-1">
+                <textarea
+                  ref={descriptionRef}
+                  name="description"
+                  id="description"
+                  className="shadow-sm focus:ring-neutral-900 focus:border-neutral-900 block w-full sm:text-sm border-gray-300 rounded-sm"
+                  placeholder="A quick video meeting."></textarea>
+              </div>
+            </div>
+            <div className="mb-4">
+              <label htmlFor="length" className="block text-sm font-medium text-gray-700">
+                Length
+              </label>
+              <div className="mt-1 relative rounded-sm shadow-sm">
+                <input
+                  ref={lengthRef}
+                  type="number"
+                  name="length"
+                  id="length"
+                  required
+                  className="focus:ring-neutral-900 focus:border-neutral-900 block w-full pr-20 sm:text-sm border-gray-300 rounded-sm"
+                  placeholder="15"
+                />
+                <div className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 text-sm">
+                  minutes
+                </div>
+              </div>
+            </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>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+
   return (
     <div>
       <Head>
@@ -75,16 +172,7 @@ export default function Availability({ user, types }) {
       <Shell
         heading="Event Types"
         subtitle="Create events to share for people to book on your calendar."
-        CTA={
-          types.length !== 0 && (
-            <button
-              onClick={toggleAddModal}
-              className="flex justify-center py-2 px-4 border border-transparent rounded-sm shadow-sm text-sm font-medium text-white bg-neutral-900 hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900">
-              <PlusIcon className="w-5 h-5 mr-1" />
-              New event type
-            </button>
-          )
-        }>
+        CTA={types.length !== 0 && CreateNewEventDialog}>
         <div className="bg-white shadow overflow-hidden sm:rounded-sm">
           <ul className="divide-y divide-neutral-200">
             {types.map((type) => (
@@ -505,123 +593,7 @@ export default function Availability({ user, types }) {
                 Event types enable you to share links that show available times on your calendar and allow
                 people to make bookings with you.
               </p>
-              <button
-                onClick={toggleAddModal}
-                className="py-2 px-4 mt-6 border border-transparent rounded-sm shadow-sm text-sm font-medium text-white bg-neutral-900 hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900">
-                <PlusIcon className="w-5 h-5 mr-1 inline" />
-                New event type
-              </button>
-            </div>
-          </div>
-        )}
-        {showAddModal && (
-          <div
-            className="fixed z-10 inset-0 overflow-y-auto"
-            aria-labelledby="modal-title"
-            role="dialog"
-            aria-modal="true">
-            <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-              <div
-                className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
-                aria-hidden="true"></div>
-
-              <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
-                &#8203;
-              </span>
-
-              <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">
-                <div className="mb-4">
-                  <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
-                    Add a new event type
-                  </h3>
-                  <div>
-                    <p className="text-sm text-gray-500">
-                      Create a new event type for people to book times with.
-                    </p>
-                  </div>
-                </div>
-                <form onSubmit={createEventTypeHandler}>
-                  <div>
-                    <div className="mb-4">
-                      <label htmlFor="title" className="block text-sm font-medium text-gray-700">
-                        Title
-                      </label>
-                      <div className="mt-1">
-                        <input
-                          ref={titleRef}
-                          type="text"
-                          name="title"
-                          id="title"
-                          required
-                          className="shadow-sm focus:ring-neutral-900 focus:border-neutral-900 block w-full sm:text-sm border-gray-300 rounded-sm"
-                          placeholder="Quick Chat"
-                        />
-                      </div>
-                    </div>
-                    <div className="mb-4">
-                      <label htmlFor="slug" className="block text-sm font-medium text-gray-700">
-                        URL
-                      </label>
-                      <div className="mt-1">
-                        <div className="flex rounded-sm shadow-sm">
-                          <span className="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
-                            {location.hostname}/{user.username}/
-                          </span>
-                          <input
-                            ref={slugRef}
-                            type="text"
-                            name="slug"
-                            id="slug"
-                            required
-                            className="flex-1 block w-full focus:ring-neutral-900 focus:border-neutral-900 min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300"
-                          />
-                        </div>
-                      </div>
-                    </div>
-                    <div className="mb-4">
-                      <label htmlFor="description" className="block text-sm font-medium text-gray-700">
-                        Description
-                      </label>
-                      <div className="mt-1">
-                        <textarea
-                          ref={descriptionRef}
-                          name="description"
-                          id="description"
-                          className="shadow-sm focus:ring-neutral-900 focus:border-neutral-900 block w-full sm:text-sm border-gray-300 rounded-sm"
-                          placeholder="A quick video meeting."></textarea>
-                      </div>
-                    </div>
-                    <div className="mb-4">
-                      <label htmlFor="length" className="block text-sm font-medium text-gray-700">
-                        Length
-                      </label>
-                      <div className="mt-1 relative rounded-sm shadow-sm">
-                        <input
-                          ref={lengthRef}
-                          type="number"
-                          name="length"
-                          id="length"
-                          required
-                          className="focus:ring-neutral-900 focus:border-neutral-900 block w-full pr-20 sm:text-sm border-gray-300 rounded-sm"
-                          placeholder="15"
-                        />
-                        <div className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 text-sm">
-                          minutes
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  {/* TODO: Add an error message when required input fields empty*/}
-                  <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-                    <button type="submit" className="btn btn-primary">
-                      Create
-                    </button>
-                    <button onClick={toggleAddModal} type="button" className="btn btn-white mr-2">
-                      Cancel
-                    </button>
-                  </div>
-                </form>
-              </div>
+              {CreateNewEventDialog}
             </div>
           </div>
         )}
diff --git a/yarn.lock b/yarn.lock
index bb6cb55fd3..a053e5a8ff 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -790,6 +790,59 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-dialog@^0.0.19":
+  version "0.0.19"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-0.0.19.tgz#5a76fa380142a7a97c15c585ab071f63fba5297d"
+  integrity sha512-7FbWaj/C/TDpfJ+VJ4wNAQIjENDNfwAqNvAfeb+TEtBjgjmsfRDgA1AMenlA5N1QuRtAokRMTHUs3ukW49oQ+g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "0.0.5"
+    "@radix-ui/react-compose-refs" "0.0.5"
+    "@radix-ui/react-context" "0.0.5"
+    "@radix-ui/react-dismissable-layer" "0.0.14"
+    "@radix-ui/react-focus-guards" "0.0.7"
+    "@radix-ui/react-focus-scope" "0.0.14"
+    "@radix-ui/react-id" "0.0.6"
+    "@radix-ui/react-polymorphic" "0.0.12"
+    "@radix-ui/react-portal" "0.0.14"
+    "@radix-ui/react-presence" "0.0.14"
+    "@radix-ui/react-primitive" "0.0.14"
+    "@radix-ui/react-slot" "0.0.12"
+    "@radix-ui/react-use-controllable-state" "0.0.6"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "^2.4.0"
+
+"@radix-ui/react-dismissable-layer@0.0.14":
+  version "0.0.14"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-0.0.14.tgz#9d8a3415a2830688070c6596dec18b43c33df7b2"
+  integrity sha512-0pmRuGYYvWlEaED1igGFLjic0+hD0OqvsnrZaN3n1nDOkoCd7H5CA2geaShSrlBF5riI2Dr9jIZPGLbDRhs4DA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "0.0.5"
+    "@radix-ui/react-polymorphic" "0.0.12"
+    "@radix-ui/react-primitive" "0.0.14"
+    "@radix-ui/react-use-body-pointer-events" "0.0.6"
+    "@radix-ui/react-use-callback-ref" "0.0.5"
+    "@radix-ui/react-use-escape-keydown" "0.0.6"
+
+"@radix-ui/react-focus-guards@0.0.7":
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-0.0.7.tgz#285ed081c877587acd4ee7e6d8260bdf9044e922"
+  integrity sha512-enAsmrUunptHVzPLTuZqwTP/X3WFBnyJ/jP9W+0g+bRvI3o7V1kxNc+T2Rp1eRTFBW+lUNnt08qkugPytyTRog==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-focus-scope@0.0.14":
+  version "0.0.14"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-0.0.14.tgz#778e2a3ea607621d82e0139616d7ea6d517d9533"
+  integrity sha512-D3v6Tw8vzpIBNd2I32Q2G4LCiXMIlmc6Pl2VV9CZjSatDOjkV/ckGbhkQyQ7QxnD/0CmiSxNo5hTeGRmZDjwmA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "0.0.5"
+    "@radix-ui/react-polymorphic" "0.0.12"
+    "@radix-ui/react-primitive" "0.0.14"
+    "@radix-ui/react-use-callback-ref" "0.0.5"
+
 "@radix-ui/react-id@0.0.6":
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-0.0.6.tgz#c4b27d11861805e91ac296e7758ab47e3947b65c"
@@ -802,6 +855,16 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/react-polymorphic/-/react-polymorphic-0.0.12.tgz#bf4ae516669b68e059549538104d97322f7c876b"
   integrity sha512-/GYNMicBnGzjD1d2fCAuzql1VeFrp8mqM3xfzT1kxhnV85TKdURO45jBfMgqo17XNXoNhWIAProUsCO4qFAAIg==
 
+"@radix-ui/react-portal@0.0.14":
+  version "0.0.14"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-0.0.14.tgz#31513d8777cf5e50a3a30ebc9deb34821e890e9e"
+  integrity sha512-Wi9arVwVenonjZIX6znCBYaasua03Tb+UtrBZShepJkLGtbGxDlzExijiGIaIRNetl46Oc2pw0F6Y6HffDnUww==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-polymorphic" "0.0.12"
+    "@radix-ui/react-primitive" "0.0.14"
+    "@radix-ui/react-use-layout-effect" "0.0.5"
+
 "@radix-ui/react-presence@0.0.14":
   version "0.0.14"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-0.0.14.tgz#6a86058bbbf46234dd8840dacd620b3ac5797025"
@@ -818,6 +881,22 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-polymorphic" "0.0.12"
 
+"@radix-ui/react-slot@0.0.12":
+  version "0.0.12"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-0.0.12.tgz#c4d8a75fffca561aeeca2ed9603384d86757f60a"
+  integrity sha512-Em8P/xYyh3O/32IhrmARJNH+J/XCAVnw6h2zGu6oeReliIX7ktU67pMSeyyIZiU2hNXzaXYB/xDdixizQe/DGA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "0.0.5"
+
+"@radix-ui/react-use-body-pointer-events@0.0.6":
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-body-pointer-events/-/react-use-body-pointer-events-0.0.6.tgz#30b21301880417e7dbb345871ff5a83f2abe0d8d"
+  integrity sha512-ouYb7u1+K9TsiEcNs3HceNUBUgB2PV41EyD5O6y6ZPMxl1lW/QAy5dfyfJMRyaRWQ6kxwmGoKlCSb4uPTruzuQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-layout-effect" "0.0.5"
+
 "@radix-ui/react-use-callback-ref@0.0.5":
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-0.0.5.tgz#fa8db050229cda573dfeeae213d74ef06f6130db"
@@ -833,6 +912,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-callback-ref" "0.0.5"
 
+"@radix-ui/react-use-escape-keydown@0.0.6":
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-0.0.6.tgz#1ad1c81b99961b7dbe376ef54151ebc8bef627a0"
+  integrity sha512-MJpVj21BYwWllmp2xbXPqpKPssJ1WWrZi+Qx7PY5hVcBhQr5Jo6yKwIX677pH5Yql95ENTTT5LW3q+LVFYIISw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "0.0.5"
+
 "@radix-ui/react-use-layout-effect@0.0.5":
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-0.0.5.tgz#cbbd059090edc765749da00d9f562a9abd43cbac"
@@ -1307,6 +1394,13 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
+aria-hidden@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.1.3.tgz#bb48de18dc84787a3c6eee113709c473c64ec254"
+  integrity sha512-RhVWFtKH5BiGMycI72q2RAFMLQi8JP9bLuQXgR5a8Znp7P5KOIADSJeyfI8PCVxLEp067B2HbP5JIiI/PXIZeA==
+  dependencies:
+    tslib "^1.0.0"
+
 array-includes@^3.1.2, array-includes@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.3.tgz#c7f619b382ad2afaf5326cddfdc0afc61af7690a"
@@ -2196,6 +2290,11 @@ detect-newline@^3.0.0:
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
   integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
 
+detect-node-es@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493"
+  integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
+
 detective@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.0.tgz#feb2a77e85b904ecdea459ad897cc90a99bd2a7b"
@@ -2867,6 +2966,11 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
     has "^1.0.3"
     has-symbols "^1.0.1"
 
+get-nonce@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
+  integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==
+
 get-orientation@1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/get-orientation/-/get-orientation-1.1.2.tgz#20507928951814f8a91ded0a0e67b29dfab98947"
@@ -3273,6 +3377,13 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
+invariant@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
 is-arguments@^1.0.4:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.0.tgz#62353031dfbee07ceb34656a6bde59efecae8dd9"
@@ -4300,7 +4411,7 @@ log-update@^4.0.0:
     slice-ansi "^4.0.0"
     wrap-ansi "^6.2.0"
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -5332,6 +5443,25 @@ react-refresh@0.8.3:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
+react-remove-scroll-bar@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.2.0.tgz#d4d545a7df024f75d67e151499a6ab5ac97c8cdd"
+  integrity sha512-UU9ZBP1wdMR8qoUs7owiVcpaPwsQxUDC2lypP6mmixaGlARZa7ZIBx1jcuObLdhMOvCsnZcvetOho0wzPa9PYg==
+  dependencies:
+    react-style-singleton "^2.1.0"
+    tslib "^1.0.0"
+
+react-remove-scroll@^2.4.0:
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.4.3.tgz#83d19b02503b04bd8141ed6e0b9e6691a2e935a6"
+  integrity sha512-lGWYXfV6jykJwbFpsuPdexKKzp96f3RbvGapDSIdcyGvHb7/eqyn46C7/6h+rUzYar1j5mdU+XECITHXCKBk9Q==
+  dependencies:
+    react-remove-scroll-bar "^2.1.0"
+    react-style-singleton "^2.1.0"
+    tslib "^1.0.0"
+    use-callback-ref "^1.2.3"
+    use-sidecar "^1.0.1"
+
 react-select@^4.3.0, react-select@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/react-select/-/react-select-4.3.1.tgz#389fc07c9bc7cf7d3c377b7a05ea18cd7399cb81"
@@ -5345,6 +5475,15 @@ react-select@^4.3.0, react-select@^4.3.1:
     react-input-autosize "^3.0.0"
     react-transition-group "^4.3.0"
 
+react-style-singleton@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.1.1.tgz#ce7f90b67618be2b6b94902a30aaea152ce52e66"
+  integrity sha512-jNRp07Jza6CBqdRKNgGhT3u9umWvils1xsuMOjZlghBDH2MU0PL2WZor4PGYjXpnRCa9DQSlHMs/xnABWOwYbA==
+  dependencies:
+    get-nonce "^1.0.0"
+    invariant "^2.2.4"
+    tslib "^1.0.0"
+
 react-timezone-select@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/react-timezone-select/-/react-timezone-select-1.0.4.tgz#66664f508f927e9f9c0f051aea51fd3196534401"
@@ -6190,7 +6329,7 @@ ts-pnp@^1.1.6:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
   integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
 
-tslib@^1.8.1, tslib@^1.9.0:
+tslib@^1.0.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
@@ -6343,6 +6482,19 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-callback-ref@^1.2.3:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.5.tgz#6115ed242cfbaed5915499c0a9842ca2912f38a5"
+  integrity sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==
+
+use-sidecar@^1.0.1:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.5.tgz#ffff2a17c1df42e348624b699ba6e5c220527f2b"
+  integrity sha512-k9jnrjYNwN6xYLj1iaGhonDghfvmeTmYjAiGvOr7clwKfPjMXJf4/HOr7oT5tJwYafgp2tG2l3eZEOfoELiMcA==
+  dependencies:
+    detect-node-es "^1.1.0"
+    tslib "^1.9.3"
+
 use-subscription@1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.5.1.tgz#73501107f02fad84c6dd57965beb0b75c68c42d1"

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 2/3] 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>

From 97d727c620e0d1c3c362575015fc68642e066e35 Mon Sep 17 00:00:00 2001
From: Alex van Andel <me@alexvanandel.com>
Date: Tue, 3 Aug 2021 23:28:12 +0000
Subject: [PATCH 3/3] Minor style improvements + fixed nested button,
 DialogTrigger is a button

---
 pages/event-types/index.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/pages/event-types/index.tsx b/pages/event-types/index.tsx
index 47e840dcde..ad3e0856fb 100644
--- a/pages/event-types/index.tsx
+++ b/pages/event-types/index.tsx
@@ -60,13 +60,11 @@ export default function Availability({ user, types }) {
     return <Loader />;
   }
 
-  const CreateNewEventDialog = (
+  const CreateNewEventDialog = () => (
     <Dialog>
-      <DialogTrigger>
-        <button className="py-2 px-4 mt-6 border border-transparent rounded-sm shadow-sm text-sm font-medium text-white bg-neutral-900 hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900">
-          <PlusIcon className="w-5 h-5 mr-1 inline" />
-          New event type
-        </button>
+      <DialogTrigger className="py-2 px-4 mt-6 border border-transparent rounded-sm shadow-sm text-sm font-medium text-white bg-neutral-900 hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900">
+        <PlusIcon className="w-5 h-5 mr-1 inline" />
+        New event type
       </DialogTrigger>
       <DialogContent>
         <div className="mb-4">
@@ -170,7 +168,7 @@ export default function Availability({ user, types }) {
       <Shell
         heading="Event Types"
         subtitle="Create events to share for people to book on your calendar."
-        CTA={types.length !== 0 && CreateNewEventDialog}>
+        CTA={types.length !== 0 && <CreateNewEventDialog />}>
         <div className="bg-white shadow overflow-hidden sm:rounded-sm -mx-4 sm:mx-0">
           <ul className="divide-y divide-neutral-200">
             {types.map((type) => (
@@ -591,7 +589,7 @@ export default function Availability({ user, types }) {
                 Event types enable you to share links that show available times on your calendar and allow
                 people to make bookings with you.
               </p>
-              {CreateNewEventDialog}
+              <CreateNewEventDialog />
             </div>
           </div>
         )}