refactor: alert close button

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

@@ -1,4 +1,4 @@
-import { FunctionComponent, useEffect, useRef, useState } from 'react'
+import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
 import { AlertDialog, AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
 import { STRING_SIGN_OUT_CONFIRMATION } from '@/Constants/Strings'
 import { WebApplication } from '@/Application/Application'
@@ -7,6 +7,7 @@ import { observer } from 'mobx-react-lite'
 import { ApplicationGroup } from '@/Application/ApplicationGroup'
 import { isDesktopApplication } from '@/Utils'
 import Button from '@/Components/Button/Button'
+import Icon from '../Icon/Icon'
 
 type Props = {
   application: WebApplication
@@ -18,9 +19,9 @@ const ConfirmSignoutModal: FunctionComponent<Props> = ({ application, viewContro
   const [deleteLocalBackups, setDeleteLocalBackups] = useState(false)
 
   const cancelRef = useRef<HTMLButtonElement>(null)
-  function closeDialog() {
+  const closeDialog = useCallback(() => {
     viewControllerManager.accountMenuController.setSigningOut(false)
-  }
+  }, [viewControllerManager.accountMenuController])
 
   const [localBackupsCount, setLocalBackupsCount] = useState(0)
 
@@ -31,6 +32,15 @@ const ConfirmSignoutModal: FunctionComponent<Props> = ({ application, viewContro
   const workspaces = applicationGroup.getDescriptors()
   const showWorkspaceWarning = workspaces.length > 1 && isDesktopApplication()
 
+  const confirm = useCallback(() => {
+    if (deleteLocalBackups) {
+      application.signOutAndDeleteLocalBackups().catch(console.error)
+    } else {
+      application.user.signOut().catch(console.error)
+    }
+    closeDialog()
+  }, [application, closeDialog, deleteLocalBackups])
+
   return (
     <AlertDialog onDismiss={closeDialog} leastDestructiveRef={cancelRef} className="max-w-[600px] p-0">
       <div className="sk-modal-content">
@@ -38,7 +48,12 @@ const ConfirmSignoutModal: FunctionComponent<Props> = ({ application, viewContro
           <div className="sk-panel">
             <div className="sk-panel-content">
               <div className="sk-panel-section">
-                <AlertDialogLabel className="text-lg font-bold">Sign out workspace?</AlertDialogLabel>
+                <AlertDialogLabel className="flex items-center justify-between text-lg font-bold">
+                  Sign out workspace?
+                  <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_SIGN_OUT_CONFIRMATION}</p>
@@ -87,18 +102,7 @@ const ConfirmSignoutModal: FunctionComponent<Props> = ({ application, viewContro
                   <Button ref={cancelRef} onClick={closeDialog}>
                     Cancel
                   </Button>
-                  <Button
-                    primary
-                    colorStyle="danger"
-                    onClick={() => {
-                      if (deleteLocalBackups) {
-                        application.signOutAndDeleteLocalBackups().catch(console.error)
-                      } else {
-                        application.user.signOut().catch(console.error)
-                      }
-                      closeDialog()
-                    }}
-                  >
+                  <Button primary colorStyle="danger" onClick={confirm}>
                     {application.hasAccount() ? 'Sign Out' : 'Delete Workspace'}
                   </Button>
                 </div>