From 252179f3be193a7fc3257128fd8a7d4f61f7964b Mon Sep 17 00:00:00 2001
From: Alex van Andel <me@alexvanandel.com>
Date: Fri, 27 Aug 2021 15:22:49 +0100
Subject: [PATCH] Add 'Button' component & update to current best practise
 (#523)

* Add 'Button' component & update to current best practise

* Use literal string for type, renamed alert -> variety

Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
---
 .../dialog/ConfirmationDialogContent.tsx      | 35 ++++++++++---------
 pages/event-types/[type].tsx                  |  2 +-
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/components/dialog/ConfirmationDialogContent.tsx b/components/dialog/ConfirmationDialogContent.tsx
index 6e4cda08..7ffa627e 100644
--- a/components/dialog/ConfirmationDialogContent.tsx
+++ b/components/dialog/ConfirmationDialogContent.tsx
@@ -1,25 +1,26 @@
 import { DialogClose, DialogContent } from "@components/Dialog";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { ExclamationIcon } from "@heroicons/react/outline";
-import React from "react";
+import React, { PropsWithChildren } from "react";
+import { Button } from "@components/ui/Button";
 
-export default function ConfirmationDialogContent({
-  title,
-  alert,
-  confirmBtnText,
-  cancelBtnText,
-  onConfirm,
-  children,
-}) {
-  confirmBtnText = confirmBtnText || "Confirm";
-  cancelBtnText = cancelBtnText || "Cancel";
+export type ConfirmationDialogContentProps = {
+  confirmBtnText?: string;
+  cancelBtnText?: string;
+  onConfirm: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+  title: string;
+  variety?: "danger" /* no others yet */;
+};
+
+export default function ConfirmationDialogContent(props: PropsWithChildren<ConfirmationDialogContentProps>) {
+  const { title, variety, confirmBtnText = "Confirm", cancelBtnText = "Cancel", onConfirm, children } = props;
 
   return (
     <DialogContent>
       <div className="flex">
-        {alert && (
+        {variety && (
           <div className="mr-3 mt-0.5">
-            {alert === "danger" && (
+            {variety === "danger" && (
               <div className="text-center p-2 rounded-full mx-auto bg-red-100">
                 <ExclamationIcon className="w-5 h-5 text-red-600" />
               </div>
@@ -31,11 +32,13 @@ export default function ConfirmationDialogContent({
           <DialogPrimitive.Description className="text-neutral-500">{children}</DialogPrimitive.Description>
         </div>
       </div>
-      <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-        <DialogClose onClick={onConfirm} className="btn btn-primary">
+      <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse gap-x-2">
+        <DialogClose as={Button} color="primary" onClick={onConfirm}>
           {confirmBtnText}
         </DialogClose>
-        <DialogClose className="btn btn-white mx-2">{cancelBtnText}</DialogClose>
+        <DialogClose as={Button} color="secondary">
+          {cancelBtnText}
+        </DialogClose>
       </div>
     </DialogContent>
   );
diff --git a/pages/event-types/[type].tsx b/pages/event-types/[type].tsx
index 80e6cea8..21620c50 100644
--- a/pages/event-types/[type].tsx
+++ b/pages/event-types/[type].tsx
@@ -858,7 +858,7 @@ const EventTypePage = (props: InferGetServerSidePropsType<typeof getServerSidePr
                   Delete
                 </DialogTrigger>
                 <ConfirmationDialogContent
-                  alert="danger"
+                  variety="danger"
                   title="Delete Event Type"
                   confirmBtnText="Yes, delete event type"
                   onConfirm={deleteEventTypeHandler}>