From c365f857b0d291a29553941f037d9f265b759f3a Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sun, 16 Apr 2023 03:51:55 -0700
Subject: [PATCH] Extract delete team alert into a file

Also, to support this:
* Added `Destructive` class to Button
* Added `primaryActionClassName` prop to Alert
---
 components/common/Alert/index.scss           |  1 +
 components/common/Alert/index.tsx            |  7 +++-
 components/common/Button/index.scss          |  9 +++++
 components/dialogs/DeleteTeamAlert/index.tsx | 35 ++++++++++++++++++++
 4 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 components/dialogs/DeleteTeamAlert/index.tsx

diff --git a/components/common/Alert/index.scss b/components/common/Alert/index.scss
index aba79f93..536edae8 100644
--- a/components/common/Alert/index.scss
+++ b/components/common/Alert/index.scss
@@ -30,6 +30,7 @@
   .description {
     font-size: $font-regular;
     line-height: 1.4;
+    white-space: pre-line;
 
     strong {
       font-weight: $bold;
diff --git a/components/common/Alert/index.tsx b/components/common/Alert/index.tsx
index dc6d49c9..c6a34b48 100644
--- a/components/common/Alert/index.tsx
+++ b/components/common/Alert/index.tsx
@@ -12,6 +12,7 @@ interface Props {
   message: string | React.ReactNode
   primaryAction?: () => void
   primaryActionText?: string
+  primaryActionClassName?: string
   cancelAction: () => void
   cancelActionText: string
 }
@@ -22,7 +23,10 @@ const Alert = (props: Props) => {
       <AlertDialog.Portal>
         <AlertDialog.Overlay className="Overlay" onClick={props.cancelAction} />
         <div className="AlertWrapper">
-          <AlertDialog.Content className="Alert">
+          <AlertDialog.Content
+            className="Alert"
+            onEscapeKeyDown={props.cancelAction}
+          >
             {props.title ? (
               <AlertDialog.Title>{props.title}</AlertDialog.Title>
             ) : (
@@ -42,6 +46,7 @@ const Alert = (props: Props) => {
               {props.primaryAction ? (
                 <AlertDialog.Action asChild>
                   <Button
+                    className={props.primaryActionClassName}
                     contained={true}
                     onClick={props.primaryAction}
                     text={props.primaryActionText}
diff --git a/components/common/Button/index.scss b/components/common/Button/index.scss
index e0527b66..ce7399b7 100644
--- a/components/common/Button/index.scss
+++ b/components/common/Button/index.scss
@@ -166,6 +166,15 @@
     }
   }
 
+  &.Destructive {
+    background: $error;
+    color: white;
+
+    &:hover {
+      background: darken($error, 15);
+    }
+  }
+
   .Accessory {
     $dimension: $unit-2x;
 
diff --git a/components/dialogs/DeleteTeamAlert/index.tsx b/components/dialogs/DeleteTeamAlert/index.tsx
new file mode 100644
index 00000000..c905735d
--- /dev/null
+++ b/components/dialogs/DeleteTeamAlert/index.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import { useTranslation } from 'next-i18next'
+import Alert from '~components/common/Alert'
+
+interface Props {
+  open: boolean
+  deleteCallback: () => void
+  onOpenChange: (open: boolean) => void
+}
+
+const DeleteTeamAlert = ({ open, deleteCallback, onOpenChange }: Props) => {
+  const { t } = useTranslation('common')
+
+  function deleteParty() {
+    deleteCallback()
+  }
+
+  function close() {
+    onOpenChange(false)
+  }
+
+  return (
+    <Alert
+      open={open}
+      primaryAction={deleteParty}
+      primaryActionClassName="Destructive"
+      primaryActionText={t('modals.delete_team.buttons.confirm')}
+      cancelAction={close}
+      cancelActionText={t('modals.delete_team.buttons.cancel')}
+      message={t('modals.delete_team.description')}
+    />
+  )
+}
+
+export default DeleteTeamAlert