refactor: migrate dialogs & tooltips from reach-ui (#2314)

packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx

@@ -1,6 +1,6 @@
 import { getPlatformString } from '@/Utils'
 import { classNames } from '@standardnotes/utils'
-import { DialogOverlay, DialogContent } from '@reach/dialog'
+import { Dialog, useDialogStore } from '@ariakit/react'
 import { ForwardedRef, forwardRef, ReactNode } from 'react'
 
 type Props = {
@@ -9,23 +9,36 @@ type Props = {
 }
 
 const HistoryModalDialog = forwardRef(({ children, onDismiss }: Props, ref: ForwardedRef<HTMLDivElement>) => {
+  const dialog = useDialogStore({
+    open: true,
+  })
+
   return (
-    <DialogOverlay
-      className={`sn-component ${getPlatformString()}`}
-      onDismiss={onDismiss}
+    <Dialog
+      store={dialog}
       aria-label="Note revision history"
       ref={ref}
+      backdropProps={{
+        className: '!z-modal',
+      }}
+      className="h-full w-full"
     >
-      <DialogContent
-        aria-label="Note revision history"
+      <div
+        className="absolute z-0 h-full w-full bg-passive-5 opacity-0 md:opacity-75"
+        role="presentation"
+        onClick={onDismiss}
+      />
+      <div
         className={classNames(
-          'my-0 flex h-full w-full flex-col rounded-md bg-[color:var(--modal-background-color)]',
+          'absolute z-[1] my-0 flex h-full w-full flex-col rounded-md bg-[color:var(--modal-background-color)]',
           'p-0 pt-safe-top pb-safe-bottom shadow-lg md:max-h-[90%] md:w-[90%] md:max-w-[90%]',
+          'md:left-1/2 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2 md:transform',
+          getPlatformString(),
         )}
       >
-        <div className="flex h-full flex-col overflow-hidden bg-default">{children}</div>
-      </DialogContent>
-    </DialogOverlay>
+        {children}
+      </div>
+    </Dialog>
   )
 })