#434

frontend/src/components/ui/dialog.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next'
 
 import LocalisedText from '@/components/LocalisedText'
 import { translateUIMessage } from '@/lib/i18n'
+import { useClientMotion } from '@/lib/useClientMotion'
 import { cn } from '@/lib/utils'
 
 const Dialog = DialogPrimitive.Root
@@ -37,14 +38,17 @@ const DialogContent = React.forwardRef<
     React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
     & { closeLabel?: React.ReactNode }
 >(
-    ({ className, children, closeLabel, ...props }, ref) => {
+    ({ className, children, closeLabel, style, ...props }, ref) => {
       const { i18n } = useTranslation ('shared')
+      const motion = useClientMotion ()
+      const animationDuration = `${motion.duration ('popover')}ms`
       const close = translateUIMessage ('dialogue.close', 'shared', i18n.language)
       return (
 	  <DialogPortal>
-	    <DialogOverlay/>
+	    <DialogOverlay style={{ animationDuration }}/>
 	    <DialogPrimitive.Content
 		ref={ref}
+		style={{ animationDuration, ...style }}
 		className={cn (
 		    'fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-2rem)] max-w-lg',
 		    'translate-x-[-50%] translate-y-[-50%]',