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

@@ -30,6 +30,7 @@
   .description {
     font-size: $font-regular;
     line-height: 1.4;
+    white-space: pre-line;
 
     strong {
       font-weight: $bold;

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}

components/common/Button/index.scss

@@ -166,6 +166,15 @@
     }
   }
 
+  &.Destructive {
+    background: $error;
+    color: white;
+
+    &:hover {
+      background: darken($error, 15);
+    }
+  }
+
   .Accessory {
     $dimension: $unit-2x;
 

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