Merge branch 'bluesky-social:main' into zh

src/components/Button.tsx

@@ -88,336 +88,355 @@ export function useButtonContext() {
   return React.useContext(Context)
 }
 
-export function Button({
+export const Button = React.forwardRef<View, ButtonProps>(
-  children,
+  (
-  variant,
+    {
-  color,
+      children,
-  size,
-  shape = 'default',
-  label,
-  disabled = false,
-  style,
-  hoverStyle: hoverStyleProp,
-  ...rest
-}: ButtonProps) {
-  const t = useTheme()
-  const [state, setState] = React.useState({
-    pressed: false,
-    hovered: false,
-    focused: false,
-  })
-
-  const onPressIn = React.useCallback(() => {
-    setState(s => ({
-      ...s,
-      pressed: true,
-    }))
-  }, [setState])
-  const onPressOut = React.useCallback(() => {
-    setState(s => ({
-      ...s,
-      pressed: false,
-    }))
-  }, [setState])
-  const onHoverIn = React.useCallback(() => {
-    setState(s => ({
-      ...s,
-      hovered: true,
-    }))
-  }, [setState])
-  const onHoverOut = React.useCallback(() => {
-    setState(s => ({
-      ...s,
-      hovered: false,
-    }))
-  }, [setState])
-  const onFocus = React.useCallback(() => {
-    setState(s => ({
-      ...s,
-      focused: true,
-    }))
-  }, [setState])
-  const onBlur = React.useCallback(() => {
-    setState(s => ({
-      ...s,
-      focused: false,
-    }))
-  }, [setState])
-
-  const {baseStyles, hoverStyles} = React.useMemo(() => {
-    const baseStyles: ViewStyle[] = []
-    const hoverStyles: ViewStyle[] = []
-    const light = t.name === 'light'
-
-    if (color === 'primary') {
-      if (variant === 'solid') {
-        if (!disabled) {
-          baseStyles.push({
-            backgroundColor: t.palette.primary_500,
-          })
-          hoverStyles.push({
-            backgroundColor: t.palette.primary_600,
-          })
-        } else {
-          baseStyles.push({
-            backgroundColor: t.palette.primary_700,
-          })
-        }
-      } else if (variant === 'outline') {
-        baseStyles.push(a.border, t.atoms.bg, {
-          borderWidth: 1,
-        })
-
-        if (!disabled) {
-          baseStyles.push(a.border, {
-            borderColor: t.palette.primary_500,
-          })
-          hoverStyles.push(a.border, {
-            backgroundColor: light
-              ? t.palette.primary_50
-              : t.palette.primary_950,
-          })
-        } else {
-          baseStyles.push(a.border, {
-            borderColor: light ? t.palette.primary_200 : t.palette.primary_900,
-          })
-        }
-      } else if (variant === 'ghost') {
-        if (!disabled) {
-          baseStyles.push(t.atoms.bg)
-          hoverStyles.push({
-            backgroundColor: light
-              ? t.palette.primary_100
-              : t.palette.primary_900,
-          })
-        }
-      }
-    } else if (color === 'secondary') {
-      if (variant === 'solid') {
-        if (!disabled) {
-          baseStyles.push({
-            backgroundColor: t.palette.contrast_25,
-          })
-          hoverStyles.push({
-            backgroundColor: t.palette.contrast_50,
-          })
-        } else {
-          baseStyles.push({
-            backgroundColor: t.palette.contrast_100,
-          })
-        }
-      } else if (variant === 'outline') {
-        baseStyles.push(a.border, t.atoms.bg, {
-          borderWidth: 1,
-        })
-
-        if (!disabled) {
-          baseStyles.push(a.border, {
-            borderColor: t.palette.contrast_300,
-          })
-          hoverStyles.push(t.atoms.bg_contrast_50)
-        } else {
-          baseStyles.push(a.border, {
-            borderColor: t.palette.contrast_200,
-          })
-        }
-      } else if (variant === 'ghost') {
-        if (!disabled) {
-          baseStyles.push(t.atoms.bg)
-          hoverStyles.push({
-            backgroundColor: t.palette.contrast_100,
-          })
-        }
-      }
-    } else if (color === 'negative') {
-      if (variant === 'solid') {
-        if (!disabled) {
-          baseStyles.push({
-            backgroundColor: t.palette.negative_500,
-          })
-          hoverStyles.push({
-            backgroundColor: t.palette.negative_600,
-          })
-        } else {
-          baseStyles.push({
-            backgroundColor: t.palette.negative_700,
-          })
-        }
-      } else if (variant === 'outline') {
-        baseStyles.push(a.border, t.atoms.bg, {
-          borderWidth: 1,
-        })
-
-        if (!disabled) {
-          baseStyles.push(a.border, {
-            borderColor: t.palette.negative_500,
-          })
-          hoverStyles.push(a.border, {
-            backgroundColor: light
-              ? t.palette.negative_50
-              : t.palette.negative_975,
-          })
-        } else {
-          baseStyles.push(a.border, {
-            borderColor: light
-              ? t.palette.negative_200
-              : t.palette.negative_900,
-          })
-        }
-      } else if (variant === 'ghost') {
-        if (!disabled) {
-          baseStyles.push(t.atoms.bg)
-          hoverStyles.push({
-            backgroundColor: light
-              ? t.palette.negative_100
-              : t.palette.negative_975,
-          })
-        }
-      }
-    }
-
-    if (shape === 'default') {
-      if (size === 'large') {
-        baseStyles.push({paddingVertical: 15}, a.px_2xl, a.rounded_sm, a.gap_md)
-      } else if (size === 'medium') {
-        baseStyles.push({paddingVertical: 12}, a.px_2xl, a.rounded_sm, a.gap_md)
-      } else if (size === 'small') {
-        baseStyles.push({paddingVertical: 9}, a.px_lg, a.rounded_sm, a.gap_sm)
-      } else if (size === 'xsmall') {
-        baseStyles.push({paddingVertical: 6}, a.px_sm, a.rounded_sm, a.gap_sm)
-      } else if (size === 'tiny') {
-        baseStyles.push({paddingVertical: 4}, a.px_sm, a.rounded_xs, a.gap_xs)
-      }
-    } else if (shape === 'round' || shape === 'square') {
-      if (size === 'large') {
-        if (shape === 'round') {
-          baseStyles.push({height: 54, width: 54})
-        } else {
-          baseStyles.push({height: 50, width: 50})
-        }
-      } else if (size === 'small') {
-        baseStyles.push({height: 34, width: 34})
-      } else if (size === 'xsmall') {
-        baseStyles.push({height: 28, width: 28})
-      } else if (size === 'tiny') {
-        baseStyles.push({height: 20, width: 20})
-      }
-
-      if (shape === 'round') {
-        baseStyles.push(a.rounded_full)
-      } else if (shape === 'square') {
-        if (size === 'tiny') {
-          baseStyles.push(a.rounded_xs)
-        } else {
-          baseStyles.push(a.rounded_sm)
-        }
-      }
-    }
-
-    return {
-      baseStyles,
-      hoverStyles,
-    }
-  }, [t, variant, color, size, shape, disabled])
-
-  const {gradientColors, gradientHoverColors, gradientLocations} =
-    React.useMemo(() => {
-      const colors: string[] = []
-      const hoverColors: string[] = []
-      const locations: number[] = []
-      const gradient = {
-        primary: tokens.gradients.sky,
-        secondary: tokens.gradients.sky,
-        negative: tokens.gradients.sky,
-        gradient_sky: tokens.gradients.sky,
-        gradient_midnight: tokens.gradients.midnight,
-        gradient_sunrise: tokens.gradients.sunrise,
-        gradient_sunset: tokens.gradients.sunset,
-        gradient_nordic: tokens.gradients.nordic,
-        gradient_bonfire: tokens.gradients.bonfire,
-      }[color || 'primary']
-
-      if (variant === 'gradient') {
-        colors.push(...gradient.values.map(([_, color]) => color))
-        hoverColors.push(...gradient.values.map(_ => gradient.hover_value))
-        locations.push(...gradient.values.map(([location, _]) => location))
-      }
-
-      return {
-        gradientColors: colors,
-        gradientHoverColors: hoverColors,
-        gradientLocations: locations,
-      }
-    }, [variant, color])
-
-  const context = React.useMemo<ButtonContext>(
-    () => ({
-      ...state,
       variant,
       color,
       size,
-      disabled: disabled || false,
+      shape = 'default',
-    }),
+      label,
-    [state, variant, color, size, disabled],
+      disabled = false,
-  )
+      style,
+      hoverStyle: hoverStyleProp,
+      ...rest
+    },
+    ref,
+  ) => {
+    const t = useTheme()
+    const [state, setState] = React.useState({
+      pressed: false,
+      hovered: false,
+      focused: false,
+    })
 
-  const flattenedBaseStyles = flatten(baseStyles)
+    const onPressIn = React.useCallback(() => {
+      setState(s => ({
+        ...s,
+        pressed: true,
+      }))
+    }, [setState])
+    const onPressOut = React.useCallback(() => {
+      setState(s => ({
+        ...s,
+        pressed: false,
+      }))
+    }, [setState])
+    const onHoverIn = React.useCallback(() => {
+      setState(s => ({
+        ...s,
+        hovered: true,
+      }))
+    }, [setState])
+    const onHoverOut = React.useCallback(() => {
+      setState(s => ({
+        ...s,
+        hovered: false,
+      }))
+    }, [setState])
+    const onFocus = React.useCallback(() => {
+      setState(s => ({
+        ...s,
+        focused: true,
+      }))
+    }, [setState])
+    const onBlur = React.useCallback(() => {
+      setState(s => ({
+        ...s,
+        focused: false,
+      }))
+    }, [setState])
 
-  return (
+    const {baseStyles, hoverStyles} = React.useMemo(() => {
-    <Pressable
+      const baseStyles: ViewStyle[] = []
-      role="button"
+      const hoverStyles: ViewStyle[] = []
-      accessibilityHint={undefined} // optional
+      const light = t.name === 'light'
-      {...rest}
+
-      aria-label={label}
+      if (color === 'primary') {
-      aria-pressed={state.pressed}
+        if (variant === 'solid') {
-      accessibilityLabel={label}
+          if (!disabled) {
-      disabled={disabled || false}
+            baseStyles.push({
-      accessibilityState={{
+              backgroundColor: t.palette.primary_500,
+            })
+            hoverStyles.push({
+              backgroundColor: t.palette.primary_600,
+            })
+          } else {
+            baseStyles.push({
+              backgroundColor: t.palette.primary_700,
+            })
+          }
+        } else if (variant === 'outline') {
+          baseStyles.push(a.border, t.atoms.bg, {
+            borderWidth: 1,
+          })
+
+          if (!disabled) {
+            baseStyles.push(a.border, {
+              borderColor: t.palette.primary_500,
+            })
+            hoverStyles.push(a.border, {
+              backgroundColor: light
+                ? t.palette.primary_50
+                : t.palette.primary_950,
+            })
+          } else {
+            baseStyles.push(a.border, {
+              borderColor: light
+                ? t.palette.primary_200
+                : t.palette.primary_900,
+            })
+          }
+        } else if (variant === 'ghost') {
+          if (!disabled) {
+            baseStyles.push(t.atoms.bg)
+            hoverStyles.push({
+              backgroundColor: light
+                ? t.palette.primary_100
+                : t.palette.primary_900,
+            })
+          }
+        }
+      } else if (color === 'secondary') {
+        if (variant === 'solid') {
+          if (!disabled) {
+            baseStyles.push({
+              backgroundColor: t.palette.contrast_25,
+            })
+            hoverStyles.push({
+              backgroundColor: t.palette.contrast_50,
+            })
+          } else {
+            baseStyles.push({
+              backgroundColor: t.palette.contrast_100,
+            })
+          }
+        } else if (variant === 'outline') {
+          baseStyles.push(a.border, t.atoms.bg, {
+            borderWidth: 1,
+          })
+
+          if (!disabled) {
+            baseStyles.push(a.border, {
+              borderColor: t.palette.contrast_300,
+            })
+            hoverStyles.push(t.atoms.bg_contrast_50)
+          } else {
+            baseStyles.push(a.border, {
+              borderColor: t.palette.contrast_200,
+            })
+          }
+        } else if (variant === 'ghost') {
+          if (!disabled) {
+            baseStyles.push(t.atoms.bg)
+            hoverStyles.push({
+              backgroundColor: t.palette.contrast_100,
+            })
+          }
+        }
+      } else if (color === 'negative') {
+        if (variant === 'solid') {
+          if (!disabled) {
+            baseStyles.push({
+              backgroundColor: t.palette.negative_500,
+            })
+            hoverStyles.push({
+              backgroundColor: t.palette.negative_600,
+            })
+          } else {
+            baseStyles.push({
+              backgroundColor: t.palette.negative_700,
+            })
+          }
+        } else if (variant === 'outline') {
+          baseStyles.push(a.border, t.atoms.bg, {
+            borderWidth: 1,
+          })
+
+          if (!disabled) {
+            baseStyles.push(a.border, {
+              borderColor: t.palette.negative_500,
+            })
+            hoverStyles.push(a.border, {
+              backgroundColor: light
+                ? t.palette.negative_50
+                : t.palette.negative_975,
+            })
+          } else {
+            baseStyles.push(a.border, {
+              borderColor: light
+                ? t.palette.negative_200
+                : t.palette.negative_900,
+            })
+          }
+        } else if (variant === 'ghost') {
+          if (!disabled) {
+            baseStyles.push(t.atoms.bg)
+            hoverStyles.push({
+              backgroundColor: light
+                ? t.palette.negative_100
+                : t.palette.negative_975,
+            })
+          }
+        }
+      }
+
+      if (shape === 'default') {
+        if (size === 'large') {
+          baseStyles.push(
+            {paddingVertical: 15},
+            a.px_2xl,
+            a.rounded_sm,
+            a.gap_md,
+          )
+        } else if (size === 'medium') {
+          baseStyles.push(
+            {paddingVertical: 12},
+            a.px_2xl,
+            a.rounded_sm,
+            a.gap_md,
+          )
+        } else if (size === 'small') {
+          baseStyles.push({paddingVertical: 9}, a.px_lg, a.rounded_sm, a.gap_sm)
+        } else if (size === 'xsmall') {
+          baseStyles.push({paddingVertical: 6}, a.px_sm, a.rounded_sm, a.gap_sm)
+        } else if (size === 'tiny') {
+          baseStyles.push({paddingVertical: 4}, a.px_sm, a.rounded_xs, a.gap_xs)
+        }
+      } else if (shape === 'round' || shape === 'square') {
+        if (size === 'large') {
+          if (shape === 'round') {
+            baseStyles.push({height: 54, width: 54})
+          } else {
+            baseStyles.push({height: 50, width: 50})
+          }
+        } else if (size === 'small') {
+          baseStyles.push({height: 34, width: 34})
+        } else if (size === 'xsmall') {
+          baseStyles.push({height: 28, width: 28})
+        } else if (size === 'tiny') {
+          baseStyles.push({height: 20, width: 20})
+        }
+
+        if (shape === 'round') {
+          baseStyles.push(a.rounded_full)
+        } else if (shape === 'square') {
+          if (size === 'tiny') {
+            baseStyles.push(a.rounded_xs)
+          } else {
+            baseStyles.push(a.rounded_sm)
+          }
+        }
+      }
+
+      return {
+        baseStyles,
+        hoverStyles,
+      }
+    }, [t, variant, color, size, shape, disabled])
+
+    const {gradientColors, gradientHoverColors, gradientLocations} =
+      React.useMemo(() => {
+        const colors: string[] = []
+        const hoverColors: string[] = []
+        const locations: number[] = []
+        const gradient = {
+          primary: tokens.gradients.sky,
+          secondary: tokens.gradients.sky,
+          negative: tokens.gradients.sky,
+          gradient_sky: tokens.gradients.sky,
+          gradient_midnight: tokens.gradients.midnight,
+          gradient_sunrise: tokens.gradients.sunrise,
+          gradient_sunset: tokens.gradients.sunset,
+          gradient_nordic: tokens.gradients.nordic,
+          gradient_bonfire: tokens.gradients.bonfire,
+        }[color || 'primary']
+
+        if (variant === 'gradient') {
+          colors.push(...gradient.values.map(([_, color]) => color))
+          hoverColors.push(...gradient.values.map(_ => gradient.hover_value))
+          locations.push(...gradient.values.map(([location, _]) => location))
+        }
+
+        return {
+          gradientColors: colors,
+          gradientHoverColors: hoverColors,
+          gradientLocations: locations,
+        }
+      }, [variant, color])
+
+    const context = React.useMemo<ButtonContext>(
+      () => ({
+        ...state,
+        variant,
+        color,
+        size,
         disabled: disabled || false,
-      }}
+      }),
-      style={[
+      [state, variant, color, size, disabled],
-        a.flex_row,
+    )
-        a.align_center,
+
-        a.justify_center,
+    const flattenedBaseStyles = flatten(baseStyles)
-        flattenedBaseStyles,
+
-        flatten(style),
+    return (
-        ...(state.hovered || state.pressed
+      <Pressable
-          ? [hoverStyles, flatten(hoverStyleProp)]
+        role="button"
-          : []),
+        accessibilityHint={undefined} // optional
-      ]}
+        {...rest}
-      onPressIn={onPressIn}
+        ref={ref}
-      onPressOut={onPressOut}
+        aria-label={label}
-      onHoverIn={onHoverIn}
+        aria-pressed={state.pressed}
-      onHoverOut={onHoverOut}
+        accessibilityLabel={label}
-      onFocus={onFocus}
+        disabled={disabled || false}
-      onBlur={onBlur}>
+        accessibilityState={{
-      {variant === 'gradient' && (
+          disabled: disabled || false,
-        <View
+        }}
-          style={[
+        style={[
-            a.absolute,
+          a.flex_row,
-            a.inset_0,
+          a.align_center,
-            a.overflow_hidden,
+          a.justify_center,
-            {borderRadius: flattenedBaseStyles.borderRadius},
+          flattenedBaseStyles,
-          ]}>
+          flatten(style),
-          <LinearGradient
+          ...(state.hovered || state.pressed
-            colors={
+            ? [hoverStyles, flatten(hoverStyleProp)]
-              state.hovered || state.pressed
+            : []),
-                ? gradientHoverColors
+        ]}
-                : gradientColors
+        onPressIn={onPressIn}
-            }
+        onPressOut={onPressOut}
-            locations={gradientLocations}
+        onHoverIn={onHoverIn}
-            start={{x: 0, y: 0}}
+        onHoverOut={onHoverOut}
-            end={{x: 1, y: 1}}
+        onFocus={onFocus}
-            style={[a.absolute, a.inset_0]}
+        onBlur={onBlur}>
-          />
+        {variant === 'gradient' && (
-        </View>
+          <View
-      )}
+            style={[
-      <Context.Provider value={context}>
+              a.absolute,
-        {typeof children === 'function' ? children(context) : children}
+              a.inset_0,
-      </Context.Provider>
+              a.overflow_hidden,
-    </Pressable>
+              {borderRadius: flattenedBaseStyles.borderRadius},
-  )
+            ]}>
-}
+            <LinearGradient
+              colors={
+                state.hovered || state.pressed
+                  ? gradientHoverColors
+                  : gradientColors
+              }
+              locations={gradientLocations}
+              start={{x: 0, y: 0}}
+              end={{x: 1, y: 1}}
+              style={[a.absolute, a.inset_0]}
+            />
+          </View>
+        )}
+        <Context.Provider value={context}>
+          {typeof children === 'function' ? children(context) : children}
+        </Context.Provider>
+      </Pressable>
+    )
+  },
+)
+Button.displayName = 'Button'
 
 export function useSharedButtonTextStyles() {
   const t = useTheme()

src/components/forms/TextField.tsx

@@ -196,6 +196,13 @@ export function createInput(Component: typeof TextInput) {
               textAlignVertical: rest.multiline ? 'top' : undefined,
               minHeight: rest.multiline ? 80 : undefined,
             },
+            // fix for autofill styles covering border
+            web({
+              paddingTop: 12,
+              paddingBottom: 12,
+              marginTop: 2,
+              marginBottom: 2,
+            }),
             android({
               paddingBottom: 16,
             }),

src/screens/Onboarding/StepProfile/index.tsx

@@ -181,8 +181,8 @@ export function StepProfile() {
       image = await openCropper({
         mediaType: 'photo',
         cropperCircleOverlay: true,
-        height: image.height,
+        height: 1000,
-        width: image.width,
+        width: 1000,
         path: image.path,
       })
     }

src/state/persisted/schema.ts

@@ -60,6 +60,7 @@ export const schema = z.object({
     appLanguage: z.string(),
   }),
   requireAltTextEnabled: z.boolean(), // should move to server
+  largeAltBadgeEnabled: z.boolean().optional(),
   externalEmbeds: z
     .object({
       giphy: z.enum(externalEmbedOptions).optional(),
@@ -112,6 +113,7 @@ export const defaults: Schema = {
     appLanguage: deviceLocales[0] || 'en',
   },
   requireAltTextEnabled: false,
+  largeAltBadgeEnabled: false,
   externalEmbeds: {},
   mutedThreads: [],
   invites: {

src/state/preferences/alt-text-required.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import * as persisted from '#/state/persisted'
 
 type StateContext = persisted.Schema['requireAltTextEnabled']

src/state/preferences/hidden-posts.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import * as persisted from '#/state/persisted'
 
 type SetStateCb = (

src/state/preferences/index.tsx

@@ -8,6 +8,7 @@ import {Provider as HiddenPostsProvider} from './hidden-posts'
 import {Provider as InAppBrowserProvider} from './in-app-browser'
 import {Provider as KawaiiProvider} from './kawaii'
 import {Provider as LanguagesProvider} from './languages'
+import {Provider as LargeAltBadgeProvider} from './large-alt-badge'
 
 export {
   useRequireAltTextEnabled,
@@ -27,17 +28,19 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   return (
     <LanguagesProvider>
       <AltTextRequiredProvider>
-        <ExternalEmbedsProvider>
+        <LargeAltBadgeProvider>
-          <HiddenPostsProvider>
+          <ExternalEmbedsProvider>
-            <InAppBrowserProvider>
+            <HiddenPostsProvider>
-              <DisableHapticsProvider>
+              <InAppBrowserProvider>
-                <AutoplayProvider>
+                <DisableHapticsProvider>
-                  <KawaiiProvider>{children}</KawaiiProvider>
+                  <AutoplayProvider>
-                </AutoplayProvider>
+                    <KawaiiProvider>{children}</KawaiiProvider>
-              </DisableHapticsProvider>
+                  </AutoplayProvider>
-            </InAppBrowserProvider>
+                </DisableHapticsProvider>
-          </HiddenPostsProvider>
+              </InAppBrowserProvider>
-        </ExternalEmbedsProvider>
+            </HiddenPostsProvider>
+          </ExternalEmbedsProvider>
+        </LargeAltBadgeProvider>
       </AltTextRequiredProvider>
     </LanguagesProvider>
   )

src/state/preferences/large-alt-badge.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+
+import * as persisted from '#/state/persisted'
+
+type StateContext = persisted.Schema['largeAltBadgeEnabled']
+type SetContext = (v: persisted.Schema['largeAltBadgeEnabled']) => void
+
+const stateContext = React.createContext<StateContext>(
+  persisted.defaults.largeAltBadgeEnabled,
+)
+const setContext = React.createContext<SetContext>(
+  (_: persisted.Schema['largeAltBadgeEnabled']) => {},
+)
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  const [state, setState] = React.useState(
+    persisted.get('largeAltBadgeEnabled'),
+  )
+
+  const setStateWrapped = React.useCallback(
+    (largeAltBadgeEnabled: persisted.Schema['largeAltBadgeEnabled']) => {
+      setState(largeAltBadgeEnabled)
+      persisted.write('largeAltBadgeEnabled', largeAltBadgeEnabled)
+    },
+    [setState],
+  )
+
+  React.useEffect(() => {
+    return persisted.onUpdate(() => {
+      setState(persisted.get('largeAltBadgeEnabled'))
+    })
+  }, [setStateWrapped])
+
+  return (
+    <stateContext.Provider value={state}>
+      <setContext.Provider value={setStateWrapped}>
+        {children}
+      </setContext.Provider>
+    </stateContext.Provider>
+  )
+}
+
+export function useLargeAltBadgeEnabled() {
+  return React.useContext(stateContext)
+}
+
+export function useSetLargeAltBadgeEnabled() {
+  return React.useContext(setContext)
+}

src/view/com/home/HomeHeaderLayoutMobile.tsx

@@ -120,6 +120,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     paddingVertical: 5,
     width: '100%',
+    minHeight: 46,
   },
   title: {
     fontSize: 21,

src/view/com/util/UserAvatar.tsx

@@ -303,8 +303,8 @@ let EditableUserAvatar = ({
       const croppedImage = await openCropper({
         mediaType: 'photo',
         cropperCircleOverlay: true,
-        height: item.height,
+        height: 1000,
-        width: item.width,
+        width: 1000,
         path: item.path,
       })
 

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,

src/view/com/util/post-embeds/GifEmbed.tsx

@@ -8,6 +8,7 @@ import {useLingui} from '@lingui/react'
 import {HITSLOP_20} from '#/lib/constants'
 import {parseAltFromGIFDescription} from '#/lib/gif-alt-text'
 import {isWeb} from '#/platform/detection'
+import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
 import {EmbedPlayerParams} from 'lib/strings/embed-player'
 import {useAutoplayDisabled} from 'state/preferences'
 import {atoms as a, useTheme} from '#/alf'
@@ -157,6 +158,7 @@ export function GifEmbed({
 
 function AltText({text}: {text: string}) {
   const control = Prompt.usePromptControl()
+  const largeAltBadge = useLargeAltBadgeEnabled()
 
   const {_} = useLingui()
   return (
@@ -169,7 +171,9 @@ function AltText({text}: {text: string}) {
         hitSlop={HITSLOP_20}
         onPress={control.open}
         style={styles.altContainer}>
-        <Text style={styles.alt} accessible={false}>
+        <Text
+          style={[styles.alt, largeAltBadge && a.text_xs]}
+          accessible={false}>
           <Trans>ALT</Trans>
         </Text>
       </TouchableOpacity>

src/view/com/util/post-embeds/index.tsx

@@ -21,6 +21,7 @@ import {
 import {ImagesLightbox, useLightboxControls} from '#/state/lightbox'
 import {usePalette} from 'lib/hooks/usePalette'
 import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard'
+import {atoms as a} from '#/alf'
 import {ContentHider} from '../../../../components/moderation/ContentHider'
 import {AutoSizedImage} from '../images/AutoSizedImage'
 import {ImageLayoutGrid} from '../images/ImageLayoutGrid'
@@ -28,6 +29,7 @@ import {ExternalLinkEmbed} from './ExternalLinkEmbed'
 import {ListEmbed} from './ListEmbed'
 import {MaybeQuoteEmbed} from './QuoteEmbed'
 import hairlineWidth = StyleSheet.hairlineWidth
+import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
 
 type Embed =
   | AppBskyEmbedRecord.View
@@ -51,6 +53,7 @@ export function PostEmbeds({
 }) {
   const pal = usePalette('default')
   const {openLightbox} = useLightboxControls()
+  const largeAltBadge = useLargeAltBadgeEnabled()
 
   // quote post with media
   // =
@@ -130,10 +133,12 @@ export function PostEmbeds({
                 dimensionsHint={aspectRatio}
                 onPress={() => _openLightbox(0)}
                 onPressIn={() => onPressIn(0)}
-                style={[styles.singleImage]}>
+                style={a.rounded_sm}>
                 {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>
@@ -151,9 +156,6 @@ export function PostEmbeds({
               images={embed.images}
               onPress={_openLightbox}
               onPressIn={onPressIn}
-              style={
-                embed.images.length === 1 ? [styles.singleImage] : undefined
-              }
             />
           </View>
         </ContentHider>
@@ -179,9 +181,6 @@ const styles = StyleSheet.create({
   imagesContainer: {
     marginTop: 8,
   },
-  singleImage: {
-    borderRadius: 8,
-  },
   altContainer: {
     backgroundColor: 'rgba(0, 0, 0, 0.75)',
     borderRadius: 6,

src/view/screens/AccessibilitySettings.tsx

@@ -4,13 +4,12 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useFocusEffect} from '@react-navigation/native'
 
+import {useAnalytics} from '#/lib/analytics/analytics'
+import {usePalette} from '#/lib/hooks/usePalette'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
+import {s} from '#/lib/styles'
 import {isNative} from '#/platform/detection'
-import {useSetMinimalShellMode} from '#/state/shell'
-import {useAnalytics} from 'lib/analytics/analytics'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
-import {s} from 'lib/styles'
 import {
   useAutoplayDisabled,
   useHapticsDisabled,
@@ -18,11 +17,16 @@ import {
   useSetAutoplayDisabled,
   useSetHapticsDisabled,
   useSetRequireAltTextEnabled,
-} from 'state/preferences'
+} from '#/state/preferences'
-import {ToggleButton} from 'view/com/util/forms/ToggleButton'
+import {
-import {SimpleViewHeader} from '../com/util/SimpleViewHeader'
+  useLargeAltBadgeEnabled,
-import {Text} from '../com/util/text/Text'
+  useSetLargeAltBadgeEnabled,
-import {ScrollView} from '../com/util/Views'
+} from '#/state/preferences/large-alt-badge'
+import {useSetMinimalShellMode} from '#/state/shell'
+import {ToggleButton} from '#/view/com/util/forms/ToggleButton'
+import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader'
+import {Text} from '#/view/com/util/text/Text'
+import {ScrollView} from '#/view/com/util/Views'
 
 type Props = NativeStackScreenProps<
   CommonNavigatorParams,
@@ -41,6 +45,8 @@ export function AccessibilitySettingsScreen({}: Props) {
   const setAutoplayDisabled = useSetAutoplayDisabled()
   const hapticsDisabled = useHapticsDisabled()
   const setHapticsDisabled = useSetHapticsDisabled()
+  const largeAltBadgeEnabled = useLargeAltBadgeEnabled()
+  const setLargeAltBadgeEnabled = useSetLargeAltBadgeEnabled()
 
   useFocusEffect(
     React.useCallback(() => {
@@ -84,6 +90,13 @@ export function AccessibilitySettingsScreen({}: Props) {
             isSelected={requireAltTextEnabled}
             onPress={() => setRequireAltTextEnabled(!requireAltTextEnabled)}
           />
+          <ToggleButton
+            type="default-light"
+            label={_(msg`Display larger alt text badges`)}
+            labelType="lg"
+            isSelected={!!largeAltBadgeEnabled}
+            onPress={() => setLargeAltBadgeEnabled(!largeAltBadgeEnabled)}
+          />
         </View>
         <Text type="xl-bold" style={[pal.text, styles.heading]}>
           <Trans>Media</Trans>