scale profile badge icons with font size

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Samuel Newman
2026-04-02 12:25:31 +03:00
parent 512e550c2e
commit 9eda1c77bd
+15 -6
View File
@@ -1,7 +1,7 @@
import {View} from 'react-native'
import {useWindowDimensions, View} from 'react-native'
import {useProfileShadow} from '#/state/cache/profile-shadow'
import {atoms as a, type ViewStyleProp} from '#/alf'
import {atoms as a, useAlf, type ViewStyleProp} from '#/alf'
import {BotBadge, BotBadgeButton, isBotAccount} from '#/components/BotBadge'
import {useSimpleVerificationState} from '#/components/verification'
import {VerificationCheck} from '#/components/verification/VerificationCheck'
@@ -38,12 +38,21 @@ export function ProfileBadges({
}) {
const shadowed = useProfileShadow(profile)
const verification = useSimpleVerificationState({profile})
const {fontScale: nativeScaleMultiplier} = useWindowDimensions()
const {
fonts: {scaleMultiplier: alfScaleMultiplier},
} = useAlf()
// if nothing to show, don't render the container at all
if (!verification.showBadge && !isBotAccount(shadowed)) return null
const isOnTheSmallSide = size === 'xs' || size === 'sm'
const verificationIconWidth =
verificationIconSizes[size] * nativeScaleMultiplier * alfScaleMultiplier
const botIconWidth =
botIconSizes[size] * nativeScaleMultiplier * alfScaleMultiplier
return (
<View
style={[
@@ -56,19 +65,19 @@ export function ProfileBadges({
<>
<VerificationCheckButton
profile={shadowed}
width={verificationIconSizes[size]}
width={verificationIconWidth}
/>
<BotBadgeButton profile={shadowed} width={botIconSizes[size]} />
<BotBadgeButton profile={shadowed} width={botIconWidth} />
</>
) : (
<>
{verification.showBadge && (
<VerificationCheck
verifier={verification.role === 'verifier'}
width={verificationIconSizes[size]}
width={verificationIconWidth}
/>
)}
<BotBadge profile={shadowed} width={botIconSizes[size]} />
<BotBadge profile={shadowed} width={botIconWidth} />
</>
)}
</View>