reduce lightbox button size on native

src/components/Lightbox/Lightbox.tsx

@@ -19,8 +19,8 @@ export function Lightbox() {
     <ImageView
       lightbox={activeLightbox}
       onRequestClose={onClose}
-      onPressSave={saveImageToAlbum}
+      onPressSave={uri => void saveImageToAlbum(uri)}
-      onPressShare={uri => shareImageModal({uri})}
+      onPressShare={uri => void shareImageModal({uri})}
     />
   )
 }

src/components/Lightbox/chrome/CircleChromeButton.tsx

@@ -27,9 +27,9 @@ type Props = {
   | 'accessibilityHint'
 >
 
-const SIZE = 44
+const SIZE = 32
 const RADIUS = 24
-const ICON = 24
+const ICON = 18
 
 export function CircleChromeButton({
   icon: Icon,

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/macro'
-import {useLingui} from '@lingui/react'
 
-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}]}
+      style={[
-      pointerEvents="box-none">
+        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,4 +1,4 @@
-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'
@@ -30,14 +30,17 @@ export function Header({
   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
@@ -48,12 +51,3 @@ export function Header({
     </View>
   )
 }
-
-const styles = StyleSheet.create({
-  root: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-  },
-})

src/components/Lightbox/chrome/ImageMenu.tsx

@@ -8,8 +8,7 @@ import Animated, {
   withSpring,
   withTiming,
 } from 'react-native-reanimated'
-import {msg} from '@lingui/core/macro'
+import {useLingui} from '@lingui/react/macro'
-import {useLingui} from '@lingui/react'
 
 import {atoms as a} from '#/alf'
 import {ArrowShareRight_Stroke2_Corner2_Rounded as ShareIcon} from '#/components/icons/ArrowShareRight'
@@ -36,7 +35,7 @@ const SPRING_IN = {damping: 18, mass: 0.6, stiffness: 240}
 const TIMING_OUT = {duration: 150}
 
 export function ImageMenu({onPressShare, onPressSave}: Props) {
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const triggerRef = useRef<View>(null)
   const [isMounted, setIsMounted] = useState(false)
   const [anchor, setAnchor] = useState<Anchor | null>(null)
@@ -71,7 +70,7 @@ export function ImageMenu({onPressShare, onPressSave}: Props) {
         <CircleChromeButton
           icon={DotsIcon}
           iconStyle={{transform: [{rotate: '90deg'}]}}
-          label={_(msg`Image options`)}
+          label={l`Image options`}
           onPress={open}
         />
       </View>
@@ -83,21 +82,21 @@ export function ImageMenu({onPressShare, onPressSave}: Props) {
         statusBarTranslucent>
         <Pressable
           accessibilityRole="button"
-          accessibilityLabel={_(msg`Close menu`)}
+          accessibilityLabel={l`Close menu`}
           accessibilityHint=""
-          style={StyleSheet.absoluteFill}
+          style={[a.absolute, a.inset_0]}
           onPress={close}
         />
         {anchor && (
           <MenuCard anchor={anchor} progress={progress}>
             <MenuItem
               icon={ShareIcon}
-              label={_(msg`Share image`)}
+              label={l`Share image`}
               onPress={() => runAction(onPressShare)}
             />
             <MenuItem
               icon={DownloadIcon}
-              label={_(msg`Save image`)}
+              label={l`Save image`}
               onPress={() => runAction(onPressSave)}
             />
           </MenuCard>