refactor: alert close button

packages/web/src/javascripts/Components/ConfirmDeleteAccountModal/ConfirmDeleteAccountModal.tsx

@@ -1,10 +1,11 @@
 import { observer } from 'mobx-react-lite'
 import { ViewControllerManager } from '@Controllers/ViewControllerManager'
 import { AlertDialog, AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
-import { useRef } from 'react'
+import { useCallback, useRef } from 'react'
 import { STRING_DELETE_ACCOUNT_CONFIRMATION } from '@/Constants/Strings'
 import Button from '@/Components/Button/Button'
 import { WebApplication } from '@/Application/Application'
+import Icon from '../Icon/Icon'
 
 type Props = {
   viewControllerManager: ViewControllerManager
@@ -12,12 +13,17 @@ type Props = {
 }
 
 const ConfirmDeleteAccountModal = ({ application, viewControllerManager }: Props) => {
-  function closeDialog() {
+  const closeDialog = useCallback(() => {
     viewControllerManager.accountMenuController.setDeletingAccount(false)
-  }
+  }, [viewControllerManager.accountMenuController])
 
   const cancelRef = useRef<HTMLButtonElement>(null)
 
+  const confirm = useCallback(() => {
+    application.user.deleteAccount().catch(console.error)
+    closeDialog()
+  }, [application.user, closeDialog])
+
   return (
     <AlertDialog onDismiss={closeDialog} leastDestructiveRef={cancelRef} className="max-w-[600px] p-0">
       <div className="sk-modal-content">
@@ -25,7 +31,12 @@ const ConfirmDeleteAccountModal = ({ application, viewControllerManager }: Props
           <div className="sk-panel">
             <div className="sk-panel-content">
               <div className="sk-panel-section">
-                <AlertDialogLabel className="text-lg font-bold">Delete account?</AlertDialogLabel>
+                <AlertDialogLabel className="flex items-center justify-between text-lg font-bold">
+                  Delete account?
+                  <button className="rounded p-1 font-bold hover:bg-contrast" onClick={closeDialog}>
+                    <Icon type="close" />
+                  </button>
+                </AlertDialogLabel>
                 <AlertDialogDescription className="sk-panel-row">
                   <div>
                     <p className="text-base text-foreground lg:text-sm">{STRING_DELETE_ACCOUNT_CONFIRMATION}</p>
@@ -36,14 +47,7 @@ const ConfirmDeleteAccountModal = ({ application, viewControllerManager }: Props
                   <Button ref={cancelRef} onClick={closeDialog}>
                     Cancel
                   </Button>
-                  <Button
-                    primary
-                    colorStyle="danger"
-                    onClick={() => {
-                      application.user.deleteAccount().catch(console.error)
-                      closeDialog()
-                    }}
-                  >
+                  <Button primary colorStyle="danger" onClick={confirm}>
                     Delete my account for good
                   </Button>
                 </div>