Better animations for dialogs, animate web composer (#7703)

* animation atoms, use for modals

* respect reduced motion

* simplify animtions

* fix atoms

1 files changed, 10 insertions, 14 deletions

diff --git a/src/components/Dialog/index.web.tsx b/src/components/Dialog/index.web.tsx
index e45133dc5..9f4f8bb3f 100644
--- a/src/components/Dialog/index.web.tsx
+++ b/src/components/Dialog/index.web.tsx
@@ -15,6 +15,7 @@ import {FocusScope} from '@radix-ui/react-focus-scope'
 import {RemoveScrollBar} from 'react-remove-scroll-bar'
 
 import {logger} from '#/logger'
+import {useA11y} from '#/state/a11y'
 import {useDialogStateControlContext} from '#/state/dialogs'
 import {atoms as a, flatten, useBreakpoints, useTheme, web} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
@@ -152,6 +153,7 @@ export function Inner({
   const t = useTheme()
   const {close} = React.useContext(Context)
   const {gtMobile} = useBreakpoints()
+  const {reduceMotionEnabled} = useA11y()
   useFocusGuards()
   return (
     <FocusScope loop asChild trapped>
@@ -161,7 +163,7 @@ export function Inner({
         aria-label={label}
         aria-labelledby={accessibilityLabelledBy}
         aria-describedby={accessibilityDescribedBy}
-        // @ts-ignore web only -prf
+        // @ts-expect-error web only -prf
         onClick={stopPropagation}
         onStartShouldSetResponder={_ => true}
         onTouchEnd={stopPropagation}
@@ -177,10 +179,9 @@ export function Inner({
             shadowColor: t.palette.black,
             shadowOpacity: t.name === 'light' ? 0.1 : 0.4,
             shadowRadius: 30,
-            // @ts-ignore web only
-            animation: 'fadeIn ease-out 0.1s',
           },
-          flatten(style),
+          !reduceMotionEnabled && a.zoom_fade_in,
+          style,
         ])}>
         <DismissableLayer
           onInteractOutside={preventDefault}
@@ -216,7 +217,7 @@ export const InnerFlatList = React.forwardRef<
       style={[
         a.overflow_hidden,
         a.px_0,
-        // @ts-ignore web only -sfn
+        // @ts-expect-error web only -sfn
         {maxHeight: 'calc(-36px + 100vh)'},
         webInnerStyle,
       ]}
@@ -262,20 +263,15 @@ export function Handle() {
 
 function Backdrop() {
   const t = useTheme()
+  const {reduceMotionEnabled} = useA11y()
   return (
-    <View
-      style={{
-        opacity: 0.8,
-      }}>
+    <View style={{opacity: 0.8}}>
       <View
         style={[
           a.fixed,
           a.inset_0,
-          {
-            backgroundColor: t.palette.black,
-            // @ts-ignore web only
-            animation: 'fadeIn ease-out 0.15s',
-          },
+          {backgroundColor: t.palette.black},
+          !reduceMotionEnabled && a.fade_in,
         ]}
       />
     </View>