scale profile badge icons with font size
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user