refactor: mobile modals (#2173)

packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx

@@ -1,8 +1,14 @@
 import { useDisableBodyScrollOnMobile } from '@/Hooks/useDisableBodyScrollOnMobile'
-import { useLifecycleAnimation } from '@/Hooks/useLifecycleAnimation'
 import { classNames } from '@standardnotes/snjs'
 import { ReactNode } from 'react'
 import Portal from '../Portal/Portal'
+import { useModalAnimation } from '../Shared/useModalAnimation'
+
+const DisableScroll = () => {
+  useDisableBodyScrollOnMobile()
+
+  return null
+}
 
 const MobilePopoverContent = ({
   open,
@@ -17,54 +23,7 @@ const MobilePopoverContent = ({
   title: string
   className?: string
 }) => {
-  const [isMounted, setPopoverElement] = useLifecycleAnimation({
-    open,
-    enter: {
-      keyframes: [
-        {
-          opacity: 0.25,
-          transform: 'translateY(1rem)',
-        },
-        {
-          opacity: 1,
-          transform: 'translateY(0)',
-        },
-      ],
-      options: {
-        easing: 'cubic-bezier(.36,.66,.04,1)',
-        duration: 150,
-        fill: 'forwards',
-      },
-      initialStyle: {
-        transformOrigin: 'bottom',
-      },
-    },
-    enterCallback: (element) => {
-      element.scrollTop = 0
-    },
-    exit: {
-      keyframes: [
-        {
-          opacity: 1,
-          transform: 'translateY(0)',
-        },
-        {
-          opacity: 0,
-          transform: 'translateY(1rem)',
-        },
-      ],
-      options: {
-        easing: 'cubic-bezier(.36,.66,.04,1)',
-        duration: 150,
-        fill: 'forwards',
-      },
-      initialStyle: {
-        transformOrigin: 'bottom',
-      },
-    },
-  })
-
-  useDisableBodyScrollOnMobile()
+  const [isMounted, setPopoverElement] = useModalAnimation(open)
 
   if (!isMounted) {
     return null
@@ -72,14 +31,15 @@ const MobilePopoverContent = ({
 
   return (
     <Portal>
+      <DisableScroll />
       <div
         ref={setPopoverElement}
-        className="absolute top-0 left-0 z-modal flex h-full w-full origin-bottom flex-col bg-default pt-safe-top pb-safe-bottom opacity-0"
+        className="fixed top-0 left-0 z-modal flex h-full w-full flex-col bg-default pt-safe-top pb-safe-bottom"
       >
         <div className="flex items-center justify-between border-b border-border py-2.5 px-3 text-base">
           <div />
           <div className="font-semibold">{title}</div>
-          <button className="font-semibold active:shadow-none active:outline-none" onClick={requestClose}>
+          <button className="font-semibold text-info active:shadow-none active:outline-none" onClick={requestClose}>
             Done
           </button>
         </div>