refactor: alert close button

packages/styles/src/Alert/Alert.ts

@@ -103,7 +103,14 @@ export class SKAlert {
       buttonsTemplate = ''
       panelStyle = 'style="padding-bottom: 8px"'
     }
-    const titleTemplate = this.title ? `<div class='mb-1 font-bold text-lg'>${this.title}</div>` : ''
+    const titleTemplate = this.title
+      ? `<div class='mb-1 font-bold text-lg flex items-center justify-between'>
+          ${this.title}
+          <button id="close-button" class="rounded p-1 font-bold hover:bg-contrast" onClick={closeDialog}>
+            <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.2459 5.92925C15.5704 5.60478 15.5704 5.07872 15.2459 4.75425C14.9214 4.42978 14.3954 4.42978 14.0709 4.75425L10.0001 8.82508L5.92925 4.75425C5.60478 4.42978 5.07872 4.42978 4.75425 4.75425C4.42978 5.07872 4.42978 5.60478 4.75425 5.92925L8.82508 10.0001L4.75425 14.0709C4.42978 14.3954 4.42978 14.9214 4.75425 15.2459C5.07872 15.5704 5.60478 15.5704 5.92925 15.2459L10.0001 11.1751L14.0709 15.2459C14.3954 15.5704 14.9214 15.5704 15.2459 15.2459C15.5704 14.9214 15.5704 14.3954 15.2459 14.0709L11.1751 10.0001L15.2459 5.92925Z" /></svg>
+          </button>
+         </div>`
+      : ''
     const messageTemplate = this.text ? `<p class='sk-p text-base lg:text-sm'>${this.text}</p>` : ''
 
     const template = `
@@ -169,5 +176,12 @@ export class SKAlert {
         }
       })
     }
+
+    const closeButton = this.element.querySelector<HTMLButtonElement>('#close-button')
+    if (closeButton) {
+      closeButton.onclick = () => {
+        this.dismiss()
+      }
+    }
   }
 }

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
+                  <Button primary colorStyle="danger" onClick={confirm}>
-                    primary
-                    colorStyle="danger"
-                    onClick={() => {
-                      application.user.deleteAccount().catch(console.error)
-                      closeDialog()
-                    }}
-                  >
                     Delete my account for good
                   </Button>
                 </div>

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
+                  <Button primary colorStyle="danger" onClick={confirm}>
-                    primary
-                    colorStyle="danger"
-                    onClick={() => {
-                      if (deleteLocalBackups) {
-                        application.signOutAndDeleteLocalBackups().catch(console.error)
-                      } else {
-                        application.user.signOut().catch(console.error)
-                      }
-                      closeDialog()
-                    }}
-                  >
                     {application.hasAccount() ? 'Sign Out' : 'Delete Workspace'}
                   </Button>
                 </div>

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

@@ -4,6 +4,7 @@ import { WebApplication } from '@/Application/Application'
 import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
 import Button from '@/Components/Button/Button'
+import Icon from '../Icon/Icon'
 
 type Props = {
   application: WebApplication
@@ -17,6 +18,14 @@ const ConfirmOtherSessionsSignOut = observer(({ application, viewControllerManag
     viewControllerManager.accountMenuController.setOtherSessionsSignOut(false)
   }, [viewControllerManager])
 
+  const confirm = useCallback(() => {
+    application.revokeAllOtherSessions().catch(console.error)
+    closeDialog()
+    application.alertService
+      .alert('You have successfully revoked your sessions from other devices.', undefined, 'Finish')
+      .catch(console.error)
+  }, [application, closeDialog])
+
   return (
     <AlertDialog onDismiss={closeDialog} leastDestructiveRef={cancelRef} className="max-w-[600px] p-0">
       <div className="sk-modal-content">
@@ -24,7 +33,12 @@ const ConfirmOtherSessionsSignOut = observer(({ application, viewControllerManag
           <div className="sk-panel">
             <div className="sk-panel-content">
               <div className="sk-panel-section">
-                <AlertDialogLabel className="text-lg font-bold capitalize">End all other sessions?</AlertDialogLabel>
+                <AlertDialogLabel className="flex items-center justify-between text-lg font-bold capitalize">
+                  End all other sessions?
+                  <button className="rounded p-1 font-bold hover:bg-contrast" onClick={closeDialog}>
+                    <Icon type="close" />
+                  </button>
+                </AlertDialogLabel>
                 <AlertDialogDescription className="sk-panel-row">
                   <p className="text-base text-foreground lg:text-sm">
                     This action will sign out all other devices signed into your account, and remove your data from
@@ -36,17 +50,7 @@ const ConfirmOtherSessionsSignOut = observer(({ application, viewControllerManag
                   <Button ref={cancelRef} onClick={closeDialog}>
                     Cancel
                   </Button>
-                  <Button
+                  <Button primary colorStyle="danger" onClick={confirm}>
-                    primary
-                    colorStyle="danger"
-                    onClick={() => {
-                      application.revokeAllOtherSessions().catch(console.error)
-                      closeDialog()
-                      application.alertService
-                        .alert('You have successfully revoked your sessions from other devices.', undefined, 'Finish')
-                        .catch(console.error)
-                    }}
-                  >
                     End Sessions
                   </Button>
                 </div>

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

@@ -10,6 +10,7 @@ import ModalDialogLabel from '../Shared/ModalDialogLabel'
 import ModalDialogDescription from '../Shared/ModalDialogDescription'
 import Spinner from '@/Components/Spinner/Spinner'
 import Button from '@/Components/Button/Button'
+import Icon from '../Icon/Icon'
 
 type Session = RemoteSession & {
   revoking?: true
@@ -102,6 +103,9 @@ const SessionsModalContent: FunctionComponent<{
     [],
   )
 
+  const closeRevokeConfirmationDialog = () => {
+    setRevokingSessionUuid('')
+  }
   return (
     <>
       <ModalDialog onDismiss={close} className="sessions-modal max-h-[90vh]">
@@ -154,19 +158,21 @@ const SessionsModalContent: FunctionComponent<{
         </ModalDialogDescription>
       </ModalDialog>
       {confirmRevokingSessionUuid && (
-        <AlertDialog
+        <AlertDialog onDismiss={closeRevokeConfirmationDialog} leastDestructiveRef={cancelRevokeRef} className="p-0">
-          onDismiss={() => {
-            setRevokingSessionUuid('')
-          }}
-          leastDestructiveRef={cancelRevokeRef}
-          className="p-0"
-        >
           <div className="sk-modal-content">
             <div className="sn-component">
               <div className="sk-panel">
                 <div className="sk-panel-content">
                   <div className="sk-panel-section">
-                    <AlertDialogLabel className="text-lg font-bold">{SessionStrings.RevokeTitle}</AlertDialogLabel>
+                    <AlertDialogLabel className="flex items-center justify-between text-lg font-bold">
+                      {SessionStrings.RevokeTitle}
+                      <button
+                        className="rounded p-1 font-bold hover:bg-contrast"
+                        onClick={closeRevokeConfirmationDialog}
+                      >
+                        <Icon type="close" />
+                      </button>
+                    </AlertDialogLabel>
                     <AlertDialogDescription className="sk-panel-row">
                       <p className="text-base text-foreground lg:text-sm">{SessionStrings.RevokeText}</p>
                     </AlertDialogDescription>