Reduce lightbox button size on native (#10500)

src/components/Lightbox/chrome/CircleChromeButton.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react-native'
 import {BlurView} from 'expo-blur'
 
-import {HITSLOP_10} from '#/lib/constants'
+import {HITSLOP_20} from '#/lib/constants'
 import {type Props as IconProps} from '#/components/icons/common'
 
 type Props = {
@@ -27,9 +27,9 @@ type Props = {
   | 'accessibilityHint'
 >
 
-const SIZE = 44
-const RADIUS = 24
-const ICON = 24
+const SIZE = 32
+const RADIUS = SIZE / 2
+const ICON = 18
 
 export function CircleChromeButton({
   icon: Icon,
@@ -45,7 +45,7 @@ export function CircleChromeButton({
       accessibilityRole="button"
       accessibilityLabel={label}
       accessibilityHint=""
-      hitSlop={HITSLOP_10}
+      hitSlop={HITSLOP_20}
       onPress={onPress}
       testID={testID}
       style={({pressed}) => [styles.root, pressed && styles.pressed]}>

src/components/Lightbox/chrome/Footer.tsx

@@ -7,10 +7,9 @@ import {
   View,
 } from 'react-native'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
-import {msg} from '@lingui/core/macro'
-import {useLingui} from '@lingui/react'
+import {useLingui} from '@lingui/react/macro'
 
-import {atoms as a} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 import {Text} from '#/components/Typography'
 
 type Props = {
@@ -20,7 +19,8 @@ type Props = {
 }
 
 export function Footer({altText, isAltExpanded, onToggleAltExpanded}: Props) {
-  const {_} = useLingui()
+  const {t: l} = useLingui()
+  const t = useTheme()
   const insets = useSafeAreaInsets()
   const isMomentumScrolling = useRef(false)
 
@@ -28,8 +28,14 @@ export function Footer({altText, isAltExpanded, onToggleAltExpanded}: Props) {
 
   return (
     <View
-      style={[styles.root, {paddingBottom: insets.bottom + 8}]}
-      pointerEvents="box-none">
+      style={[
+        a.absolute,
+        a.left_0,
+        a.right_0,
+        a.bottom_0,
+        a.pointer_events_box_none,
+        {paddingBottom: insets.bottom + 8},
+      ]}>
       <View style={[a.mx_md, styles.altWrap]}>
         <ScrollView
           scrollEnabled={isAltExpanded}
@@ -42,7 +48,7 @@ export function Footer({altText, isAltExpanded, onToggleAltExpanded}: Props) {
           contentContainerStyle={[a.px_md, a.py_sm]}>
           <Pressable
             accessibilityRole="button"
-            accessibilityLabel={_(msg`Expand alt text`)}
+            accessibilityLabel={l`Expand alt text`}
             accessibilityHint=""
             onPress={() => {
               if (isMomentumScrolling.current) return
@@ -55,7 +61,7 @@ export function Footer({altText, isAltExpanded, onToggleAltExpanded}: Props) {
             <Text
               emoji
               selectable
-              style={[a.text_sm, styles.altText]}
+              style={[a.text_sm, {color: t.palette.white}]}
               numberOfLines={isAltExpanded ? undefined : 3}>
               {altText}
             </Text>
@@ -67,18 +73,9 @@ export function Footer({altText, isAltExpanded, onToggleAltExpanded}: Props) {
 }
 
 const styles = StyleSheet.create({
-  root: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-  },
   altWrap: {
     backgroundColor: 'rgba(0, 0, 0, 0.45)',
     borderRadius: 12,
     overflow: 'hidden',
   },
-  altText: {
-    color: '#fff',
-  },
 })

src/components/Lightbox/chrome/Header.tsx

@@ -1,7 +1,6 @@
-import {StyleSheet, View} from 'react-native'
+import {View} from 'react-native'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
-import {msg} from '@lingui/core/macro'
-import {useLingui} from '@lingui/react'
+import {useLingui} from '@lingui/react/macro'
 
 import {atoms as a} from '#/alf'
 import {TimesLarge_Stroke2_Corner0_Rounded as CloseIcon} from '#/components/icons/Times'
@@ -24,36 +23,30 @@ export function Header({
   imageCount,
   activeIndex,
 }: Props) {
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const insets = useSafeAreaInsets()
 
   return (
     <View
       style={[
-        styles.root,
+        a.absolute,
+        a.top_0,
+        a.left_0,
+        a.right_0,
         a.flex_row,
         a.justify_between,
         a.align_center,
         a.px_md,
+        a.pointer_events_box_none,
         {paddingTop: insets.top + 8},
-      ]}
-      pointerEvents="box-none">
+      ]}>
       <ImageMenu onPressShare={onPressShare} onPressSave={onPressSave} />
       <PagerDots count={imageCount} activeIndex={activeIndex} />
       <CircleChromeButton
         icon={CloseIcon}
-        label={_(msg`Close image`)}
+        label={l`Close image`}
         onPress={onRequestClose}
       />
     </View>
   )
 }
-
-const styles = StyleSheet.create({
-  root: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-  },
-})

src/components/Lightbox/chrome/ImageMenu.tsx

@@ -84,7 +84,7 @@ export function ImageMenu({onPressShare, onPressSave}: Props) {
           accessibilityRole="button"
           accessibilityLabel={l`Close menu`}
           accessibilityHint=""
-          style={StyleSheet.absoluteFill}
+          style={[a.absolute, a.inset_0]}
           onPress={close}
         />
         {anchor && (