refactor: mobile modals (#2173)

packages/web/src/javascripts/Components/SessionsModal/SessionsModal.tsx

@@ -1,16 +1,15 @@
 import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { SNApplication, SessionStrings, UuidString, isNullOrUndefined, RemoteSession } from '@standardnotes/snjs'
-import { FunctionComponent, useState, useEffect, useRef, useMemo } from 'react'
+import { FunctionComponent, useState, useEffect, useRef, useMemo, useCallback } from 'react'
 import { Alert } from '@reach/alert'
 import { AlertDialog, AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
 import { WebApplication } from '@/Application/Application'
 import { observer } from 'mobx-react-lite'
-import ModalDialog from '../Shared/ModalDialog'
-import ModalDialogLabel from '../Shared/ModalDialogLabel'
-import ModalDialogDescription from '../Shared/ModalDialogDescription'
 import Spinner from '@/Components/Spinner/Spinner'
 import Button from '@/Components/Button/Button'
 import Icon from '../Icon/Icon'
+import Modal, { ModalAction } from '../Shared/Modal'
+import ModalOverlay from '../Shared/ModalOverlay'
 
 type Session = RemoteSession & {
   revoking?: true
@@ -82,7 +81,7 @@ const SessionsModalContent: FunctionComponent<{
   viewControllerManager: ViewControllerManager
   application: SNApplication
 }> = ({ viewControllerManager, application }) => {
-  const close = () => viewControllerManager.closeSessionsModal()
+  const close = useCallback(() => viewControllerManager.closeSessionsModal(), [viewControllerManager])
 
   const [sessions, refresh, refreshing, revokeSession, errorMessage] = useSessions(application)
 
@@ -106,20 +105,29 @@ const SessionsModalContent: FunctionComponent<{
   const closeRevokeConfirmationDialog = () => {
     setRevokingSessionUuid('')
   }
+
+  const sessionModalActions = useMemo(
+    (): ModalAction[] => [
+      {
+        label: 'Close',
+        onClick: close,
+        type: 'cancel',
+        mobileSlot: 'left',
+      },
+      {
+        label: 'Refresh',
+        onClick: refresh,
+        type: 'primary',
+        mobileSlot: 'right',
+      },
+    ],
+    [close, refresh],
+  )
+
   return (
     <>
-      <ModalDialog onDismiss={close} className="sessions-modal max-h-[90vh]">
-        <ModalDialogLabel
-          headerButtons={
-            <Button small colorStyle="info" onClick={refresh}>
-              Refresh
-            </Button>
-          }
-          closeDialog={close}
-        >
-          Active Sessions
-        </ModalDialogLabel>
-        <ModalDialogDescription className="overflow-y-auto">
+      <Modal title="Active Sessions" close={close} actions={sessionModalActions}>
+        <div className="px-4 py-4">
           {refreshing ? (
             <div className="flex items-center gap-2">
               <Spinner className="h-3 w-3" />
@@ -155,8 +163,8 @@ const SessionsModalContent: FunctionComponent<{
               )}
             </>
           )}
-        </ModalDialogDescription>
-      </ModalDialog>
+        </div>
+      </Modal>
       {confirmRevokingSessionUuid && (
         <AlertDialog onDismiss={closeRevokeConfirmationDialog} leastDestructiveRef={cancelRevokeRef} className="p-0">
           <div className="sk-modal-content">
@@ -206,11 +214,15 @@ const SessionsModal: FunctionComponent<{
   viewControllerManager: ViewControllerManager
   application: WebApplication
 }> = ({ viewControllerManager, application }) => {
-  if (viewControllerManager.isSessionsModalVisible) {
-    return <SessionsModalContent application={application} viewControllerManager={viewControllerManager} />
-  } else {
-    return null
-  }
+  return (
+    <ModalOverlay
+      isOpen={viewControllerManager.isSessionsModalVisible}
+      onDismiss={viewControllerManager.closeSessionsModal}
+      className="sessions-modal"
+    >
+      <SessionsModalContent application={application} viewControllerManager={viewControllerManager} />
+    </ModalOverlay>
+  )
 }
 
 export default observer(SessionsModal)