Option for large alt badges (#4571)

* add pref for large alt badge

* add to settings

* do the large badge bit

* Tweak wording

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>

src/view/com/util/images/Gallery.tsx

@@ -5,7 +5,9 @@ import {AppBskyEmbedImages} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {isWeb} from 'platform/detection'
+import {isWeb} from '#/platform/detection'
+import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
+import {atoms as a} from '#/alf'
 
 type EventFunction = (index: number) => void
 
@@ -27,20 +29,21 @@ export const GalleryItem: FC<GalleryItemProps> = ({
   onLongPress,
 }) => {
   const {_} = useLingui()
+  const largeAltBadge = useLargeAltBadgeEnabled()
   const image = images[index]
   return (
-    <View style={styles.fullWidth}>
+    <View style={a.flex_1}>
       <Pressable
         onPress={onPress ? () => onPress(index) : undefined}
         onPressIn={onPressIn ? () => onPressIn(index) : undefined}
         onLongPress={onLongPress ? () => onLongPress(index) : undefined}
-        style={styles.fullWidth}
+        style={a.flex_1}
         accessibilityRole="button"
         accessibilityLabel={image.alt || _(msg`Image`)}
         accessibilityHint="">
         <Image
           source={{uri: image.thumb}}
-          style={[styles.image, imageStyle]}
+          style={[a.flex_1, a.rounded_xs, imageStyle]}
           accessible={true}
           accessibilityLabel={image.alt}
           accessibilityHint=""
@@ -49,7 +52,9 @@ export const GalleryItem: FC<GalleryItemProps> = ({
       </Pressable>
       {image.alt === '' ? null : (
         <View style={styles.altContainer}>
-          <Text style={styles.alt} accessible={false}>
+          <Text
+            style={[styles.alt, largeAltBadge && a.text_xs]}
+            accessible={false}>
             ALT
           </Text>
         </View>
@@ -59,13 +64,6 @@ export const GalleryItem: FC<GalleryItemProps> = ({
 }
 
 const styles = StyleSheet.create({
-  fullWidth: {
-    flex: 1,
-  },
-  image: {
-    flex: 1,
-    borderRadius: 4,
-  },
   altContainer: {
     backgroundColor: 'rgba(0, 0, 0, 0.75)',
     borderRadius: 6,