refactor: mobile modals (#2173)

packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperEditor.tsx

@@ -40,6 +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'
 
 const NotePreviewCharLimit = 160
 
@@ -205,7 +206,9 @@ export const SuperEditor: FunctionComponent<Props> = ({
             </BlocksEditorComposer>
           </FilesControllerProvider>
         </LinkingControllerProvider>
-        {showMarkdownPreview && <SuperNoteMarkdownPreview note={note.current} closeDialog={closeMarkdownPreview} />}
+        <ModalOverlay isOpen={showMarkdownPreview} onDismiss={closeMarkdownPreview}>
+          <SuperNoteMarkdownPreview note={note.current} closeDialog={closeMarkdownPreview} />
+        </ModalOverlay>
       </ErrorBoundary>
     </div>
   )

packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperNoteImporter.tsx

@@ -1,16 +1,12 @@
 import { WebApplication } from '@/Application/Application'
 import { NoteType, SNNote } from '@standardnotes/snjs'
-import { FunctionComponent, useCallback, useEffect, useState } from 'react'
+import { FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react'
 import { BlocksEditor, BlocksEditorComposer } from '@standardnotes/blocks-editor'
 import { ErrorBoundary } from '@/Utils/ErrorBoundary'
-import ModalDialog from '@/Components/Shared/ModalDialog'
-import ModalDialogButtons from '@/Components/Shared/ModalDialogButtons'
-import ModalDialogDescription from '@/Components/Shared/ModalDialogDescription'
-import ModalDialogLabel from '@/Components/Shared/ModalDialogLabel'
-import Button from '@/Components/Button/Button'
 import ImportPlugin from './Plugins/ImportPlugin/ImportPlugin'
 import { NoteViewController } from '../Controller/NoteViewController'
 import { spaceSeparatedStrings } from '@standardnotes/utils'
+import Modal, { ModalAction } from '@/Components/Shared/Modal'
 
 const NotePreviewCharLimit = 160
 
@@ -82,51 +78,55 @@ export const SuperNoteImporter: FunctionComponent<Props> = ({ note, application,
     onConvertComplete()
   }, [closeDialog, application, note, onConvertComplete, performConvert])
 
+  const modalActions: ModalAction[] = useMemo(
+    () => [
+      {
+        label: 'Cancel',
+        onClick: closeDialog,
+        type: 'cancel',
+        mobileSlot: 'left',
+      },
+      {
+        label: 'Convert',
+        onClick: confirmConvert,
+        mobileSlot: 'right',
+        type: 'primary',
+      },
+      {
+        label: 'Convert As-Is',
+        onClick: convertAsIs,
+        type: 'secondary',
+      },
+    ],
+    [closeDialog, confirmConvert, convertAsIs],
+  )
+
   if (isSeamlessConvert) {
     return null
   }
 
   return (
-    <ModalDialog>
-      <ModalDialogLabel closeDialog={closeDialog}>
-        Convert to Super note
-        <p className="text-sm font-normal text-neutral">
-          The following is a preview of how your note will look when converted to Super. Super notes use a custom format
-          under the hood. Converting your note will transition it from plaintext to the custom Super format.
-        </p>
-      </ModalDialogLabel>
-      <ModalDialogDescription>
-        <div className="relative w-full">
-          <ErrorBoundary>
-            <BlocksEditorComposer readonly initialValue={undefined}>
-              <BlocksEditor
-                readonly
-                onChange={handleChange}
-                ignoreFirstChange={false}
-                className="relative resize-none text-base focus:shadow-none focus:outline-none"
-                previewLength={NotePreviewCharLimit}
-                spellcheck={note.spellcheck}
-              >
-                <ImportPlugin text={note.text} format={format} />
-              </BlocksEditor>
-            </BlocksEditorComposer>
-          </ErrorBoundary>
-        </div>
-      </ModalDialogDescription>
-      <ModalDialogButtons>
-        <div className="flex w-full justify-between">
-          <div>
-            <Button onClick={convertAsIs}>Convert As-Is</Button>
-          </div>
-          <div className="flex">
-            <Button onClick={closeDialog}>Cancel</Button>
-            <div className="min-w-3" />
-            <Button primary onClick={confirmConvert}>
-              Convert to Super
-            </Button>
-          </div>
-        </div>
-      </ModalDialogButtons>
-    </ModalDialog>
+    <Modal title="Convert to Super note" close={closeDialog} actions={modalActions}>
+      <div className="border-b border-border px-4 py-4 text-sm font-normal text-neutral md:py-3">
+        The following is a preview of how your note will look when converted to Super. Super notes use a custom format
+        under the hood. Converting your note will transition it from plaintext to the custom Super format.
+      </div>
+      <div className="relative w-full px-4 py-4">
+        <ErrorBoundary>
+          <BlocksEditorComposer readonly initialValue={undefined}>
+            <BlocksEditor
+              readonly
+              onChange={handleChange}
+              ignoreFirstChange={false}
+              className="relative resize-none text-base focus:shadow-none focus:outline-none"
+              previewLength={NotePreviewCharLimit}
+              spellcheck={note.spellcheck}
+            >
+              <ImportPlugin text={note.text} format={format} />
+            </BlocksEditor>
+          </BlocksEditorComposer>
+        </ErrorBoundary>
+      </div>
+    </Modal>
   )
 }

packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperNoteMarkdownPreview.tsx

@@ -1,16 +1,12 @@
 import { SNNote } from '@standardnotes/snjs'
-import { FunctionComponent, useCallback, useState } from 'react'
+import { FunctionComponent, useCallback, useMemo, useState } from 'react'
 import { BlocksEditor, BlocksEditorComposer } from '@standardnotes/blocks-editor'
 import { ErrorBoundary } from '@/Utils/ErrorBoundary'
-import ModalDialog from '@/Components/Shared/ModalDialog'
-import ModalDialogButtons from '@/Components/Shared/ModalDialogButtons'
-import ModalDialogDescription from '@/Components/Shared/ModalDialogDescription'
-import ModalDialogLabel from '@/Components/Shared/ModalDialogLabel'
-import Button from '@/Components/Button/Button'
 import MarkdownPreviewPlugin from './Plugins/MarkdownPreviewPlugin/MarkdownPreviewPlugin'
 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'
 
 type Props = {
   note: SNNote
@@ -33,33 +29,33 @@ export const SuperNoteMarkdownPreview: FunctionComponent<Props> = ({ note, close
     setMarkdown(markdown)
   }, [])
 
+  const modalActions: ModalAction[] = useMemo(
+    () => [
+      {
+        label: didCopy ? 'Copied' : 'Copy',
+        type: 'primary',
+        onClick: copy,
+        mobileSlot: 'left',
+      },
+    ],
+    [copy, didCopy],
+  )
+
   return (
-    <ModalDialog>
-      <ModalDialogLabel closeDialog={closeDialog}>Markdown Preview</ModalDialogLabel>
-      <ModalDialogDescription>
-        <div className="relative w-full">
-          <ErrorBoundary>
-            <BlocksEditorComposer readonly initialValue={note.text} nodes={[FileNode, BubbleNode]}>
-              <BlocksEditor
-                readonly
-                className="relative resize-none text-base focus:shadow-none focus:outline-none"
-                spellcheck={note.spellcheck}
-              >
-                <MarkdownPreviewPlugin onMarkdown={onMarkdown} />
-              </BlocksEditor>
-            </BlocksEditorComposer>
-          </ErrorBoundary>
-        </div>
-      </ModalDialogDescription>
-      <ModalDialogButtons>
-        <div className="flex">
-          <Button onClick={closeDialog}>Close</Button>
-          <div className="min-w-3" />
-          <Button primary onClick={copy}>
-            {didCopy ? 'Copied' : 'Copy'}
-          </Button>
-        </div>
-      </ModalDialogButtons>
-    </ModalDialog>
+    <Modal title="Markdown Preview" close={closeDialog} actions={modalActions}>
+      <div className="relative w-full px-4 py-4">
+        <ErrorBoundary>
+          <BlocksEditorComposer readonly initialValue={note.text} nodes={[FileNode, BubbleNode]}>
+            <BlocksEditor
+              readonly
+              className="relative resize-none text-base focus:shadow-none focus:outline-none"
+              spellcheck={note.spellcheck}
+            >
+              <MarkdownPreviewPlugin onMarkdown={onMarkdown} />
+            </BlocksEditor>
+          </BlocksEditorComposer>
+        </ErrorBoundary>
+      </div>
+    </Modal>
   )
 }