From d583311de7aeb8baf57c356638f004865c5affcc Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Thu, 26 Jan 2023 22:08:12 +0530
Subject: [PATCH] refactor: modals

---
 .../CameraCaptureModal/PhotoCaptureModal.tsx  |   2 +-
 .../CameraCaptureModal/VideoCaptureModal.tsx  |   2 +-
 .../ChallengeModal/ChallengeModal.tsx         |  46 +-
 .../ChangeEditor/ChangeEditorMenu.tsx         |   2 +-
 .../ChangeEditor/ChangeMultipleMenu.tsx       |   2 +-
 .../Header/AddItemMenuButton.tsx              |   2 +-
 .../FilePreview/FilePreviewModal.tsx          | 438 +++++++++---------
 .../Components/ImportModal/ImportModal.tsx    |   4 +-
 .../{Shared => Modal}/MobileModalAction.tsx   |   0
 .../Components/Modal/MobileModalHeader.tsx    |  13 +
 .../Components/{Shared => Modal}/Modal.tsx    |  40 +-
 .../ModalAndroidBackHandler.tsx               |   0
 .../{Shared => Modal}/ModalDialogButtons.tsx  |  17 +-
 .../{Shared => Modal}/ModalOverlay.tsx        |  18 +-
 .../{Shared => Modal}/useModalAnimation.ts    |   0
 .../NoteView/SuperEditor/SuperEditor.tsx      |   2 +-
 .../SuperEditor/SuperNoteImporter.tsx         |   2 +-
 .../SuperEditor/SuperNoteMarkdownPreview.tsx  |   2 +-
 .../PasswordWizard/PasswordWizard.tsx         |   2 +-
 .../PermissionsModal/PermissionsModal.tsx     |  16 +-
 .../PermissionsModalWrapper.tsx               |   2 +-
 .../Popover/MobilePopoverContent.tsx          |   9 +-
 .../Panes/Account/ChangeEmail/ChangeEmail.tsx |   2 +-
 .../Preferences/Panes/Account/Credentials.tsx |   2 +-
 .../SubscriptionSharing/Invite/Invite.tsx     |   2 +-
 .../SubscriptionSharing.tsx                   |   2 +-
 .../General/SmartViews/EditSmartViewModal.tsx |   2 +-
 .../Panes/General/SmartViews/SmartViews.tsx   |   2 +-
 .../TwoFactorAuthView/TwoFactorAuthView.tsx   |   4 +-
 .../Preferences/PreferencesView.tsx           |   7 +-
 .../Preferences/PreferencesViewWrapper.tsx    |   2 +-
 .../HistoryModalDialogContent.tsx             |   7 +-
 .../RevisionHistoryModal.tsx                  |   2 +-
 .../SessionsModal/SessionsModal.tsx           |   4 +-
 .../Components/Shared/ModalDialog.tsx         |  29 --
 .../Shared/ModalDialogDescription.tsx         |  13 -
 .../Components/Shared/ModalDialogLabel.tsx    |  74 ---
 .../SmartViewBuilder/AddSmartViewModal.tsx    |   2 +-
 .../Components/Tags/SmartViewsSection.tsx     |   2 +-
 39 files changed, 333 insertions(+), 446 deletions(-)
 rename packages/web/src/javascripts/Components/{Shared => Modal}/MobileModalAction.tsx (100%)
 create mode 100644 packages/web/src/javascripts/Components/Modal/MobileModalHeader.tsx
 rename packages/web/src/javascripts/Components/{Shared => Modal}/Modal.tsx (87%)
 rename packages/web/src/javascripts/Components/{Shared => Modal}/ModalAndroidBackHandler.tsx (100%)
 rename packages/web/src/javascripts/Components/{Shared => Modal}/ModalDialogButtons.tsx (58%)
 rename packages/web/src/javascripts/Components/{Shared => Modal}/ModalOverlay.tsx (54%)
 rename packages/web/src/javascripts/Components/{Shared => Modal}/useModalAnimation.ts (100%)
 delete mode 100644 packages/web/src/javascripts/Components/Shared/ModalDialog.tsx
 delete mode 100644 packages/web/src/javascripts/Components/Shared/ModalDialogDescription.tsx
 delete mode 100644 packages/web/src/javascripts/Components/Shared/ModalDialogLabel.tsx

diff --git a/packages/web/src/javascripts/Components/CameraCaptureModal/PhotoCaptureModal.tsx b/packages/web/src/javascripts/Components/CameraCaptureModal/PhotoCaptureModal.tsx
index 74727a017..4015c3b01 100644
--- a/packages/web/src/javascripts/Components/CameraCaptureModal/PhotoCaptureModal.tsx
+++ b/packages/web/src/javascripts/Components/CameraCaptureModal/PhotoCaptureModal.tsx
@@ -7,7 +7,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import Dropdown from '../Dropdown/Dropdown'
 import Icon from '../Icon/Icon'
 import DecoratedInput from '../Input/DecoratedInput'
