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>

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>
   );

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}>