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] 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 47e840dc..ad3e0856 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>
         )}