forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Scale profile badge icons with font size (#10161)
authored by
Samuel Newman
and committed by
GitHub
b9f3d04d
68a4d73d
+15
-6
+15
-6
src/components/ProfileBadges.tsx
+15
-6
src/components/ProfileBadges.tsx
···
1
-
import {View} from 'react-native'
1
+
import {useWindowDimensions, View} from 'react-native'
2
2
3
3
import {useProfileShadow} from '#/state/cache/profile-shadow'
4
-
import {atoms as a, type ViewStyleProp} from '#/alf'
4
+
import {atoms as a, useAlf, type ViewStyleProp} from '#/alf'
5
5
import {BotBadge, BotBadgeButton, isBotAccount} from '#/components/BotBadge'
6
6
import {useSimpleVerificationState} from '#/components/verification'
7
7
import {VerificationCheck} from '#/components/verification/VerificationCheck'
···
38
38
}) {
39
39
const shadowed = useProfileShadow(profile)
40
40
const verification = useSimpleVerificationState({profile})
41
+
const {fontScale: nativeScaleMultiplier} = useWindowDimensions()
42
+
const {
43
+
fonts: {scaleMultiplier: alfScaleMultiplier},
44
+
} = useAlf()
41
45
42
46
// if nothing to show, don't render the container at all
43
47
if (!verification.showBadge && !isBotAccount(shadowed)) return null
44
48
45
49
const isOnTheSmallSide = size === 'xs' || size === 'sm'
46
50
51
+
const verificationIconWidth =
52
+
verificationIconSizes[size] * nativeScaleMultiplier * alfScaleMultiplier
53
+
const botIconWidth =
54
+
botIconSizes[size] * nativeScaleMultiplier * alfScaleMultiplier
55
+
47
56
return (
48
57
<View
49
58
style={[
···
56
65
<>
57
66
<VerificationCheckButton
58
67
profile={shadowed}
59
-
width={verificationIconSizes[size]}
68
+
width={verificationIconWidth}
60
69
/>
61
-
<BotBadgeButton profile={shadowed} width={botIconSizes[size]} />
70
+
<BotBadgeButton profile={shadowed} width={botIconWidth} />
62
71
</>
63
72
) : (
64
73
<>
65
74
{verification.showBadge && (
66
75
<VerificationCheck
67
76
verifier={verification.role === 'verifier'}
68
-
width={verificationIconSizes[size]}
77
+
width={verificationIconWidth}
69
78
/>
70
79
)}
71
-
<BotBadge profile={shadowed} width={botIconSizes[size]} />
80
+
<BotBadge profile={shadowed} width={botIconWidth} />
72
81
</>
73
82
)}
74
83
</View>