-import Modal from '../Shared/Modal'
+import Modal from '../Modal/Modal'
 
 type Props = {
   filesController: FilesController
diff --git a/packages/web/src/javascripts/Components/CameraCaptureModal/VideoCaptureModal.tsx b/packages/web/src/javascripts/Components/CameraCaptureModal/VideoCaptureModal.tsx
index 45fb23795..4bcde2d6f 100644
--- a/packages/web/src/javascripts/Components/CameraCaptureModal/VideoCaptureModal.tsx
+++ b/packages/web/src/javascripts/Components/CameraCaptureModal/VideoCaptureModal.tsx
@@ -6,7 +6,7 @@ import { observer } from 'mobx-react-lite'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import Icon from '../Icon/Icon'
 import DecoratedInput from '../Input/DecoratedInput'
-import Modal from '../Shared/Modal'
+import Modal from '../Modal/Modal'
 
 type Props = {
   filesController: FilesController
diff --git a/packages/web/src/javascripts/Components/ChallengeModal/ChallengeModal.tsx b/packages/web/src/javascripts/Components/ChallengeModal/ChallengeModal.tsx
index 029d34fce..931b902c7 100644
--- a/packages/web/src/javascripts/Components/ChallengeModal/ChallengeModal.tsx
+++ b/packages/web/src/javascripts/Components/ChallengeModal/ChallengeModal.tsx
@@ -1,5 +1,4 @@
 import { WebApplication } from '@/Application/Application'
-import { DialogContent, DialogOverlay } from '@reach/dialog'
 import {
   ButtonType,
   Challenge,
@@ -21,8 +20,10 @@ import { ChallengeModalValues } from './ChallengeModalValues'
 import { InputValue } from './InputValue'
 import { isIOS, isMobileScreen } from '@/Utils'
 import { classNames } from '@standardnotes/utils'
-import MobileModalAction from '../Shared/MobileModalAction'
-import { useModalAnimation } from '../Shared/useModalAnimation'
+import MobileModalAction from '../Modal/MobileModalAction'
+import MobileModalHeader from '../Modal/MobileModalHeader'
+import ModalOverlay from '../Modal/ModalOverlay'
+import Modal from '../Modal/Modal'
 
 type Props = {
   application: WebApplication
@@ -211,38 +212,35 @@ const ChallengeModal: FunctionComponent<Props> = ({
     }
   }, [application, cancelChallenge, challenge.cancelable])
 
-  const [isMounted, setElement] = useModalAnimation(!!challenge.prompts.length)
-
-  if (!isMounted) {
-    return null
-  }
-
   const isFullScreenBlocker = challenge.reason === ChallengeReason.ApplicationUnlock
   const isMobileOverlay = isMobileScreen() && !isFullScreenBlocker
 
   return (
-    <DialogOverlay
+    <ModalOverlay
+      isOpen={true}
       className={`sn-component p-0 ${isFullScreenBlocker ? 'bg-passive-5' : ''}`}
       onDismiss={cancelChallenge}
       dangerouslyBypassFocusLock={bypassModalFocusLock}
       key={challenge.id}
-      ref={setElement}
     >
-      <DialogContent
-        aria-label="Challenge modal"
-        className={classNames(
-          'challenge-modal relative m-0 flex h-full w-full flex-col items-center rounded border-solid border-border bg-default p-0 md:h-auto md:w-auto md:border',
-          !isMobileScreen() && 'shadow-overlay-light',
-          isMobileOverlay && 'shadow-overlay-light border border-solid border-border',
-        )}
+      <Modal
+        title="Authenticate"
+        close={cancelChallenge}
+        className={{
+          content: classNames(
+            'challenge-modal relative m-0 flex h-full w-full flex-col items-center rounded border-solid border-border bg-default p-0 md:h-auto md:w-auto md:border',
+            !isMobileScreen() && 'shadow-overlay-light',
+            isMobileOverlay && 'shadow-overlay-light border border-solid border-border',
+          ),
+        }}
       >
-        <div
+        {/* <div
           className={classNames(
             'w-full border-b border-solid border-border py-1.5 px-1.5 md:hidden',
             isIOS() && 'pt-safe-top',
           )}
         >
-          <div className="grid w-full grid-cols-[0.35fr_1fr_0.35fr] gap-2">
+          <MobileModalHeader>
             {challenge.cancelable ? (
               <MobileModalAction slot="left" type="cancel" action={cancelChallenge}>
                 Cancel
@@ -252,8 +250,8 @@ const ChallengeModal: FunctionComponent<Props> = ({
             )}
             <div className="flex items-center justify-center text-base font-semibold text-text">Authenticate</div>
             <div />
-          </div>
-        </div>
+          </MobileModalHeader>
+        </div> */}
         {challenge.cancelable && (
           <button
             onClick={cancelChallenge}
@@ -326,8 +324,8 @@ const ChallengeModal: FunctionComponent<Props> = ({
             />
           )}
         </div>
-      </DialogContent>
-    </DialogOverlay>
+      </Modal>
+    </ModalOverlay>
   )
 }
 
diff --git a/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx b/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
index 58eee1d48..1e63741fe 100644
--- a/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
+++ b/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
@@ -13,7 +13,7 @@ import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/Premium
 import { SuperNoteImporter } from '../NoteView/SuperEditor/SuperNoteImporter'
 import MenuRadioButtonItem from '../Menu/MenuRadioButtonItem'
 import { Pill } from '../Preferences/PreferencesComponents/Content'
-import ModalOverlay from '../Shared/ModalOverlay'
+import ModalOverlay from '../Modal/ModalOverlay'
 
 type ChangeEditorMenuProps = {
   application: WebApplication
diff --git a/packages/web/src/javascripts/Components/ChangeEditor/ChangeMultipleMenu.tsx b/packages/web/src/javascripts/Components/ChangeEditor/ChangeMultipleMenu.tsx
index 8e3bdd41c..8cd238ebf 100644
--- a/packages/web/src/javascripts/Components/ChangeEditor/ChangeMultipleMenu.tsx
+++ b/packages/web/src/javascripts/Components/ChangeEditor/ChangeMultipleMenu.tsx
@@ -12,7 +12,7 @@ import { EditorMenuGroup } from '../NotesOptions/EditorMenuGroup'
 import { EditorMenuItem } from '../NotesOptions/EditorMenuItem'
 import { SuperNoteImporter } from '../NoteView/SuperEditor/SuperNoteImporter'
 import { Pill } from '../Preferences/PreferencesComponents/Content'
-import ModalOverlay from '../Shared/ModalOverlay'
+import ModalOverlay from '../Modal/ModalOverlay'
 
 const getGroupId = (group: EditorMenuGroup) => group.title.toLowerCase().replace(/\s/, '-')
 
diff --git a/packages/web/src/javascripts/Components/ContentListView/Header/AddItemMenuButton.tsx b/packages/web/src/javascripts/Components/ContentListView/Header/AddItemMenuButton.tsx
index db263f9a5..4af112bfc 100644
--- a/packages/web/src/javascripts/Components/ContentListView/Header/AddItemMenuButton.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/Header/AddItemMenuButton.tsx
@@ -4,7 +4,7 @@ import Icon from '@/Components/Icon/Icon'
 import Menu from '@/Components/Menu/Menu'
 import MenuItem from '@/Components/Menu/MenuItem'
 import Popover from '@/Components/Popover/Popover'
-import ModalOverlay from '@/Components/Shared/ModalOverlay'
+import ModalOverlay from '@/Components/Modal/ModalOverlay'
 import { FilesController } from '@/Controllers/FilesController'
 import { PhotoRecorder } from '@/Controllers/Moments/PhotoRecorder'
 import { classNames } from '@standardnotes/snjs'
diff --git a/packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx b/packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx
index 8d439c8ba..26a8f4a5e 100644
--- a/packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx
+++ b/packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx
@@ -1,15 +1,6 @@
 import { WebApplication } from '@/Application/Application'
-import { DialogContent, DialogOverlay } from '@reach/dialog'
-import {
-  ForwardedRef,
-  forwardRef,
-  FunctionComponent,
-  KeyboardEventHandler,
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
+import { DialogContent } from '@reach/dialog'
+import { FunctionComponent, KeyboardEventHandler, useCallback, useMemo, useRef, useState } from 'react'
 import { getFileIconComponent } from './getFileIconComponent'
 import Icon from '@/Components/Icon/Icon'
 import FilePreviewInfoPanel from './FilePreviewInfoPanel'
@@ -26,248 +17,243 @@ import LinkedItemBubblesContainer from '../LinkedItems/LinkedItemBubblesContaine
 import StyledTooltip from '../StyledTooltip/StyledTooltip'
 import DecoratedInput from '../Input/DecoratedInput'
 import { mergeRefs } from '@/Hooks/mergeRefs'
-import { useModalAnimation } from '../Shared/useModalAnimation'
+import { classNames } from '@standardnotes/snjs'
+import { isIOS } from '@/Utils'
+import ModalOverlay from '../Modal/ModalOverlay'
 
 type Props = {
   application: WebApplication
   viewControllerManager: ViewControllerManager
 }
 
-const FilePreviewModal = observer(
-  forwardRef(({ application, viewControllerManager }: Props, ref: ForwardedRef<HTMLDivElement>) => {
-    const { currentFile, setCurrentFile, otherFiles, dismiss } = viewControllerManager.filePreviewModalController
+const FilePreviewModal = observer(({ application, viewControllerManager }: Props) => {
+  const { currentFile, setCurrentFile, otherFiles, dismiss } = viewControllerManager.filePreviewModalController
 
-    const [isRenaming, setIsRenaming] = useState(false)
-    const renameInputRef = useRef<HTMLInputElement>(null)
-    const [showLinkedBubblesContainer, setShowLinkedBubblesContainer] = useState(false)
-    const [showOptionsMenu, setShowOptionsMenu] = useState(false)
-    const [showFileInfoPanel, setShowFileInfoPanel] = useState(false)
-    const menuButtonRef = useRef<HTMLButtonElement>(null)
-    const closeButtonRef = useRef<HTMLButtonElement>(null)
+  const [isRenaming, setIsRenaming] = useState(false)
+  const renameInputRef = useRef<HTMLInputElement>(null)
+  const [showLinkedBubblesContainer, setShowLinkedBubblesContainer] = useState(false)
+  const [showOptionsMenu, setShowOptionsMenu] = useState(false)
+  const [showFileInfoPanel, setShowFileInfoPanel] = useState(false)
+  const menuButtonRef = useRef<HTMLButtonElement>(null)
+  const closeButtonRef = useRef<HTMLButtonElement>(null)
 
-    const keyDownHandler: KeyboardEventHandler = useCallback(
-      (event) => {
-        if (!currentFile) {
-          return null
-        }
-
-        const KeysToHandle: string[] = [KeyboardKey.Left, KeyboardKey.Right, KeyboardKey.Escape]
-
-        if (!KeysToHandle.includes(event.key) || event.target === renameInputRef.current) {
-          return
-        }
-
-        event.preventDefault()
-
-        const currentFileIndex = otherFiles.findIndex((fileFromArray) => fileFromArray.uuid === currentFile.uuid)
-
-        switch (event.key) {
-          case KeyboardKey.Left: {
-            const previousFileIndex = currentFileIndex - 1 >= 0 ? currentFileIndex - 1 : otherFiles.length - 1
-            const previousFile = otherFiles[previousFileIndex]
-            if (previousFile) {
-              setCurrentFile(previousFile)
-            }
-            break
-          }
-          case KeyboardKey.Right: {
-            const nextFileIndex = currentFileIndex + 1 < otherFiles.length ? currentFileIndex + 1 : 0
-            const nextFile = otherFiles[nextFileIndex]
-            if (nextFile) {
-              setCurrentFile(nextFile)
-            }
-            break
-          }
-          case KeyboardKey.Escape:
-            dismiss()
-            break
-        }
-      },
-      [currentFile, dismiss, otherFiles, setCurrentFile],
-    )
-
-    const IconComponent = useMemo(() => {
-      return currentFile
-        ? getFileIconComponent(getIconForFileType(currentFile.mimeType), 'w-6 h-6 flex-shrink-0')
-        : null
-    }, [currentFile])
-
-    const focusInputOnMount = useCallback((input: HTMLInputElement | null) => {
-      if (input) {
-        input.focus()
-      }
-    }, [])
-
-    const handleRename = useCallback(async () => {
+  const keyDownHandler: KeyboardEventHandler = useCallback(
+    (event) => {
       if (!currentFile) {
         return null
       }
-      if (renameInputRef.current) {
-        const newName = renameInputRef.current.value
-        if (newName && newName !== currentFile.name) {
-          await application.items.renameFile(currentFile, newName)
-          setIsRenaming(false)
-          setCurrentFile(application.items.findSureItem(currentFile.uuid))
-          return
-        }
-        setIsRenaming(false)
-      }
-    }, [application.items, currentFile, setCurrentFile])
 
+      const KeysToHandle: string[] = [KeyboardKey.Left, KeyboardKey.Right, KeyboardKey.Escape]
+
+      if (!KeysToHandle.includes(event.key) || event.target === renameInputRef.current) {
+        return
+      }
+
+      event.preventDefault()
+
+      const currentFileIndex = otherFiles.findIndex((fileFromArray) => fileFromArray.uuid === currentFile.uuid)
+
+      switch (event.key) {
+        case KeyboardKey.Left: {
+          const previousFileIndex = currentFileIndex - 1 >= 0 ? currentFileIndex - 1 : otherFiles.length - 1
+          const previousFile = otherFiles[previousFileIndex]
+          if (previousFile) {
+            setCurrentFile(previousFile)
+          }
+          break
+        }
+        case KeyboardKey.Right: {
+          const nextFileIndex = currentFileIndex + 1 < otherFiles.length ? currentFileIndex + 1 : 0
+          const nextFile = otherFiles[nextFileIndex]
+          if (nextFile) {
+            setCurrentFile(nextFile)
+          }
+          break
+        }
+        case KeyboardKey.Escape:
+          dismiss()
+          break
+      }
+    },
+    [currentFile, dismiss, otherFiles, setCurrentFile],
+  )
+
+  const IconComponent = useMemo(() => {
+    return currentFile ? getFileIconComponent(getIconForFileType(currentFile.mimeType), 'w-6 h-6 flex-shrink-0') : null
+  }, [currentFile])
+
+  const focusInputOnMount = useCallback((input: HTMLInputElement | null) => {
+    if (input) {
+      input.focus()
+    }
+  }, [])
+
+  const handleRename = useCallback(async () => {
     if (!currentFile) {
       return null
     }
+    if (renameInputRef.current) {
+      const newName = renameInputRef.current.value
+      if (newName && newName !== currentFile.name) {
+        await application.items.renameFile(currentFile, newName)
+        setIsRenaming(false)
+        setCurrentFile(application.items.findSureItem(currentFile.uuid))
+        return
+      }
+      setIsRenaming(false)
+    }
+  }, [application.items, currentFile, setCurrentFile])
 
-    return (
-      <DialogOverlay
-        className="sn-component p-0"
-        aria-label="File preview modal"
-        onDismiss={dismiss}
-        initialFocusRef={closeButtonRef}
-        dangerouslyBypassScrollLock
-        ref={ref}
+  if (!currentFile) {
+    return null
+  }
+
+  return (
+    <DialogContent
+      className={classNames(
+        'm-0 flex h-full w-full flex-col rounded bg-[color:var(--modal-background-color)] p-0 shadow-main md:max-h-[90%] md:max-w-[90%]',
+        isIOS() && 'pt-safe-top',
+      )}
+    >
+      <div
+        className="flex h-full w-full flex-col focus:shadow-none focus:outline-none"
+        tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
+        onKeyDown={keyDownHandler}
       >
-        <DialogContent
-          aria-label="File preview modal"
-          className="m-0 flex h-full min-h-[90%] w-full min-w-[90%] flex-col rounded bg-[color:var(--modal-background-color)] p-0 shadow-main "
-        >
-          <div
-            className="flex h-full w-full flex-col focus:shadow-none focus:outline-none"
-            tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
-            onKeyDown={keyDownHandler}
-          >
-            <div className="min-h-6 flex flex-shrink-0 flex-wrap items-center justify-between gap-2 border-0 border-b border-solid border-border px-4 py-3 focus:shadow-none">
-              <div className="flex items-center">
-                <div className="h-6 w-6">{IconComponent}</div>
-                {isRenaming ? (
-                  <DecoratedInput
-                    defaultValue={currentFile.name}
-                    className={{ container: 'ml-3', input: 'p-1', right: 'items-stretch !p-0' }}
-                    onKeyDown={(event) => {
-                      if (event.key === KeyboardKey.Enter) {
-                        void handleRename()
-                      }
-                    }}
-                    right={[
-                      <button
-                        className="flex h-full items-center justify-center border-l border-border px-2 py-1.5 text-neutral hover:bg-passive-4"
-                        title="Submit"
-                        onClick={handleRename}
-                      >
-                        <Icon type="check" size="small" />
-                      </button>,
-                    ]}
-                    ref={mergeRefs([renameInputRef, focusInputOnMount])}
-                  />
-                ) : (
-                  <span className="ml-3 font-medium">{currentFile.name}</span>
-                )}
-              </div>
-              <div className="flex items-center">
-                <StyledTooltip label="Rename file" className="!z-modal">
+        <div className="min-h-6 flex flex-shrink-0 flex-wrap items-center justify-between gap-2 border-0 border-b border-solid border-border px-4 py-3 focus:shadow-none">
+          <div className="flex items-center">
+            <div className="h-6 w-6">{IconComponent}</div>
+            {isRenaming ? (
+              <DecoratedInput
+                defaultValue={currentFile.name}
+                className={{ container: 'ml-3', input: 'p-1', right: 'items-stretch !p-0' }}
+                onKeyDown={(event) => {
+                  if (event.key === KeyboardKey.Enter) {
+                    void handleRename()
+                  }
+                }}
+                right={[
                   <button
-                    className="mr-4 flex cursor-pointer rounded border border-solid border-border bg-transparent p-1.5 hover:bg-contrast"
-                    onClick={() => setIsRenaming((isRenaming) => !isRenaming)}
-                    aria-label="Rename file"
+                    className="flex h-full items-center justify-center border-l border-border px-2 py-1.5 text-neutral hover:bg-passive-4"
+                    title="Submit"
+                    onClick={handleRename}
                   >
-                    <Icon type="pencil-filled" className="text-neutral" />
-                  </button>
-                </StyledTooltip>
-                <StyledTooltip label="Show linked items" className="!z-modal">
-                  <button
-                    className="mr-4 flex cursor-pointer rounded border border-solid border-border bg-transparent p-1.5 hover:bg-contrast"
-                    onClick={() => setShowLinkedBubblesContainer((show) => !show)}
-                    aria-label="Show linked items"
-                  >
-                    <Icon type="link" className="text-neutral" />
-                  </button>
-                </StyledTooltip>
-                <StyledTooltip label="Show file options" className="!z-modal">
-                  <button
-                    className="mr-4 flex cursor-pointer rounded border border-solid border-border bg-transparent p-1.5 hover:bg-contrast"
-                    onClick={() => setShowOptionsMenu((show) => !show)}
-                    ref={menuButtonRef}
-                    aria-label="Show file options"
-                  >
-                    <Icon type="more" className="text-neutral" />
-                  </button>
-                </StyledTooltip>
-                <Popover
-                  title="File options"
-                  open={showOptionsMenu}
-                  anchorElement={menuButtonRef.current}
-                  togglePopover={() => {
+                    <Icon type="check" size="small" />
+                  </button>,
+                ]}
+                ref={mergeRefs([renameInputRef, focusInputOnMount])}
+              />
+            ) : (
+              <span className="ml-3 font-medium">{currentFile.name}</span>
+            )}
+          </div>
+          <div className="flex items-center">
+            <StyledTooltip label="Rename file" className="!z-modal">
+              <button
+                className="mr-4 flex cursor-pointer rounded border border-solid border-border bg-transparent p-1.5 hover:bg-contrast"
+                onClick={() => setIsRenaming((isRenaming) => !isRenaming)}
+                aria-label="Rename file"
+              >
+                <Icon type="pencil-filled" className="text-neutral" />
+              </button>
+            </StyledTooltip>
+            <StyledTooltip label="Show linked items" className="!z-modal">
+              <button
+                className="mr-4 flex cursor-pointer rounded border border-solid border-border bg-transparent p-1.5 hover:bg-contrast"
+                onClick={() => setShowLinkedBubblesContainer((show) => !show)}
+                aria-label="Show linked items"
+              >
+                <Icon type="link" className="text-neutral" />
+              </button>
+            </StyledTooltip>
+            <StyledTooltip label="Show file options" className="!z-modal">
+              <button
+                className="mr-4 flex cursor-pointer rounded border border-solid border-border bg-transparent p-1.5 hover:bg-contrast"
+                onClick={() => setShowOptionsMenu((show) => !show)}
+                ref={menuButtonRef}
+                aria-label="Show file options"
+              >
+                <Icon type="more" className="text-neutral" />
+              </button>
+            </StyledTooltip>
+            <Popover
+              title="File options"
+              open={showOptionsMenu}
+              anchorElement={menuButtonRef.current}
+              togglePopover={() => {
+                setShowOptionsMenu(false)
+              }}
+              side="bottom"
+              align="start"
+              className="py-2"
+              overrideZIndex="z-modal"
+            >
+              <Menu a11yLabel="File context menu" isOpen={showOptionsMenu}>
+                <FileMenuOptions
+                  filesController={viewControllerManager.filesController}
+                  linkingController={viewControllerManager.linkingController}
+                  navigationController={viewControllerManager.navigationController}
+                  selectedFiles={[currentFile]}
+                  closeMenu={() => {
                     setShowOptionsMenu(false)
                   }}
-                  side="bottom"
-                  align="start"
-                  className="py-2"
-                  overrideZIndex="z-modal"
-                >
-                  <Menu a11yLabel="File context menu" isOpen={showOptionsMenu}>
-                    <FileMenuOptions
-                      filesController={viewControllerManager.filesController}
-                      linkingController={viewControllerManager.linkingController}
-                      navigationController={viewControllerManager.navigationController}
-                      selectedFiles={[currentFile]}
-                      closeMenu={() => {
-                        setShowOptionsMenu(false)
-                      }}
-                      shouldShowRenameOption={false}
-                      shouldShowAttachOption={false}
-                    />
-                  </Menu>
-                </Popover>
-                <StyledTooltip label="Show file info" className="!z-modal">
-                  <button
-                    className="mr-4 flex cursor-pointer rounded border border-solid border-border bg-transparent p-1.5 hover:bg-contrast"
-                    onClick={() => setShowFileInfoPanel((show) => !show)}
-                    aria-label="Show file info"
-                  >
-                    <Icon type="info" className="text-neutral" />
-                  </button>
-                </StyledTooltip>
-                <button
-                  ref={closeButtonRef}
-                  onClick={dismiss}
-                  aria-label="Close modal"
-                  className="flex cursor-pointer rounded border-0 bg-transparent p-1 hover:bg-contrast"
-                >
-                  <Icon type="close" className="text-neutral" />
-                </button>
-              </div>
-            </div>
-            {showLinkedBubblesContainer && (
-              <div className="-mt-1 min-h-0 flex-shrink-0 border-b border-border py-1.5 px-3.5">
-                <LinkedItemBubblesContainer
-                  linkingController={viewControllerManager.linkingController}
-                  item={currentFile}
+                  shouldShowRenameOption={false}
+                  shouldShowAttachOption={false}
                 />
-              </div>
-            )}
-            <div className="flex min-h-0 flex-grow">
-              <div className="relative flex max-w-full flex-grow items-center justify-center">
-                <FilePreview file={currentFile} application={application} key={currentFile.uuid} />
-              </div>
-              {showFileInfoPanel && <FilePreviewInfoPanel file={currentFile} />}
-            </div>
+              </Menu>
+            </Popover>
+            <StyledTooltip label="Show file info" className="!z-modal">
+              <button
+                className="mr-4 flex cursor-pointer rounded border border-solid border-border bg-transparent p-1.5 hover:bg-contrast"
+                onClick={() => setShowFileInfoPanel((show) => !show)}
+                aria-label="Show file info"
+              >
+                <Icon type="info" className="text-neutral" />
+              </button>
+            </StyledTooltip>
+            <button
+              ref={closeButtonRef}
+              onClick={dismiss}
+              aria-label="Close modal"
+              className="flex cursor-pointer rounded border-0 bg-transparent p-1 hover:bg-contrast"
+            >
+              <Icon type="close" className="text-neutral" />
+            </button>
           </div>
-        </DialogContent>
-      </DialogOverlay>
-    )
-  }),
-)
+        </div>
+        {showLinkedBubblesContainer && (
+          <div className="-mt-1 min-h-0 flex-shrink-0 border-b border-border py-1.5 px-3.5">
+            <LinkedItemBubblesContainer
+              linkingController={viewControllerManager.linkingController}
+              item={currentFile}
+            />
+          </div>
+        )}
+        <div className="flex min-h-0 flex-grow">
+          <div className="relative flex max-w-full flex-grow items-center justify-center">
+            <FilePreview file={currentFile} application={application} key={currentFile.uuid} />
+          </div>
+          {showFileInfoPanel && <FilePreviewInfoPanel file={currentFile} />}
+        </div>
+      </div>
+    </DialogContent>
+  )
+})
 
 FilePreviewModal.displayName = 'FilePreviewModal'
 
 const FilePreviewModalWrapper: FunctionComponent<Props> = ({ application, viewControllerManager }) => {
-  const [isMounted, setElement] = useModalAnimation(viewControllerManager.filePreviewModalController.isOpen)
-
-  if (!isMounted) {
-    return null
-  }
-
-  return <FilePreviewModal application={application} viewControllerManager={viewControllerManager} ref={setElement} />
+  return (
+    <ModalOverlay
+      className="sn-component p-0"
+      aria-label="File preview modal"
+      isOpen={viewControllerManager.filePreviewModalController.isOpen}
+      onDismiss={viewControllerManager.filePreviewModalController.dismiss}
+      dangerouslyBypassScrollLock
+    >
+      <FilePreviewModal application={application} viewControllerManager={viewControllerManager} />
+    </ModalOverlay>
+  )
 }
 
 export default observer(FilePreviewModalWrapper)
diff --git a/packages/web/src/javascripts/Components/ImportModal/ImportModal.tsx b/packages/web/src/javascripts/Components/ImportModal/ImportModal.tsx
index bb19c48d7..51a531f85 100644
--- a/packages/web/src/javascripts/Components/ImportModal/ImportModal.tsx
+++ b/packages/web/src/javascripts/Components/ImportModal/ImportModal.tsx
@@ -8,8 +8,8 @@ import { useStateRef } from '@/Hooks/useStateRef'
 import { ImportModalFileItem } from './ImportModalFileItem'
 import ImportModalInitialPage from './InitialPage'
 import { ImportModalAction, ImportModalFile, ImportModalState } from './Types'
-import Modal, { ModalAction } from '../Shared/Modal'
-import ModalOverlay from '../Shared/ModalOverlay'
+import Modal, { ModalAction } from '../Modal/Modal'
+import ModalOverlay from '../Modal/ModalOverlay'
 
 const reducer = (state: ImportModalState, action: ImportModalAction): ImportModalState => {
   switch (action.type) {
diff --git a/packages/web/src/javascripts/Components/Shared/MobileModalAction.tsx b/packages/web/src/javascripts/Components/Modal/MobileModalAction.tsx
similarity index 100%
rename from packages/web/src/javascripts/Components/Shared/MobileModalAction.tsx
rename to packages/web/src/javascripts/Components/Modal/MobileModalAction.tsx
diff --git a/packages/web/src/javascripts/Components/Modal/MobileModalHeader.tsx b/packages/web/src/javascripts/Components/Modal/MobileModalHeader.tsx
new file mode 100644
index 000000000..e8bc7426d
--- /dev/null
+++ b/packages/web/src/javascripts/Components/Modal/MobileModalHeader.tsx
@@ -0,0 +1,13 @@
+import { classNames } from '@standardnotes/utils'
+import { ReactNode } from 'react'
+
+type Props = {
+  className?: string
+  children: ReactNode
+}
+
+const MobileModalHeader = ({ className, children }: Props) => {
+  return <div className={classNames('grid w-full grid-cols-[0.35fr_1fr_0.35fr] gap-2', className)}>{children}</div>
+}
+
+export default MobileModalHeader
diff --git a/packages/web/src/javascripts/Components/Shared/Modal.tsx b/packages/web/src/javascripts/Components/Modal/Modal.tsx
similarity index 87%
rename from packages/web/src/javascripts/Components/Shared/Modal.tsx
rename to packages/web/src/javascripts/Components/Modal/Modal.tsx
index 7b0749b9a..459553579 100644
--- a/packages/web/src/javascripts/Components/Shared/Modal.tsx
+++ b/packages/web/src/javascripts/Components/Modal/Modal.tsx
@@ -1,14 +1,14 @@
 import { useMediaQuery, MutuallyExclusiveMediaQueryBreakpoints } from '@/Hooks/useMediaQuery'
 import { isIOS } from '@/Utils'
-import { AlertDialogContent, AlertDialogLabel } from '@reach/alert-dialog'
+import { DialogContent } from '@reach/dialog'
 import { classNames } from '@standardnotes/snjs'
 import { ReactNode, useMemo, useRef, useState } from 'react'
 import Button from '../Button/Button'
 import Icon from '../Icon/Icon'
 import Popover from '../Popover/Popover'
 import MobileModalAction from './MobileModalAction'
+import MobileModalHeader from './MobileModalHeader'
 import ModalAndroidBackHandler from './ModalAndroidBackHandler'
-import ModalDialogDescription from './ModalDialogDescription'
 
 export type ModalAction = {
   label: NonNullable<ReactNode>
@@ -28,11 +28,21 @@ type Props = {
     description?: string
   }
   customHeader?: ReactNode
+  disableCustomHeader?: boolean
   customFooter?: ReactNode
   children: ReactNode
 }
 
-const Modal = ({ title, close, actions = [], className = {}, customHeader, customFooter, children }: Props) => {
+const Modal = ({
+  title,
+  close,
+  actions = [],
+  className = {},
+  customHeader,
+  disableCustomHeader = false,
+  customFooter,
+  children,
+}: Props) => {
   const sortedActions = useMemo(
     () =>
       actions
@@ -75,7 +85,6 @@ const Modal = ({ title, close, actions = [], className = {}, customHeader, custo
 
   const leftSlotAction = sortedActions.find((action) => action.mobileSlot === 'left')
   const rightSlotAction = sortedActions.find((action) => action.mobileSlot === 'right')
-  const hasCancelAction = sortedActions.some((action) => action.type === 'cancel')
   const firstPrimaryActionIndex = sortedActions.findIndex((action) => action.type === 'primary')
 
   const extraActions = sortedActions.filter((action) => action.type !== 'primary' && action.type !== 'cancel')
@@ -86,23 +95,24 @@ const Modal = ({ title, close, actions = [], className = {}, customHeader, custo
   return (
     <>
       <ModalAndroidBackHandler close={close} />
-      <AlertDialogContent
+      <DialogContent
         tabIndex={0}
         className={classNames(
           'm-0 flex h-full w-full flex-col border-solid border-border bg-default p-0 md:h-auto md:max-h-[85vh] md:w-160 md:rounded md:border md:shadow-main',
           className.content,
         )}
+        aria-label={title}
       >
-        {customHeader ? (
+        {customHeader && !disableCustomHeader ? (
           customHeader
         ) : (
-          <AlertDialogLabel
+          <div
             className={classNames(
-              'flex flex-shrink-0 items-center justify-between rounded-t border-b border-solid border-border bg-default text-text md:px-4.5 md:py-3',
-              isIOS() ? 'pt-safe-top' : 'py-1.5 px-2',
+              'flex w-full flex-shrink-0 items-center justify-between rounded-t border-b border-solid border-border bg-default text-text md:px-4.5 md:py-3',
+              isIOS() ? 'px-2 pt-safe-top pb-1.5' : 'py-1.5 px-2',
             )}
           >
-            <div className="grid w-full grid-cols-[0.35fr_1fr_0.35fr] flex-row items-center justify-between gap-2 md:flex md:gap-0">
+            <MobileModalHeader className="flex-row items-center justify-between md:flex md:gap-0">
               {leftSlotAction ? (
                 <MobileModalAction
                   type={leftSlotAction.type}
@@ -172,13 +182,11 @@ const Modal = ({ title, close, actions = [], className = {}, customHeader, custo
                 >
                   {rightSlotAction.label}
                 </MobileModalAction>
-              ) : sortedActions.length === 0 || !hasCancelAction ? (
-                <MobileModalAction children="Done" action={close} slot="right" />
               ) : null}
-            </div>
-          </AlertDialogLabel>
+            </MobileModalHeader>
+          </div>
         )}
-        <ModalDialogDescription className={className.description}>{children}</ModalDialogDescription>
+        <div className={classNames('flex-grow overflow-y-auto', className.description)}>{children}</div>
         {customFooter
           ? customFooter
           : sortedActions.length > 0 && (
@@ -207,7 +215,7 @@ const Modal = ({ title, close, actions = [], className = {}, customHeader, custo
                 ))}
               </div>
             )}
-      </AlertDialogContent>
+      </DialogContent>
     </>
   )
 }
diff --git a/packages/web/src/javascripts/Components/Shared/ModalAndroidBackHandler.tsx b/packages/web/src/javascripts/Components/Modal/ModalAndroidBackHandler.tsx
similarity index 100%
rename from packages/web/src/javascripts/Components/Shared/ModalAndroidBackHandler.tsx
rename to packages/web/src/javascripts/Components/Modal/ModalAndroidBackHandler.tsx
diff --git a/packages/web/src/javascripts/Components/Shared/ModalDialogButtons.tsx b/packages/web/src/javascripts/Components/Modal/ModalDialogButtons.tsx
similarity index 58%
rename from packages/web/src/javascripts/Components/Shared/ModalDialogButtons.tsx
rename to packages/web/src/javascripts/Components/Modal/ModalDialogButtons.tsx
index 02023ba4a..fc686091b 100644
--- a/packages/web/src/javascripts/Components/Shared/ModalDialogButtons.tsx
+++ b/packages/web/src/javascripts/Components/Modal/ModalDialogButtons.tsx
@@ -8,14 +8,15 @@ type Props = {
 }
 
 const ModalDialogButtons: FunctionComponent<Props> = ({ children, className }) => (
-  <>
-    <hr className="m-0 h-[1px] border-none bg-border" />
-    <div
-      className={classNames('flex items-center justify-end gap-3 px-4 py-4', isIOS() && 'pb-safe-bottom', className)}
-    >
-      {children}
-    </div>
-  </>
+  <div
+    className={classNames(
+      'flex items-center justify-end gap-3 border-t border-border px-4 py-4',
+      isIOS() && 'pb-safe-bottom',
+      className,
+    )}
+  >
+    {children}
+  </div>
 )
 
 export default ModalDialogButtons
diff --git a/packages/web/src/javascripts/Components/Shared/ModalOverlay.tsx b/packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx
similarity index 54%
rename from packages/web/src/javascripts/Components/Shared/ModalOverlay.tsx
rename to packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx
index 1b21d7fcb..51836c494 100644
--- a/packages/web/src/javascripts/Components/Shared/ModalOverlay.tsx
+++ b/packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx
@@ -1,18 +1,16 @@
-import { AlertDialogOverlay } from '@reach/alert-dialog'
+import { DialogOverlay, DialogOverlayProps } from '@reach/dialog'
 import { classNames } from '@standardnotes/snjs'
-import { ReactNode, useRef } from 'react'
-import { useModalAnimation } from './useModalAnimation'
+import { ReactNode } from 'react'
+import { useModalAnimation } from '../Modal/useModalAnimation'
 
 type Props = {
   isOpen: boolean
   onDismiss?: () => void
   children: ReactNode
   className?: string
-}
-
-const ModalOverlay = ({ isOpen, onDismiss, children, className }: Props) => {
-  const ldRef = useRef<HTMLButtonElement>(null)
+} & DialogOverlayProps
 
+const ModalOverlay = ({ isOpen, onDismiss, children, className, ...props }: Props) => {
   const [isMounted, setElement] = useModalAnimation(isOpen)
 
   if (!isMounted) {
@@ -20,14 +18,14 @@ const ModalOverlay = ({ isOpen, onDismiss, children, className }: Props) => {
   }
 
   return (
-    <AlertDialogOverlay
+    <DialogOverlay
       className={classNames('p-0 md:px-0 md:opacity-100', className)}
-      leastDestructiveRef={ldRef}
       onDismiss={onDismiss}
       ref={setElement}
+      {...props}
     >
       {children}
-    </AlertDialogOverlay>
+    </DialogOverlay>
   )
 }
 
diff --git a/packages/web/src/javascripts/Components/Shared/useModalAnimation.ts b/packages/web/src/javascripts/Components/Modal/useModalAnimation.ts
similarity index 100%
rename from packages/web/src/javascripts/Components/Shared/useModalAnimation.ts
rename to packages/web/src/javascripts/Components/Modal/useModalAnimation.ts
diff --git a/packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperEditor.tsx b/packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperEditor.tsx
index d31035b5f..ccfacd59e 100644
--- a/packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperEditor.tsx
+++ b/packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperEditor.tsx
@@ -40,7 +40,7 @@ import { getPlaintextFontSize } from '@/Utils/getPlaintextFontSize'
 import ReadonlyPlugin from './Plugins/ReadonlyPlugin/ReadonlyPlugin'
 import { SuperSearchContextProvider } from './Plugins/SearchPlugin/Context'
 import { SearchPlugin } from './Plugins/SearchPlugin/SearchPlugin'
-import ModalOverlay from '@/Components/Shared/ModalOverlay'
+import ModalOverlay from '@/Components/Modal/ModalOverlay'
 
 const NotePreviewCharLimit = 160
 
diff --git a/packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperNoteImporter.tsx b/packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperNoteImporter.tsx
index af02e13e2..e66590875 100644
--- a/packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperNoteImporter.tsx
+++ b/packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperNoteImporter.tsx
@@ -6,7 +6,7 @@ import { ErrorBoundary } from '@/Utils/ErrorBoundary'
 import ImportPlugin from './Plugins/ImportPlugin/ImportPlugin'
 import { NoteViewController } from '../Controller/NoteViewController'
 import { spaceSeparatedStrings } from '@standardnotes/utils'
-import Modal, { ModalAction } from '@/Components/Shared/Modal'
+import Modal, { ModalAction } from '@/Components/Modal/Modal'
 
 const NotePreviewCharLimit = 160
 
diff --git a/packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperNoteMarkdownPreview.tsx b/packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperNoteMarkdownPreview.tsx
index 006156b88..452d21312 100644
--- a/packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperNoteMarkdownPreview.tsx
+++ b/packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperNoteMarkdownPreview.tsx
@@ -6,7 +6,7 @@ import MarkdownPreviewPlugin from './Plugins/MarkdownPreviewPlugin/MarkdownPrevi
 import { FileNode } from './Plugins/EncryptedFilePlugin/Nodes/FileNode'
 import { BubbleNode } from './Plugins/ItemBubblePlugin/Nodes/BubbleNode'
 import { copyTextToClipboard } from '../../../Utils/copyTextToClipboard'
-import Modal, { ModalAction } from '@/Components/Shared/Modal'
+import Modal, { ModalAction } from '@/Components/Modal/Modal'
 
 type Props = {
   note: SNNote
diff --git a/packages/web/src/javascripts/Components/PasswordWizard/PasswordWizard.tsx b/packages/web/src/javascripts/Components/PasswordWizard/PasswordWizard.tsx
index 5cf11b59f..be07739d4 100644
--- a/packages/web/src/javascripts/Components/PasswordWizard/PasswordWizard.tsx
+++ b/packages/web/src/javascripts/Components/PasswordWizard/PasswordWizard.tsx
@@ -2,7 +2,7 @@ import { WebApplication } from '@/Application/Application'
 import { createRef } from 'react'
 import { AbstractComponent } from '@/Components/Abstract/PureComponent'
 import DecoratedPasswordInput from '../Input/DecoratedPasswordInput'
-import Modal from '../Shared/Modal'
+import Modal from '../Modal/Modal'
 import { isMobileScreen } from '@/Utils'
 import Spinner from '../Spinner/Spinner'
 
diff --git a/packages/web/src/javascripts/Components/PermissionsModal/PermissionsModal.tsx b/packages/web/src/javascripts/Components/PermissionsModal/PermissionsModal.tsx
index b2c5c391e..20c1a0dce 100644
--- a/packages/web/src/javascripts/Components/PermissionsModal/PermissionsModal.tsx
+++ b/packages/web/src/javascripts/Components/PermissionsModal/PermissionsModal.tsx
@@ -1,8 +1,8 @@
 import { SNComponent } from '@standardnotes/snjs'
 import { useCallback } from 'react'
 import Button from '@/Components/Button/Button'
-import ModalDialogButtons from '../Shared/ModalDialogButtons'
-import Modal from '../Shared/Modal'
+import ModalDialogButtons from '../Modal/ModalDialogButtons'
+import Modal from '../Modal/Modal'
 
 type Props = {
   callback: (approved: boolean) => void
@@ -37,13 +37,11 @@ const PermissionsModal = ({ callback, component, dismiss, permissionsString }: P
       ]}
       className={{ content: 'md:!w-[350px]' }}
       customFooter={
-        <div className="hidden md:block">
-          <ModalDialogButtons>
-            <Button primary fullWidth onClick={accept} className="block">
-              Continue
-            </Button>
-          </ModalDialogButtons>
-        </div>
+        <ModalDialogButtons className="hidden md:flex">
+          <Button primary fullWidth onClick={accept} className="block">
+            Continue
+          </Button>
+        </ModalDialogButtons>
       }
     >
       <div className="px-4 py-4">
diff --git a/packages/web/src/javascripts/Components/PermissionsModal/PermissionsModalWrapper.tsx b/packages/web/src/javascripts/Components/PermissionsModal/PermissionsModalWrapper.tsx
index da64f9614..e6cc15cb5 100644
--- a/packages/web/src/javascripts/Components/PermissionsModal/PermissionsModalWrapper.tsx
+++ b/packages/web/src/javascripts/Components/PermissionsModal/PermissionsModalWrapper.tsx
@@ -1,7 +1,7 @@
 import { WebApplication } from '@/Application/Application'
 import { ApplicationEvent, PermissionDialog } from '@standardnotes/snjs'
 import { FunctionComponent, useCallback, useEffect, useState } from 'react'
-import ModalOverlay from '../Shared/ModalOverlay'
+import ModalOverlay from '../Modal/ModalOverlay'
 import PermissionsModal from './PermissionsModal'
 
 type Props = {
diff --git a/packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx b/packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx
index e38f82f20..40a3be454 100644
--- a/packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx
+++ b/packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx
@@ -2,8 +2,9 @@ import { useDisableBodyScrollOnMobile } from '@/Hooks/useDisableBodyScrollOnMobi
 import { classNames } from '@standardnotes/snjs'
 import { ReactNode } from 'react'
 import Portal from '../Portal/Portal'
-import MobileModalAction from '../Shared/MobileModalAction'
-import { useModalAnimation } from '../Shared/useModalAnimation'
+import MobileModalAction from '../Modal/MobileModalAction'
+import { useModalAnimation } from '../Modal/useModalAnimation'
+import MobileModalHeader from '../Modal/MobileModalHeader'
 
 const DisableScroll = () => {
   useDisableBodyScrollOnMobile()
@@ -41,13 +42,13 @@ const MobilePopoverContent = ({
         data-popover={id}
         data-mobile-popover
       >
-        <div className="grid w-full grid-cols-[0.35fr_1fr_0.35fr] gap-2 border-b border-border py-1.5 px-2 text-base">
+        <MobileModalHeader className="border-b border-border py-1.5 px-2 text-base">
           <div />
           <div className="flex items-center justify-center font-semibold">{title}</div>
           <MobileModalAction type="primary" slot="right" action={requestClose}>
             Done
           </MobileModalAction>
-        </div>
+        </MobileModalHeader>
         <div className={classNames('h-full overflow-y-auto', className)}>{children}</div>
       </div>
     </Portal>
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmail.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmail.tsx
index 7b8b368a1..8b8266fbb 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmail.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmail.tsx
@@ -3,7 +3,7 @@ import { WebApplication } from '@/Application/Application'
 import { useBeforeUnload } from '@/Hooks/useBeforeUnload'
 import ChangeEmailForm from './ChangeEmailForm'
 import ChangeEmailSuccess from './ChangeEmailSuccess'
-import Modal, { ModalAction } from '@/Components/Shared/Modal'
+import Modal, { ModalAction } from '@/Components/Modal/Modal'
 
 enum SubmitButtonTitles {
   Default = 'Continue',
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Account/Credentials.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Account/Credentials.tsx
index 7170aea70..0b476392f 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Account/Credentials.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Account/Credentials.tsx
@@ -10,7 +10,7 @@ import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import PasswordWizard from '@/Components/PasswordWizard/PasswordWizard'
 import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
 import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
-import ModalOverlay from '@/Components/Shared/ModalOverlay'
+import ModalOverlay from '@/Components/Modal/ModalOverlay'
 
 type Props = {
   application: WebApplication
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/Invite/Invite.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/Invite/Invite.tsx
index 7666ded69..4ac1808ee 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/Invite/Invite.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/Invite/Invite.tsx
@@ -6,7 +6,7 @@ import { SubscriptionController } from '@/Controllers/Subscription/SubscriptionC
 
 import InviteForm from './InviteForm'
 import InviteSuccess from './InviteSuccess'
-import Modal, { ModalAction } from '@/Components/Shared/Modal'
+import Modal, { ModalAction } from '@/Components/Modal/Modal'
 
 enum SubmitButtonTitles {
   Default = 'Invite',
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/SubscriptionSharing.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/SubscriptionSharing.tsx
index 2088118d7..679f7b5fc 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/SubscriptionSharing.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/SubscriptionSharing.tsx
@@ -14,7 +14,7 @@ import InvitationsList from './InvitationsList'
 import Invite from './Invite/Invite'
 import Button from '@/Components/Button/Button'
 import SharingStatusText from './SharingStatusText'
-import ModalOverlay from '@/Components/Shared/ModalOverlay'
+import ModalOverlay from '@/Components/Modal/ModalOverlay'
 
 type Props = {
   application: WebApplication
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/EditSmartViewModal.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/EditSmartViewModal.tsx
index 2a00792ee..f120a2c0a 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/EditSmartViewModal.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/EditSmartViewModal.tsx
@@ -1,7 +1,7 @@
 import Icon from '@/Components/Icon/Icon'
 import IconPicker from '@/Components/Icon/IconPicker'
 import Popover from '@/Components/Popover/Popover'
-import Modal, { ModalAction } from '@/Components/Shared/Modal'
+import Modal, { ModalAction } from '@/Components/Modal/Modal'
 import Spinner from '@/Components/Spinner/Spinner'
 import { Platform, SmartViewDefaultIconName, VectorIconNameOrEmoji } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/SmartViews.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/SmartViews.tsx
index 4885a4a3e..3063412da 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/SmartViews.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/SmartViews.tsx
@@ -15,7 +15,7 @@ import NoSubscriptionBanner from '@/Components/NoSubscriptionBanner/NoSubscripti
 import { EditSmartViewModalController } from './EditSmartViewModalController'
 import { STRING_DELETE_TAG } from '@/Constants/Strings'
 import { confirmDialog } from '@standardnotes/ui-services'
-import ModalOverlay from '@/Components/Shared/ModalOverlay'
+import ModalOverlay from '@/Components/Modal/ModalOverlay'
 
 type NewType = {
   application: WebApplication
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorAuthView/TwoFactorAuthView.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorAuthView/TwoFactorAuthView.tsx
index d2f6cda0c..2cb3e794e 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorAuthView/TwoFactorAuthView.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorAuthView/TwoFactorAuthView.tsx
@@ -10,8 +10,8 @@ import PreferencesGroup from '@/Components/Preferences/PreferencesComponents/Pre
 import PreferencesSegment from '@/Components/Preferences/PreferencesComponents/PreferencesSegment'
 import { WebApplication } from '@/Application/Application'
 import RecoveryCodeBanner from '@/Components/RecoveryCodeBanner/RecoveryCodeBanner'
-import Modal, { ModalAction } from '@/Components/Shared/Modal'
-import ModalOverlay from '@/Components/Shared/ModalOverlay'
+import Modal, { ModalAction } from '@/Components/Modal/Modal'
+import ModalOverlay from '@/Components/Modal/ModalOverlay'
 
 type Props = {
   auth: TwoFactorAuth
diff --git a/packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx b/packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx
index 31dca703e..36eea2bf2 100644
--- a/packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx
@@ -7,8 +7,7 @@ import { PreferencesProps } from './PreferencesProps'
 import { useDisableBodyScrollOnMobile } from '@/Hooks/useDisableBodyScrollOnMobile'
 import { useAndroidBackHandler } from '@/NativeMobileWeb/useAndroidBackHandler'
 import { ESCAPE_COMMAND } from '@standardnotes/ui-services'
-import Modal from '../Shared/Modal'
-import { AlertDialogLabel } from '@reach/alert-dialog'
+import Modal from '../Modal/Modal'
 import { classNames } from '@standardnotes/snjs'
 import { isIOS } from '@/Utils'
 
@@ -63,7 +62,7 @@ const PreferencesView: FunctionComponent<PreferencesProps> = ({
         description: 'flex flex-col',
       }}
       customHeader={
-        <AlertDialogLabel
+        <div
           className={classNames(
             'flex w-full flex-row items-center justify-between border-b border-solid border-border bg-default px-3 pb-2 md:p-3',
             isIOS() ? 'pt-safe-top' : 'pt-2',
@@ -78,7 +77,7 @@ const PreferencesView: FunctionComponent<PreferencesProps> = ({
             icon="close"
             label="Close preferences"
           />
-        </AlertDialogLabel>
+        </div>
       }
     >
       <PreferencesCanvas
diff --git a/packages/web/src/javascripts/Components/Preferences/PreferencesViewWrapper.tsx b/packages/web/src/javascripts/Components/Preferences/PreferencesViewWrapper.tsx
index fe07aa3cc..2ef0deb22 100644
--- a/packages/web/src/javascripts/Components/Preferences/PreferencesViewWrapper.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/PreferencesViewWrapper.tsx
@@ -4,7 +4,7 @@ import PreferencesView from './PreferencesView'
 import { PreferencesViewWrapperProps } from './PreferencesViewWrapperProps'
 import { useCommandService } from '../CommandProvider'
 import { OPEN_PREFERENCES_COMMAND } from '@standardnotes/ui-services'
-import ModalOverlay from '../Shared/ModalOverlay'
+import ModalOverlay from '../Modal/ModalOverlay'
 
 const PreferencesViewWrapper: FunctionComponent<PreferencesViewWrapperProps> = ({
   viewControllerManager,
diff --git a/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialogContent.tsx b/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialogContent.tsx
index 3111d102b..0bcfe4756 100644
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialogContent.tsx
+++ b/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialogContent.tsx
@@ -8,8 +8,9 @@ import { NoteHistoryController } from '@/Controllers/NoteHistory/NoteHistoryCont
 import Icon from '../Icon/Icon'
 import { classNames } from '@standardnotes/utils'
 import { HistoryModalMobileTab } from './utils'
-import MobileModalAction from '../Shared/MobileModalAction'
+import MobileModalAction from '../Modal/MobileModalAction'
 import Popover from '../Popover/Popover'
+import MobileModalHeader from '../Modal/MobileModalHeader'
 
 const HistoryModalDialogContent = ({
   application,
@@ -28,7 +29,7 @@ const HistoryModalDialogContent = ({
 
   return (
     <>
-      <div className="grid w-full grid-cols-[0.35fr_1fr_0.35fr] items-center gap-2 border-b border-border py-1 px-2 md:hidden">
+      <MobileModalHeader className="items-center border-b border-border py-1 px-2 md:hidden">
         <MobileModalAction type="secondary" action={toggleTabMenu} slot="left" ref={tabOptionRef}>
           <div className="rounded-full border border-border p-0.5">
             <Icon type="more" />
@@ -67,7 +68,7 @@ const HistoryModalDialogContent = ({
         <MobileModalAction type="primary" slot="right" action={dismissModal}>
           Done
         </MobileModalAction>
-      </div>
+      </MobileModalHeader>
       <div className="flex min-h-0 flex-grow">
         <div
           className={classNames(
diff --git a/packages/web/src/javascripts/Components/RevisionHistoryModal/RevisionHistoryModal.tsx b/packages/web/src/javascripts/Components/RevisionHistoryModal/RevisionHistoryModal.tsx
index fa1dd9ed4..ff12bcc26 100644
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/RevisionHistoryModal.tsx
+++ b/packages/web/src/javascripts/Components/RevisionHistoryModal/RevisionHistoryModal.tsx
@@ -4,7 +4,7 @@ import HistoryModalDialogContent from './HistoryModalDialogContent'
 import HistoryModalDialog from './HistoryModalDialog'
 import { RevisionHistoryModalProps } from './RevisionHistoryModalProps'
 import { useAndroidBackHandler } from '@/NativeMobileWeb/useAndroidBackHandler'
-import { useModalAnimation } from '../Shared/useModalAnimation'
+import { useModalAnimation } from '../Modal/useModalAnimation'
 
 const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps> = ({
   application,
diff --git a/packages/web/src/javascripts/Components/SessionsModal/SessionsModal.tsx b/packages/web/src/javascripts/Components/SessionsModal/SessionsModal.tsx
index e34845b76..72c8a128a 100644
--- a/packages/web/src/javascripts/Components/SessionsModal/SessionsModal.tsx
+++ b/packages/web/src/javascripts/Components/SessionsModal/SessionsModal.tsx
@@ -8,8 +8,8 @@ import { observer } from 'mobx-react-lite'
 import Spinner from '@/Components/Spinner/Spinner'
 import Button from '@/Components/Button/Button'
 import Icon from '../Icon/Icon'
-import Modal, { ModalAction } from '../Shared/Modal'
-import ModalOverlay from '../Shared/ModalOverlay'
+import Modal, { ModalAction } from '../Modal/Modal'
+import ModalOverlay from '../Modal/ModalOverlay'
 
 type Session = RemoteSession & {
   revoking?: true
diff --git a/packages/web/src/javascripts/Components/Shared/ModalDialog.tsx b/packages/web/src/javascripts/Components/Shared/ModalDialog.tsx
deleted file mode 100644
index 2ae9aab5e..000000000
--- a/packages/web/src/javascripts/Components/Shared/ModalDialog.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useRef, ReactNode } from 'react'
-import { AlertDialogContent, AlertDialogOverlay } from '@reach/alert-dialog'
-import { classNames } from '@standardnotes/utils'
-
-type Props = {
-  children: ReactNode
-  onDismiss?: () => void
-  className?: string
-}
-
-const ModalDialog = ({ children, onDismiss, className }: Props) => {
-  const ldRef = useRef<HTMLButtonElement>(null)
-
-  return (
-    <AlertDialogOverlay className="p-0 md:px-0" leastDestructiveRef={ldRef} onDismiss={onDismiss}>
-      <AlertDialogContent
-        tabIndex={0}
-        className={classNames(
-          'm-0 flex w-full flex-col border-solid border-border bg-default p-0 shadow-main md:max-h-[85vh] md:w-160 md:rounded md:border',
-          className,
-        )}
-      >
-        {children}
-      </AlertDialogContent>
-    </AlertDialogOverlay>
-  )
-}
-
-export default ModalDialog
diff --git a/packages/web/src/javascripts/Components/Shared/ModalDialogDescription.tsx b/packages/web/src/javascripts/Components/Shared/ModalDialogDescription.tsx
deleted file mode 100644
index 1629bd825..000000000
--- a/packages/web/src/javascripts/Components/Shared/ModalDialogDescription.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { FunctionComponent, ReactNode } from 'react'
-import { AlertDialogDescription } from '@reach/alert-dialog'
-
-type Props = {
-  className?: string
-  children?: ReactNode
-}
-
-const ModalDialogDescription: FunctionComponent<Props> = ({ children, className = '' }) => (
-  <AlertDialogDescription className={`flex-grow overflow-y-auto ${className}`}>{children}</AlertDialogDescription>
-)
-
-export default ModalDialogDescription
diff --git a/packages/web/src/javascripts/Components/Shared/ModalDialogLabel.tsx b/packages/web/src/javascripts/Components/Shared/ModalDialogLabel.tsx
deleted file mode 100644
index 0ba34155d..000000000
--- a/packages/web/src/javascripts/Components/Shared/ModalDialogLabel.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { FunctionComponent, ReactNode, useEffect } from 'react'
-import { AlertDialogLabel } from '@reach/alert-dialog'
-import Icon from '@/Components/Icon/Icon'
-import { classNames } from '@standardnotes/utils'
-import { useAndroidBackHandler } from '@/NativeMobileWeb/useAndroidBackHandler'
-import { isIOS } from '@/Utils'
-import MobileModalAction from './MobileModalAction'
-
-type Props = {
-  closeDialog: () => void
-  className?: string
-  headerButtons?: ReactNode
-  leftMobileButton?: ReactNode
-  rightMobileButton?: ReactNode
-  children?: ReactNode
-}
-
-const ModalDialogLabel: FunctionComponent<Props> = ({
-  children,
-  closeDialog,
-  className,
-  headerButtons,
-  leftMobileButton,
-  rightMobileButton,
-}) => {
-  const addAndroidBackHandler = useAndroidBackHandler()
-
-  useEffect(() => {
-    const removeListener = addAndroidBackHandler(() => {
-      closeDialog()
-      return true
-    })
-    return () => {
-      if (removeListener) {
-        removeListener()
-      }
-    }
-  }, [addAndroidBackHandler, closeDialog])
-
-  return (
-    <AlertDialogLabel
-      className={classNames(
-        'flex flex-shrink-0 items-center justify-between rounded-t border-b border-solid border-border bg-default py-1.5 px-1 text-text md:px-4.5 md:py-3',
-        isIOS() && 'pt-safe-top',
-        className,
-      )}
-    >
-      <div className="grid w-full grid-cols-[0.35fr_1fr_0.35fr] flex-row items-center justify-between gap-2 md:flex md:gap-0">
-        {leftMobileButton ? leftMobileButton : <div className="md:hidden" />}
-        <div
-          className={classNames(
-            'overflow-hidden text-ellipsis whitespace-nowrap text-center text-base font-semibold text-text md:flex-grow md:text-left md:text-lg',
-          )}
-        >
-          {children}
-        </div>
-        <div className="hidden items-center gap-2 md:flex">
-          {headerButtons}
-          <button tabIndex={0} className="ml-2 rounded p-1 font-bold hover:bg-contrast" onClick={closeDialog}>
-            <Icon type="close" />
-          </button>
-        </div>
-        {rightMobileButton ? (
-          rightMobileButton
-        ) : (
-          <MobileModalAction slot="right" children="Done" action={closeDialog} />
-        )}
-      </div>
-      <hr className="h-1px no-border m-0 bg-border" />
-    </AlertDialogLabel>
-  )
-}
-
-export default ModalDialogLabel
diff --git a/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx b/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx
index 1152e80d2..a0e5ca78f 100644
--- a/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx
+++ b/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx
@@ -13,7 +13,7 @@ import TabsContainer from '../Tabs/TabsContainer'
 import CopyableCodeBlock from '../Shared/CopyableCodeBlock'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
 import { classNames } from '@standardnotes/utils'
-import Modal, { ModalAction } from '../Shared/Modal'
+import Modal, { ModalAction } from '../Modal/Modal'
 
 type Props = {
   controller: AddSmartViewModalController
diff --git a/packages/web/src/javascripts/Components/Tags/SmartViewsSection.tsx b/packages/web/src/javascripts/Components/Tags/SmartViewsSection.tsx
index fd3c052e0..ad2dc0e8f 100644
--- a/packages/web/src/javascripts/Components/Tags/SmartViewsSection.tsx
+++ b/packages/web/src/javascripts/Components/Tags/SmartViewsSection.tsx
@@ -8,7 +8,7 @@ import { FunctionComponent, useCallback, useMemo } from 'react'
 import IconButton from '../Button/IconButton'
 import EditSmartViewModal from '../Preferences/Panes/General/SmartViews/EditSmartViewModal'
 import { EditSmartViewModalController } from '../Preferences/Panes/General/SmartViews/EditSmartViewModalController'
-import ModalOverlay from '../Shared/ModalOverlay'
+import ModalOverlay from '../Modal/ModalOverlay'
 import AddSmartViewModal from '../SmartViewBuilder/AddSmartViewModal'
 import { AddSmartViewModalController } from '../SmartViewBuilder/AddSmartViewModalController'
 import SmartViewsList from './SmartViewsList'