diff --git a/src/components/images/AutoSizedImage.tsx b/src/components/images/AutoSizedImage.tsx index 3d4856adac..2df8d056d6 100644 --- a/src/components/images/AutoSizedImage.tsx +++ b/src/components/images/AutoSizedImage.tsx @@ -13,7 +13,7 @@ import {Trans} from '@lingui/react/macro' import {type Dimensions} from '#/lib/media/types' import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge' -import {atoms as a, useTheme} from '#/alf' +import {atoms as a, useTheme, web} from '#/alf' import {ArrowsDiagonalOut_Stroke2_Corner0_Rounded as Fullscreen} from '#/components/icons/ArrowsDiagonal' import {MediaInsetBorder} from '#/components/MediaInsetBorder' import {Text} from '#/components/Typography' @@ -210,12 +210,17 @@ export function AutoSizedImage({ color: utils.alpha(t.atoms.bg.backgroundColor, 0.2), foreground: true, }} - style={[ + style={({pressed}) => [ a.w_full, a.rounded_md, a.overflow_hidden, t.atoms.bg_contrast_25, {aspectRatio: max ?? 1}, + web([ + a.transition_transform, + {transitionDuration: '200ms'}, + pressed && {transform: [{scale: 0.99}]}, + ]), ]}> {contents} @@ -237,7 +242,16 @@ export function AutoSizedImage({ color: utils.alpha(t.atoms.bg.backgroundColor, 0.2), foreground: true, }} - style={[a.h_full]}> + style={({pressed}) => [ + a.h_full, + a.rounded_md, + a.overflow_hidden, + web([ + a.transition_transform, + {transitionDuration: '200ms'}, + pressed && {transform: [{scale: 0.99}]}, + ]), + ]}> {contents} diff --git a/src/components/images/Gallery/index.tsx b/src/components/images/Gallery/index.tsx index fce785f75b..1566f09736 100644 --- a/src/components/images/Gallery/index.tsx +++ b/src/components/images/Gallery/index.tsx @@ -430,15 +430,20 @@ function GalleryImage({ color: utils.alpha(t.atoms.bg.backgroundColor, 0.2), foreground: true, }} - style={[ + style={({pressed}) => [ a.rounded_md, a.overflow_hidden, t.atoms.bg_contrast_25, - web({ - cursor: 'inherit', - outline: 0, - border: 0, - }), + web([ + { + cursor: 'inherit', + outline: 0, + border: 0, + }, + a.transition_transform, + {transitionDuration: '200ms'}, + pressed && {transform: [{scale: 0.99}]}, + ]), ]}>