From 11dde8d03dc4fde9de77a69255f78ef1cd000e57 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Tue, 17 Jan 2023 00:33:20 +0530
Subject: [PATCH] refactor: alert close button

---
 packages/styles/src/Alert/Alert.ts            | 16 ++++++++-
 .../ConfirmDeleteAccountModal.tsx             | 28 ++++++++-------
 .../ConfirmSignoutModal.tsx                   | 36 ++++++++++---------
 .../OtherSessionsSignOut.tsx                  | 28 ++++++++-------
 .../SessionsModal/SessionsModal.tsx           | 22 +++++++-----
 5 files changed, 81 insertions(+), 49 deletions(-)

diff --git a/packages/styles/src/Alert/Alert.ts b/packages/styles/src/Alert/Alert.ts
index f730ed58b..e9de199a5 100644
--- a/packages/styles/src/Alert/Alert.ts
+++ b/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()
+      }
+    }
   }
 }
diff --git a/packages/web/src/javascripts/Components/ConfirmDeleteAccountModal/ConfirmDeleteAccountModal.tsx b/packages/web/src/javascripts/Components/ConfirmDeleteAccountModal/ConfirmDeleteAccountModal.tsx
index 5aa84876a..6a31e054a 100644
--- a/packages/web/src/javascripts/Components/ConfirmDeleteAccountModal/ConfirmDeleteAccountModal.tsx
+++ b/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>
diff --git a/packages/web/src/javascripts/Components/ConfirmSignoutModal/ConfirmSignoutModal.tsx b/packages/web/src/javascripts/Components/ConfirmSignoutModal/ConfirmSignoutModal.tsx
index ec5dd1e0d..ac20e7491 100644
--- a/packages/web/src/javascripts/Components/ConfirmSignoutModal/ConfirmSignoutModal.tsx
+++ b/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>
diff --git a/packages/web/src/javascripts/Components/OtherSessionsSignOut/OtherSessionsSignOut.tsx b/packages/web/src/javascripts/Components/OtherSessionsSignOut/OtherSessionsSignOut.tsx
index 041a2dbbf..26424d17f 100644
--- a/packages/web/src/javascripts/Components/OtherSessionsSignOut/OtherSessionsSignOut.tsx
+++ b/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
-                    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)
-                    }}
-                  >
+                  <Button primary colorStyle="danger" onClick={confirm}>
                     End Sessions
                   </Button>
                 </div>
diff --git a/packages/web/src/javascripts/Components/SessionsModal/SessionsModal.tsx b/packages/web/src/javascripts/Components/SessionsModal/SessionsModal.tsx
index 4c12eb5a4..ddb57c591 100644
--- a/packages/web/src/javascripts/Components/SessionsModal/SessionsModal.tsx
+++ b/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
-          onDismiss={() => {
-            setRevokingSessionUuid('')
-          }}
-          leastDestructiveRef={cancelRevokeRef}
-          className="p-0"
-        >
+        <AlertDialog onDismiss={closeRevokeConfirmationDialog} 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>