robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Fix focus ring shapes (#9005)
* fix user avis being the wrong shape
* fix the fab being the wrong shape
samuel.fm
+24
-11
+13
-7
src/view/com/util/UserAvatar.tsx
+13
-7
src/view/com/util/UserAvatar.tsx
···
1
-
import React, {memo, useCallback, useMemo, useState} from 'react'
1
+
import {memo, useCallback, useMemo, useState} from 'react'
2
2
import {
3
3
Image,
4
4
Pressable,
···
363
363
}
364
364
}, [circular, size])
365
365
366
-
const onOpenCamera = React.useCallback(async () => {
366
+
const onOpenCamera = useCallback(async () => {
367
367
if (!(await requestCameraAccessIfNeeded())) {
368
368
return
369
369
}
···
377
377
)
378
378
}, [onSelectNewAvatar, requestCameraAccessIfNeeded])
379
379
380
-
const onOpenLibrary = React.useCallback(async () => {
380
+
const onOpenLibrary = useCallback(async () => {
381
381
if (!(await requestPhotoAccessIfNeeded())) {
382
382
return
383
383
}
···
421
421
circular,
422
422
])
423
423
424
-
const onRemoveAvatar = React.useCallback(() => {
424
+
const onRemoveAvatar = useCallback(() => {
425
425
onSelectNewAvatar(null)
426
426
}, [onSelectNewAvatar])
427
427
···
528
528
disableNavigation,
529
529
onBeforePress,
530
530
live,
531
-
...rest
531
+
...props
532
532
}: PreviewableUserAvatarProps): React.ReactNode => {
533
533
const {_} = useLingui()
534
534
const queryClient = useQueryClient()
···
557
557
moderation={moderation}
558
558
type={profile.associated?.labeler ? 'labeler' : 'user'}
559
559
live={status.isActive || live}
560
-
{...rest}
560
+
{...props}
561
561
/>
562
562
)
563
+
564
+
const linkStyle =
565
+
props.type !== 'algo' && props.type !== 'list'
566
+
? a.rounded_full
567
+
: {borderRadius: props.size > 32 ? 8 : 3}
563
568
564
569
return (
565
570
<ProfileHoverCard did={profile.did} disable={disableHoverCard}>
···
596
601
did: profile.did,
597
602
handle: profile.handle,
598
603
})}
599
-
onPress={onPress}>
604
+
onPress={onPress}
605
+
style={linkStyle}>
600
606
{avatarEl}
601
607
</Link>
602
608
)}
+11
-4
src/view/com/util/fab/FABInner.tsx
+11
-4
src/view/com/util/fab/FABInner.tsx
···
1
1
import {type ComponentProps, type JSX} from 'react'
2
-
import {StyleSheet, type TouchableWithoutFeedback} from 'react-native'
2
+
import {
3
+
type Pressable,
4
+
type StyleProp,
5
+
StyleSheet,
6
+
type ViewStyle,
7
+
} from 'react-native'
3
8
import Animated from 'react-native-reanimated'
4
9
import {useSafeAreaInsets} from 'react-native-safe-area-context'
5
10
import {LinearGradient} from 'expo-linear-gradient'
···
12
17
import {gradients} from '#/lib/styles'
13
18
import {isWeb} from '#/platform/detection'
14
19
import {ios} from '#/alf'
20
+
import {atoms as a} from '#/alf'
15
21
16
-
export interface FABProps
17
-
extends ComponentProps<typeof TouchableWithoutFeedback> {
22
+
export interface FABProps extends ComponentProps<typeof Pressable> {
18
23
testID?: string
19
24
icon: JSX.Element
25
+
style?: StyleProp<ViewStyle>
20
26
}
21
27
22
-
export function FABInner({testID, icon, onPress, ...props}: FABProps) {
28
+
export function FABInner({testID, icon, onPress, style, ...props}: FABProps) {
23
29
const insets = useSafeAreaInsets()
24
30
const {isMobile, isTablet} = useWebMediaQueries()
25
31
const playHaptic = useHaptics()
···
51
57
playHaptic('Heavy')
52
58
})}
53
59
targetScale={0.9}
60
+
style={[a.rounded_full, style]}
54
61
{...props}>
55
62
<LinearGradient
56
63
colors={[gradients.blueLight.start, gradients.blueLight.end]}