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 {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 {BotBadge, BotBadgeButton, isBotAccount} from '#/components/BotBadge'
import {useSimpleVerificationState} from '#/components/verification' import {useSimpleVerificationState} from '#/components/verification'
import {VerificationCheck} from '#/components/verification/VerificationCheck' import {VerificationCheck} from '#/components/verification/VerificationCheck'
@@ -38,12 +38,21 @@ export function ProfileBadges({
}) { }) {
const shadowed = useProfileShadow(profile) const shadowed = useProfileShadow(profile)
const verification = useSimpleVerificationState({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 nothing to show, don't render the container at all
if (!verification.showBadge && !isBotAccount(shadowed)) return null if (!verification.showBadge && !isBotAccount(shadowed)) return null
const isOnTheSmallSide = size === 'xs' || size === 'sm' const isOnTheSmallSide = size === 'xs' || size === 'sm'
const verificationIconWidth =
verificationIconSizes[size] * nativeScaleMultiplier * alfScaleMultiplier
const botIconWidth =
botIconSizes[size] * nativeScaleMultiplier * alfScaleMultiplier
return ( return (
<View <View
style={[ style={[
@@ -56,19 +65,19 @@ export function ProfileBadges({
<> <>
<VerificationCheckButton <VerificationCheckButton
profile={shadowed} profile={shadowed}
width={verificationIconSizes[size]} width={verificationIconWidth}
/> />
<BotBadgeButton profile={shadowed} width={botIconSizes[size]} /> <BotBadgeButton profile={shadowed} width={botIconWidth} />
</> </>
) : ( ) : (
<> <>
{verification.showBadge && ( {verification.showBadge && (
<VerificationCheck <VerificationCheck
verifier={verification.role === 'verifier'} verifier={verification.role === 'verifier'}
width={verificationIconSizes[size]} width={verificationIconWidth}
/> />
)} )}
<BotBadge profile={shadowed} width={botIconSizes[size]} /> <BotBadge profile={shadowed} width={botIconWidth} />
</> </>
)} )}
</View> </View>