Fix focus ring shapes (#9005)

* fix user avis being the wrong shape

* fix the fab being the wrong shape

src/view/com/util/UserAvatar.tsx

@@ -1,4 +1,4 @@
-import React, {memo, useCallback, useMemo, useState} from 'react'
+import {memo, useCallback, useMemo, useState} from 'react'
 import {
   Image,
   Pressable,
@@ -363,7 +363,7 @@ let EditableUserAvatar = ({
     }
   }, [circular, size])
 
-  const onOpenCamera = React.useCallback(async () => {
+  const onOpenCamera = useCallback(async () => {
     if (!(await requestCameraAccessIfNeeded())) {
       return
     }
@@ -377,7 +377,7 @@ let EditableUserAvatar = ({
     )
   }, [onSelectNewAvatar, requestCameraAccessIfNeeded])
 
-  const onOpenLibrary = React.useCallback(async () => {
+  const onOpenLibrary = useCallback(async () => {
     if (!(await requestPhotoAccessIfNeeded())) {
       return
     }
@@ -421,7 +421,7 @@ let EditableUserAvatar = ({
     circular,
   ])
 
-  const onRemoveAvatar = React.useCallback(() => {
+  const onRemoveAvatar = useCallback(() => {
     onSelectNewAvatar(null)
   }, [onSelectNewAvatar])
 
@@ -528,7 +528,7 @@ let PreviewableUserAvatar = ({
   disableNavigation,
   onBeforePress,
   live,
-  ...rest
+  ...props
 }: PreviewableUserAvatarProps): React.ReactNode => {
   const {_} = useLingui()
   const queryClient = useQueryClient()
@@ -557,10 +557,15 @@ let PreviewableUserAvatar = ({
       moderation={moderation}
       type={profile.associated?.labeler ? 'labeler' : 'user'}
       live={status.isActive || live}
-      {...rest}
+      {...props}
     />
   )
 
+  const linkStyle =
+    props.type !== 'algo' && props.type !== 'list'
+      ? a.rounded_full
+      : {borderRadius: props.size > 32 ? 8 : 3}
+
   return (
     <ProfileHoverCard did={profile.did} disable={disableHoverCard}>
       {disableNavigation ? (
@@ -596,7 +601,8 @@ let PreviewableUserAvatar = ({
             did: profile.did,
             handle: profile.handle,
           })}
-          onPress={onPress}>
+          onPress={onPress}
+          style={linkStyle}>
           {avatarEl}
         </Link>
       )}

src/view/com/util/fab/FABInner.tsx

@@ -1,5 +1,10 @@
 import {type ComponentProps, type JSX} from 'react'
-import {StyleSheet, type TouchableWithoutFeedback} from 'react-native'
+import {
+  type Pressable,
+  type StyleProp,
+  StyleSheet,
+  type ViewStyle,
+} from 'react-native'
 import Animated from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {LinearGradient} from 'expo-linear-gradient'
@@ -12,14 +17,15 @@ import {clamp} from '#/lib/numbers'
 import {gradients} from '#/lib/styles'
 import {isWeb} from '#/platform/detection'
 import {ios} from '#/alf'
+import {atoms as a} from '#/alf'
 
-export interface FABProps
+export interface FABProps extends ComponentProps<typeof Pressable> {
-  extends ComponentProps<typeof TouchableWithoutFeedback> {
   testID?: string
   icon: JSX.Element
+  style?: StyleProp<ViewStyle>
 }
 
-export function FABInner({testID, icon, onPress, ...props}: FABProps) {
+export function FABInner({testID, icon, onPress, style, ...props}: FABProps) {
   const insets = useSafeAreaInsets()
   const {isMobile, isTablet} = useWebMediaQueries()
   const playHaptic = useHaptics()
@@ -51,6 +57,7 @@ export function FABInner({testID, icon, onPress, ...props}: FABProps) {
           playHaptic('Heavy')
         })}
         targetScale={0.9}
+        style={[a.rounded_full, style]}
         {...props}>
         <LinearGradient
           colors={[gradients.blueLight.start, gradients.blueLight.end]}