feat: Preferences view layout on mobile has been updated, and can be dismissed by swiping from the right

packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx

@@ -6,29 +6,32 @@ import { useModalAnimation } from '../Modal/useModalAnimation'
 type Props = {
   isOpen: boolean
   children: ReactNode
+  animationVariant?: 'horizontal' | 'vertical'
 }
 
-const ModalOverlay = forwardRef(({ isOpen, children, ...props }: Props, ref: ForwardedRef<HTMLDivElement>) => {
-  const [isMounted, setElement] = useModalAnimation(isOpen)
-  const dialog = useDialogStore({
-    open: isMounted,
-  })
+const ModalOverlay = forwardRef(
+  ({ isOpen, children, animationVariant, ...props }: Props, ref: ForwardedRef<HTMLDivElement>) => {
+    const [isMounted, setElement] = useModalAnimation(isOpen, animationVariant)
+    const dialog = useDialogStore({
+      open: isMounted,
+    })
 
-  if (!isMounted) {
-    return null
-  }
+    if (!isMounted) {
+      return null
+    }
 
-  return (
-    <Dialog
-      tabIndex={0}
-      className="fixed top-0 left-0 z-modal h-full w-full"
-      ref={mergeRefs([setElement, ref])}
-      store={dialog}
-      {...props}
-    >
-      {children}
-    </Dialog>
-  )
-})
+    return (
+      <Dialog
+        tabIndex={0}
+        className="fixed top-0 left-0 z-modal h-full w-full"
+        ref={mergeRefs([setElement, ref])}
+        store={dialog}
+        {...props}
+      >
+        {children}
+      </Dialog>
+    )
+  },
+)
 
 export default ModalOverlay