chore: fix modal close on escape

packages/web/src/javascripts/Components/Preferences/Panes/Account/Credentials.tsx

@@ -58,12 +58,12 @@ const Credentials: FunctionComponent<Props> = ({ application }: Props) => {
             Current password was set on <span className="font-bold">{passwordCreatedOn}</span>
           </Text>
           <Button className="mt-3 min-w-20" label="Change password" onClick={presentPasswordWizard} />
-          <ModalOverlay isOpen={isChangeEmailDialogOpen}>
+          <ModalOverlay isOpen={isChangeEmailDialogOpen} close={closeChangeEmailDialog}>
             <ChangeEmail onCloseDialog={closeChangeEmailDialog} application={application} />
           </ModalOverlay>
         </PreferencesSegment>
       </PreferencesGroup>
-      <ModalOverlay isOpen={shouldShowPasswordWizard}>
+      <ModalOverlay isOpen={shouldShowPasswordWizard} close={dismissPasswordWizard}>
         <PasswordWizard application={application} dismissModal={dismissPasswordWizard} />
       </ModalOverlay>
     </>

packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/SubscriptionSharing.tsx

@@ -48,7 +48,7 @@ const SubscriptionSharing: FunctionComponent<Props> = ({ application, viewContro
                 {!subscriptionState.allInvitationsUsed && (
                   <Button className="min-w-20" label="Invite" onClick={() => setIsInviteDialogOpen(true)} />
                 )}
-                <ModalOverlay isOpen={isInviteDialogOpen}>
+                <ModalOverlay isOpen={isInviteDialogOpen} close={closeInviteDialog}>
                   <Invite
                     onCloseDialog={closeInviteDialog}
                     application={application}

packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/SmartViews.tsx

@@ -89,10 +89,13 @@ const SmartViews = ({ application, featuresController }: Props) => {
           )}
         </PreferencesSegment>
       </PreferencesGroup>
-      <ModalOverlay isOpen={!!editSmartViewModalController.view}>
+      <ModalOverlay isOpen={!!editSmartViewModalController.view} close={editSmartViewModalController.closeDialog}>
         <EditSmartViewModal controller={editSmartViewModalController} platform={application.platform} />
       </ModalOverlay>
-      <ModalOverlay isOpen={addSmartViewModalController.isAddingSmartView}>
+      <ModalOverlay
+        isOpen={addSmartViewModalController.isAddingSmartView}
+        close={addSmartViewModalController.closeModal}
+      >
         <AddSmartViewModal controller={addSmartViewModalController} platform={application.platform} />
       </ModalOverlay>
     </>

packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorAuthView/TwoFactorAuthView.tsx

@@ -113,7 +113,7 @@ const TwoFactorAuthView: FunctionComponent<Props> = ({ auth, application }) => {
           </PreferencesSegment>
         )}
       </PreferencesGroup>
-      <ModalOverlay isOpen={shouldShowActivationModal}>
+      <ModalOverlay isOpen={shouldShowActivationModal} close={closeActivationModal}>
         <Modal title={activationModalTitle} close={closeActivationModal} actions={activationModalActions}>
           {shouldShowActivationModal && <TwoFactorActivationView activation={auth.status} />}
         </Modal>

packages/web/src/javascripts/Components/Preferences/Panes/Security/U2F/U2FView/U2FView.tsx

@@ -76,7 +76,7 @@ const U2FView: FunctionComponent<Props> = ({ application, userProvider }) => {
           </PreferencesSegment>
         )}
       </PreferencesGroup>
-      <ModalOverlay isOpen={showDeviceAddingModal}>
+      <ModalOverlay isOpen={showDeviceAddingModal} close={() => setShowDeviceAddingModal(false)}>
         <U2FAddDeviceView
           onDeviceAddingModalToggle={setShowDeviceAddingModal}
           onDeviceAdded={loadAuthenticatorDevices}

packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx

@@ -7,8 +7,6 @@ import { PreferencesProps } from './PreferencesProps'
 import { useAndroidBackHandler } from '@/NativeMobileWeb/useAndroidBackHandler'
 import Modal, { ModalAction } from '../Modal/Modal'
 import { classNames } from '@standardnotes/snjs'
-import { useCommandService } from '../CommandProvider'
-import { ESCAPE_COMMAND } from '@standardnotes/ui-services'
 import { useAvailableSafeAreaPadding } from '@/Hooks/useSafeAreaPadding'
 import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
 import Icon from '../Icon/Icon'
@@ -20,8 +18,6 @@ const PreferencesView: FunctionComponent<PreferencesProps> = ({
   userProvider,
   mfaProvider,
 }) => {
-  const commandService = useCommandService()
-
   const menu = useMemo(
     () => new PreferencesMenu(application, viewControllerManager.enableUnfinishedFeatures),
     [viewControllerManager.enableUnfinishedFeatures, application],
@@ -47,16 +43,6 @@ const PreferencesView: FunctionComponent<PreferencesProps> = ({
     }
   }, [addAndroidBackHandler, closePreferences])
 
-  useEffect(() => {
-    return commandService.addCommandHandler({
-      command: ESCAPE_COMMAND,
-      onKeyDown: () => {
-        closePreferences()
-        return true
-      },
-    })
-  }, [commandService, closePreferences])
-
   const { hasTopInset } = useAvailableSafeAreaPadding()
 
   const modalActions = useMemo(

packages/web/src/javascripts/Components/Preferences/PreferencesViewWrapper.tsx

@@ -51,6 +51,7 @@ const PreferencesViewWrapper: FunctionComponent<PreferencesViewWrapperProps> = (
       isOpen={viewControllerManager.preferencesController.isOpen}
       ref={setElement}
       animationVariant="horizontal"
+      close={viewControllerManager.preferencesController.closePreferences}
     >
       <PreferencesView
         closePreferences={viewControllerManager.preferencesController.closePreferences}