From 4de8357a189f70815f27151506e46022bd06400e Mon Sep 17 00:00:00 2001
From: Max Philippov <max.philippos@gmail.com>
Date: Tue, 19 Nov 2024 22:38:03 +0500
Subject: [PATCH] Stack Settings dialogs

- return explicit dialog result, ignore for now "cancel" result
- Settings passes down it's onClose to children dialogs so when they
  close via "close"
- fix #3868
---
 .../src/components/Dialog/BackButton.tsx      |   2 +
 .../frontend/src/components/Dialog/Dialog.tsx |  41 ++-
 .../src/components/Dialog/DialogHeader.tsx    |   6 +-
 .../src/components/Dialog/styles.module.scss  |   5 +
 .../src/components/Settings/Settings.tsx      | 277 +++++++++---------
 .../components/dialogs/ConfirmationDialog.tsx |  15 +-
 .../dialogs/EditProfileDialog/index.tsx       |  15 +-
 .../components/dialogs/ViewProfile/index.tsx  |  12 +-
 .../AccountDeletionScreen.tsx                 |   1 -
 .../WelcomeScreen/InstantOnboardingScreen.tsx |  25 +-
 .../WelcomeScreen/OnboardingScreen.tsx        |  18 +-
 .../screens/WelcomeScreen/index.tsx           |  36 +--
 .../frontend/src/contexts/DialogContext.tsx   |  10 +-
 13 files changed, 243 insertions(+), 220 deletions(-)

diff --git a/packages/frontend/src/components/Dialog/BackButton.tsx b/packages/frontend/src/components/Dialog/BackButton.tsx
index b3968c668a..9dbadde31f 100644
--- a/packages/frontend/src/components/Dialog/BackButton.tsx
+++ b/packages/frontend/src/components/Dialog/BackButton.tsx
@@ -14,6 +14,8 @@ export default function BackButton(
 
   return (
     <HeaderButton
+      value='cancel'
+      formMethod='dialog'
       aria-label={tx('back')}
       icon='arrow-left'
       iconSize={24}
diff --git a/packages/frontend/src/components/Dialog/Dialog.tsx b/packages/frontend/src/components/Dialog/Dialog.tsx
index 804db65a01..5ed0afaaad 100644
--- a/packages/frontend/src/components/Dialog/Dialog.tsx
+++ b/packages/frontend/src/components/Dialog/Dialog.tsx
@@ -50,45 +50,44 @@ const Dialog = React.memo<Props>(
             rect.left <= ev.clientX &&
             ev.clientX <= rect.left + rect.width
           if (!isInDialog) {
-            const cancelEvent = new Event('cancel')
-            dialog.current.dispatchEvent(cancelEvent)
-            // cancel event doesn't trigger dialog close
-            dialog.current.close()
+            dialog.current.close('cancel')
           }
         }
       : () => {}
 
-    const onClose = (value: any) => {
-      props.onClose && props.onClose(value)
-      dialog.current!.style.display = 'none'
+    const onClose = (_: any) => {
+      props.onClose && props.onClose(dialog.current?.returnValue)
     }
 
-    const onCancel = (ev: React.BaseSyntheticEvent) => {
+    const onEscapePress = (ev: React.BaseSyntheticEvent) => {
+      // by default this fires a 'close' event with undefined as value
+      // to unify everything we explicitly call close with 'cancel' value
+      ev.preventDefault()
       if (!canEscapeKeyClose) {
-        ev.preventDefault()
+        return
       }
+
+      dialog.current?.close('cancel')
     }
 
     useEffect(() => {
-      // calling showModal is "only" the way to have ::backdrop
+      // calling showModal is "only" the way to have ::backdrop and "cancel" event
       dialog.current?.showModal()
-      dialog.current!.style.display = 'flex'
     })
 
-    let style
-
-    if (!unstyled) {
-      style = {
-        width: width && `${width}px`,
-        height: height && `${height}px`,
-      }
-    }
+    const style = unstyled
+      ? undefined
+      : {
+          width: width && `${width}px`,
+          height: height && `${height}px`,
+        }
 
+    // NOTE: do not set method="dialog" on form, it will cause every button to close the dialog
     return (
       <dialog
         onClick={onClick}
         onClose={onClose}
-        onCancel={onCancel}
+        onCancel={onEscapePress}
         ref={dialog}
         className={classNames(styles.dialog, props.className, {
           [styles.unstyled]: unstyled,
@@ -96,7 +95,7 @@ const Dialog = React.memo<Props>(
         style={style}
         data-testid={props['dataTestid']}
       >
-        {children}
+        <form>{children}</form>
       </dialog>
     )
   }
diff --git a/packages/frontend/src/components/Dialog/DialogHeader.tsx b/packages/frontend/src/components/Dialog/DialogHeader.tsx
index 9dd45f2bb4..9c0e1b7a95 100644
--- a/packages/frontend/src/components/Dialog/DialogHeader.tsx
+++ b/packages/frontend/src/components/Dialog/DialogHeader.tsx
@@ -28,7 +28,11 @@ export default function DialogHeader(props: Props) {
       {children}
       {onClickEdit && <EditButton onClick={onClickEdit} />}
       {onClose && (
-        <CloseButton onClick={onClose} data-testid={props.dataTestid} />
+        <CloseButton
+          value='close'
+          formMethod='dialog'
+          data-testid={props.dataTestid}
+        />
       )}
     </header>
   )
diff --git a/packages/frontend/src/components/Dialog/styles.module.scss b/packages/frontend/src/components/Dialog/styles.module.scss
index 1debebf310..c3c231311a 100644
--- a/packages/frontend/src/components/Dialog/styles.module.scss
+++ b/packages/frontend/src/components/Dialog/styles.module.scss
@@ -3,8 +3,13 @@ $paddingHorizontal: 30px;
 $paddingVertical: 20px;
 
 .dialog {
+  opacity: 0;
   padding: 0;
 
+  &:last-of-type {
+    opacity: 1;
+  }
+
   &.unstyled {
     background: none;
     width: 100vw;
diff --git a/packages/frontend/src/components/Settings/Settings.tsx b/packages/frontend/src/components/Settings/Settings.tsx
index 2a6991feb9..4595c981db 100644
--- a/packages/frontend/src/components/Settings/Settings.tsx
+++ b/packages/frontend/src/components/Settings/Settings.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useEffect } from 'react'
 
 import { useSettingsStore } from '../../stores/settings'
 import { SendBackupDialog } from '../dialogs/SetupMultiDevice'
@@ -20,19 +20,11 @@ import useTranslationFunction from '../../hooks/useTranslationFunction'
 
 import type { DialogProps } from '../../contexts/DialogContext'
 
-type SettingsView =
-  | 'main'
-  | 'chats_and_media'
-  | 'notifications'
-  | 'appearance'
-  | 'advanced'
-
 export default function Settings({ onClose }: DialogProps) {
   const { openDialog } = useDialog()
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const settingsStore = useSettingsStore()[0]!
   const tx = useTranslationFunction()
-  const [settingsMode, setSettingsMode] = useState<SettingsView>('main')
 
   useEffect(() => {
     if (window.__settingsOpened) {
@@ -48,137 +40,142 @@ export default function Settings({ onClose }: DialogProps) {
 
   return (
     <Dialog onClose={onClose} fixed width={400} data-testid='settings-dialog'>
-      {settingsMode === 'main' && (
-        <>
-          <DialogHeader
-            title={tx('menu_settings')}
-            onClose={onClose}
-            data-testid='close-settings'
-          />
-          <DialogBody>
-            <Profile settingsStore={settingsStore} />
-            <SettingsIconButton
-              icon='person'
-              onClick={() => {
-                openDialog(EditProfileDialog, {
-                  settingsStore,
-                })
-              }}
-            >
-              {tx('pref_edit_profile')}
-            </SettingsIconButton>
-            <SettingsSeparator />
-            <SettingsIconButton
-              icon='forum'
-              onClick={() => setSettingsMode('chats_and_media')}
-            >
-              {tx('pref_chats_and_media')}
-            </SettingsIconButton>
-            <SettingsIconButton
-              icon='bell'
-              onClick={() => setSettingsMode('notifications')}
-            >
-              {tx('pref_notifications')}
-            </SettingsIconButton>
-            <SettingsIconButton
-              icon='brightness-6'
-              onClick={() => setSettingsMode('appearance')}
-            >
-              {tx('pref_appearance')}
-            </SettingsIconButton>
-            <SettingsIconButton
-              icon='devices'
-              onClick={() => {
-                openDialog(SendBackupDialog)
-                onClose()
-              }}
-            >
-              {tx('multidevice_title')}
-            </SettingsIconButton>
-            <ConnectivityButton />
-            <SettingsIconButton
-              icon='code-tags'
-              onClick={() => setSettingsMode('advanced')}
-            >
-              {tx('menu_advanced')}
-            </SettingsIconButton>
-            <SettingsSeparator />
-            {!runtime.getRuntimeInfo().isMac && (
-              <SettingsIconButton
-                icon='favorite'
-                onClick={() => runtime.openLink(donationUrl)}
-                isLink
-              >
-                {tx('donate')}
-              </SettingsIconButton>
-            )}
-            <SettingsIconButton
-              icon='question_mark'
-              onClick={() => runtime.openHelpWindow()}
-            >
-              {tx('menu_help')}
-            </SettingsIconButton>
-            <SettingsIconButton icon='info' onClick={() => openDialog(About)}>
-              {tx('global_menu_help_about_desktop')}
-            </SettingsIconButton>
-          </DialogBody>
-        </>
-      )}
-      {settingsMode === 'chats_and_media' && (
-        <>
-          <DialogHeader
-            title={tx('pref_chats_and_media')}
-            onClickBack={() => setSettingsMode('main')}
-            onClose={onClose}
-          />
-          <DialogBody>
-            <ChatsAndMedia
-              settingsStore={settingsStore}
-              desktopSettings={settingsStore.desktopSettings}
-            />
-          </DialogBody>
-        </>
-      )}
-      {settingsMode === 'notifications' && (
-        <>
-          <DialogHeader
-            title={tx('pref_notifications')}
-            onClickBack={() => setSettingsMode('main')}
-            onClose={onClose}
-          />
-          <DialogBody>
-            <Notifications desktopSettings={settingsStore.desktopSettings} />
-          </DialogBody>
-        </>
-      )}
-      {settingsMode === 'appearance' && (
-        <>
-          <DialogHeader
-            title={tx('pref_appearance')}
-            onClickBack={() => setSettingsMode('main')}
-            onClose={onClose}
-          />
-          <DialogBody>
-            <Appearance
-              rc={settingsStore.rc}
-              desktopSettings={settingsStore.desktopSettings}
-              settingsStore={settingsStore}
-            />
-          </DialogBody>
-        </>
-      )}
-      {settingsMode === 'advanced' && (
-        <>
-          <DialogHeader
-            title={tx('menu_advanced')}
-            onClickBack={() => setSettingsMode('main')}
-            onClose={onClose}
-          />
-          <DialogBody>
-            <Advanced settingsStore={settingsStore} />
-          </DialogBody>
-        </>
-      )}
+      <DialogHeader
+        title={tx('menu_settings')}
+        onClose={onClose}
+        data-testid='close-settings'
+      />
+      <DialogBody>
+        <Profile settingsStore={settingsStore} />
+        <SettingsIconButton
+          icon='person'
+          onClick={() => openDialog(EditProfileDialog, { onClose })}
+        >
+          {tx('pref_edit_profile')}
+        </SettingsIconButton>
+        <SettingsSeparator />
+        <SettingsIconButton
+          icon='forum'
+          onClick={() => openDialog(SettingsDialogChatsAndMedia, { onClose })}
+        >
+          {tx('pref_chats_and_media')}
+        </SettingsIconButton>
+        <SettingsIconButton
+          icon='bell'
+          onClick={() => openDialog(SettingsDialogNotifications, { onClose })}
+        >
+          {tx('pref_notifications')}
+        </SettingsIconButton>
+        <SettingsIconButton
+          icon='brightness-6'
+          onClick={() => openDialog(SettingsDialogAppearance, { onClose })}
+        >
+          {tx('pref_appearance')}
+        </SettingsIconButton>
+        <SettingsIconButton
+          icon='devices'
+          onClick={() => openDialog(SendBackupDialog, { onClose })}
+        >
+          {tx('multidevice_title')}
+        </SettingsIconButton>
+        <ConnectivityButton />
+        <SettingsIconButton
+          icon='code-tags'
+          onClick={() => openDialog(SettingsDialogAdvanced, { onClose })}
+        >
+          {tx('menu_advanced')}
+        </SettingsIconButton>
+        <SettingsSeparator />
+        {!runtime.getRuntimeInfo().isMac && (
+          <SettingsIconButton
+            icon='favorite'
+            onClick={() => runtime.openLink(donationUrl)}
+            isLink
+          >
+            {tx('donate')}
+          </SettingsIconButton>
+        )}
+        <SettingsIconButton
+          icon='question_mark'
+          onClick={() => runtime.openHelpWindow()}
+        >
+          {tx('menu_help')}
+        </SettingsIconButton>
+        <SettingsIconButton
+          icon='info'
+          onClick={() => openDialog(About, { onClose })}
+        >
+          {tx('global_menu_help_about_desktop')}
+        </SettingsIconButton>
+      </DialogBody>
+    </Dialog>
+  )
+}
+
+function SettingsDialogChatsAndMedia({ onClose }: DialogProps) {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const settingsStore = useSettingsStore()[0]!
+  const tx = useTranslationFunction()
+  return (
+    <Dialog onClose={onClose} fixed width={400}>
+      <DialogHeader title={tx('pref_chats_and_media')} onClose={onClose} />
+      <DialogBody>
+        <ChatsAndMedia
+          settingsStore={settingsStore}
+          desktopSettings={settingsStore.desktopSettings}
+        />
+      </DialogBody>
+    </Dialog>
+  )
+}
+
+function SettingsDialogNotifications({ onClose }: DialogProps) {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const settingsStore = useSettingsStore()[0]!
+  const tx = useTranslationFunction()
+  return (
+    <Dialog onClose={onClose} fixed width={400}>
+      <DialogHeader title={tx('pref_notifications')} onClose={onClose} />
+      <DialogBody>
+        <Notifications desktopSettings={settingsStore.desktopSettings} />
+      </DialogBody>
+    </Dialog>
+  )
+}
+
+function SettingsDialogAppearance({ onClose }: DialogProps) {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const settingsStore = useSettingsStore()[0]!
+  const tx = useTranslationFunction()
+
+  return (
+    <Dialog onClose={onClose} fixed width={400}>
+      <DialogHeader
+        onClickBack={() => {}}
+        title={tx('pref_appearance')}
+        onClose={onClose}
+      />
+      <DialogBody>
+        <Appearance
+          rc={settingsStore.rc}
+          desktopSettings={settingsStore.desktopSettings}
+          settingsStore={settingsStore}
+        />
+      </DialogBody>
+    </Dialog>
+  )
+}
+
+function SettingsDialogAdvanced({ onClose }: DialogProps) {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const settingsStore = useSettingsStore()[0]!
+  const tx = useTranslationFunction()
+  return (
+    <Dialog onClose={onClose} fixed width={400}>
+      <DialogHeader title={tx('menu_advanced')} onClose={onClose} />
+      <DialogBody>
+        <Advanced settingsStore={settingsStore} />
+      </DialogBody>
     </Dialog>
   )
 }
diff --git a/packages/frontend/src/components/dialogs/ConfirmationDialog.tsx b/packages/frontend/src/components/dialogs/ConfirmationDialog.tsx
index 934bdc4f33..d6c9e89b55 100644
--- a/packages/frontend/src/components/dialogs/ConfirmationDialog.tsx
+++ b/packages/frontend/src/components/dialogs/ConfirmationDialog.tsx
@@ -34,14 +34,9 @@ export default function ConfirmationDialog({
 }: Props) {
   const tx = useTranslationFunction()
 
-  const handleClick = (yes: boolean) => {
+  const handleClose = (result: string) => {
     onClose()
-    cb(yes)
-  }
-
-  const handleClose = () => {
-    onClose()
-    cb(false)
+    cb(result === 'confirm')
   }
 
   return (
@@ -55,14 +50,16 @@ export default function ConfirmationDialog({
       <DialogFooter>
         <FooterActions>
           <FooterActionButton
-            onClick={() => handleClick(false)}
+            formMethod='dialog'
+            value='cancel'
             data-testid='cancel'
           >
             {cancelLabel || tx('cancel')}
           </FooterActionButton>
           <FooterActionButton
             styling={isConfirmDanger ? 'danger' : undefined}
-            onClick={() => handleClick(true)}
+            formMethod='dialog'
+            value='confirm'
             data-testid='confirm'
           >
             {confirmLabel || tx('yes')}
diff --git a/packages/frontend/src/components/dialogs/EditProfileDialog/index.tsx b/packages/frontend/src/components/dialogs/EditProfileDialog/index.tsx
index b8646aacde..6c2d099464 100644
--- a/packages/frontend/src/components/dialogs/EditProfileDialog/index.tsx
+++ b/packages/frontend/src/components/dialogs/EditProfileDialog/index.tsx
@@ -1,8 +1,7 @@
 import React, { useState } from 'react'
 
-import SettingsStoreInstance, {
-  SettingsStoreState,
-} from '../../../stores/settings'
+import SettingsStoreInstance from '../../../stores/settings'
+import { useSettingsStore } from '../../../stores/settings'
 import { BackendRemote } from '../../../backend-com'
 import { selectedAccountId } from '../../../ScreenController'
 import { DeltaInput, DeltaTextarea } from '../../Login-Styles'
@@ -24,7 +23,6 @@ import styles from './styles.module.scss'
 import type { DialogProps } from '../../../contexts/DialogContext'
 
 type Props = {
-  settingsStore: SettingsStoreState
   firstSetup?: boolean
 } & DialogProps
 
@@ -39,14 +37,13 @@ export default function EditProfileDialog({ onClose, ...props }: Props) {
   )
 }
 
-function EditProfileDialogInner({
-  onClose,
-  settingsStore,
-  firstSetup = false,
-}: Props) {
+function EditProfileDialogInner({ onClose, firstSetup = false }: Props) {
   const tx = useTranslationFunction()
   const openAlertDialog = useAlertDialog()
 
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const settingsStore = useSettingsStore()[0]!
+
   const [displayname, setDisplayname] = useState(
     settingsStore.settings.displayname || ''
   )
diff --git a/packages/frontend/src/components/dialogs/ViewProfile/index.tsx b/packages/frontend/src/components/dialogs/ViewProfile/index.tsx
index 6fb589c300..0fa017ad12 100644
--- a/packages/frontend/src/components/dialogs/ViewProfile/index.tsx
+++ b/packages/frontend/src/components/dialogs/ViewProfile/index.tsx
@@ -81,16 +81,24 @@ export default function ViewProfile(
 
   const onClickViewProfileMenu = useViewProfileMenu(contact)
 
+  const handleClose = (result: string) => {
+    if (result === 'close') {
+      onClose()
+    } else if (result === 'cancel') {
+      onBack && onBack()
+    }
+  }
+
   return (
     <Dialog
       width={400}
-      onClose={onClose}
+      onClose={handleClose}
       fixed
       className={styles.viewProfileDialog}
     >
       <DialogHeader
         title={tx('contact')}
-        onClose={onClose}
+        onClose={handleClose}
         onClickBack={onBack}
       >
         {showMenu && (
diff --git a/packages/frontend/src/components/screens/AccountDeletionScreen/AccountDeletionScreen.tsx b/packages/frontend/src/components/screens/AccountDeletionScreen/AccountDeletionScreen.tsx
index be394c8744..55383ebb0e 100644
--- a/packages/frontend/src/components/screens/AccountDeletionScreen/AccountDeletionScreen.tsx
+++ b/packages/frontend/src/components/screens/AccountDeletionScreen/AccountDeletionScreen.tsx
@@ -54,7 +54,6 @@ export default function AccountDeletionScreen({
         <Dialog
           canEscapeKeyClose={true}
           fixed={true}
-          onClose={() => {}}
           width={400}
           dataTestid='account-deletion-dialog'
         >
diff --git a/packages/frontend/src/components/screens/WelcomeScreen/InstantOnboardingScreen.tsx b/packages/frontend/src/components/screens/WelcomeScreen/InstantOnboardingScreen.tsx
index b761aa9b85..0d3afcdbbd 100644
--- a/packages/frontend/src/components/screens/WelcomeScreen/InstantOnboardingScreen.tsx
+++ b/packages/frontend/src/components/screens/WelcomeScreen/InstantOnboardingScreen.tsx
@@ -9,7 +9,7 @@ import useChat from '../../../hooks/chat/useChat'
 import useInstantOnboarding from '../../../hooks/useInstantOnboarding'
 import useTranslationFunction from '../../../hooks/useTranslationFunction'
 import { DeltaInput } from '../../Login-Styles'
-import { DialogBody, DialogContent, DialogHeader } from '../../Dialog'
+import Dialog, { DialogBody, DialogContent, DialogHeader } from '../../Dialog'
 import { ScreenContext } from '../../../contexts/ScreenContext'
 import { Screens } from '../../../ScreenController'
 
@@ -122,17 +122,22 @@ export default function InstantOnboardingScreen({
     openDialog(UseOtherServerDialog)
   }
 
-  const onClickBack = () => {
-    saveDisplayName()
-    onCancel()
+  const onClose = (result: string) => {
+    if (result === 'cancel') {
+      saveDisplayName()
+      onCancel()
+    }
   }
 
   return (
-    <>
-      <DialogHeader
-        onClickBack={onClickBack}
-        title={tx('instant_onboarding_title')}
-      />
+    <Dialog
+      fixed
+      onClose={onClose}
+      width={400}
+      canEscapeKeyClose={false}
+      canOutsideClickClose={false}
+    >
+      <DialogHeader title={tx('instant_onboarding_title')} />
       <DialogBody className={styles.welcomeScreenBody}>
         <DialogContent paddingBottom>
           <ProfileImageSelector
@@ -179,6 +184,6 @@ export default function InstantOnboardingScreen({
           </div>
         </DialogContent>
       </DialogBody>
-    </>
+    </Dialog>
   )
 }
diff --git a/packages/frontend/src/components/screens/WelcomeScreen/OnboardingScreen.tsx b/packages/frontend/src/components/screens/WelcomeScreen/OnboardingScreen.tsx
index 3e1ef8eb2f..969e0e69a1 100644
--- a/packages/frontend/src/components/screens/WelcomeScreen/OnboardingScreen.tsx
+++ b/packages/frontend/src/components/screens/WelcomeScreen/OnboardingScreen.tsx
@@ -6,7 +6,7 @@ import Button from '../../Button'
 import useDialog from '../../../hooks/dialog/useDialog'
 import useTranslationFunction from '../../../hooks/useTranslationFunction'
 import { BackendRemote, EffectfulBackendActions } from '../../../backend-com'
-import { DialogBody, DialogContent, DialogHeader } from '../../Dialog'
+import Dialog, { DialogBody, DialogContent, DialogHeader } from '../../Dialog'
 import { getLogger } from '../../../../../shared/logger'
 
 import styles from './styles.module.scss'
@@ -56,8 +56,20 @@ export default function OnboardingScreen(props: Props) {
     }
   }
 
+  const onClose = (result: string) => {
+    if (result === 'cancel') {
+      onClickBackButton()
+    }
+  }
+
   return (
-    <>
+    <Dialog
+      fixed
+      onClose={onClose}
+      width={400}
+      canEscapeKeyClose={false}
+      canOutsideClickClose={false}
+    >
       <DialogHeader
         onClickBack={props.showBackButton ? onClickBackButton : undefined}
         title={
@@ -95,6 +107,6 @@ export default function OnboardingScreen(props: Props) {
           </div>
         </DialogContent>
       </DialogBody>
-    </>
+    </Dialog>
   )
 }
diff --git a/packages/frontend/src/components/screens/WelcomeScreen/index.tsx b/packages/frontend/src/components/screens/WelcomeScreen/index.tsx
index 0712dea78a..0db484c167 100644
--- a/packages/frontend/src/components/screens/WelcomeScreen/index.tsx
+++ b/packages/frontend/src/components/screens/WelcomeScreen/index.tsx
@@ -1,6 +1,5 @@
 import React, { useLayoutEffect, useState } from 'react'
 
-import Dialog from '../../Dialog'
 import ImageBackdrop from '../../ImageBackdrop'
 import InstantOnboardingScreen from './InstantOnboardingScreen'
 import OnboardingScreen from './OnboardingScreen'
@@ -37,27 +36,20 @@ export default function WelcomeScreen({ selectedAccountId, ...props }: Props) {
 
   return (
     <ImageBackdrop variant='welcome'>
-      <Dialog
-        fixed
-        width={400}
-        canEscapeKeyClose={false}
-        canOutsideClickClose={false}
-      >
-        {!showInstantOnboarding ? (
-          <OnboardingScreen
-            onNextStep={() => startInstantOnboardingFlow()}
-            selectedAccountId={selectedAccountId}
-            showBackButton={showBackButton}
-            hasConfiguredAccounts={hasConfiguredAccounts}
-            {...props}
-          />
-        ) : (
-          <InstantOnboardingScreen
-            selectedAccountId={selectedAccountId}
-            onCancel={() => resetInstantOnboarding()}
-          />
-        )}
-      </Dialog>
+      {!showInstantOnboarding ? (
+        <OnboardingScreen
+          onNextStep={() => startInstantOnboardingFlow()}
+          selectedAccountId={selectedAccountId}
+          showBackButton={showBackButton}
+          hasConfiguredAccounts={hasConfiguredAccounts}
+          {...props}
+        />
+      ) : (
+        <InstantOnboardingScreen
+          selectedAccountId={selectedAccountId}
+          onCancel={() => resetInstantOnboarding()}
+        />
+      )}
     </ImageBackdrop>
   )
 }
diff --git a/packages/frontend/src/contexts/DialogContext.tsx b/packages/frontend/src/contexts/DialogContext.tsx
index ba2058b5f8..a7111e1609 100644
--- a/packages/frontend/src/contexts/DialogContext.tsx
+++ b/packages/frontend/src/contexts/DialogContext.tsx
@@ -58,11 +58,17 @@ export const DialogContextProvider = ({ children }: PropsWithChildren<{}>) => {
         // From this point on we are only interested in the `DialogProps`
         dialogElement as DialogElementConstructor<DialogProps>,
         {
+          // set additionalProps first so we don't override onClose,
+          // cause we need to combine additionalProps.onClose with our own dialog management
+          ...additionalProps,
           key: `dialog-${newDialogId}`,
-          onClose: () => {
+          onClose: (value: string) => {
             closeDialog(newDialogId)
+
+            if (value !== 'cancel') {
+              additionalProps && additionalProps.onClose()
+            }
           },
-          ...additionalProps,
         }
       )