Spot check each placement
This commit is contained in:
@@ -51,26 +51,18 @@ export function AccountList({
|
||||
a.border,
|
||||
t.atoms.border_contrast_low,
|
||||
]}>
|
||||
{accounts
|
||||
.map(account => ({
|
||||
account,
|
||||
profile: profiles?.profiles.find(p => p.did === account.did),
|
||||
}))
|
||||
.filter(item => {
|
||||
return !!item.profile
|
||||
})
|
||||
.map(({account, profile}) => (
|
||||
<React.Fragment key={account.did}>
|
||||
<AccountItem
|
||||
profile={profile!}
|
||||
account={account}
|
||||
onSelect={onSelectAccount}
|
||||
isCurrentAccount={account.did === currentAccount?.did}
|
||||
isPendingAccount={account.did === pendingDid}
|
||||
/>
|
||||
<View style={[a.border_b, t.atoms.border_contrast_low]} />
|
||||
</React.Fragment>
|
||||
))}
|
||||
{accounts.map(account => (
|
||||
<React.Fragment key={account.did}>
|
||||
<AccountItem
|
||||
profile={profiles?.profiles.find(p => p.did === account.did)}
|
||||
account={account}
|
||||
onSelect={onSelectAccount}
|
||||
isCurrentAccount={account.did === currentAccount?.did}
|
||||
isPendingAccount={account.did === pendingDid}
|
||||
/>
|
||||
<View style={[a.border_b, t.atoms.border_contrast_low]} />
|
||||
</React.Fragment>
|
||||
))}
|
||||
<Button
|
||||
testID="chooseAddAccountBtn"
|
||||
style={[a.flex_1]}
|
||||
@@ -115,7 +107,7 @@ function AccountItem({
|
||||
isCurrentAccount,
|
||||
isPendingAccount,
|
||||
}: {
|
||||
profile: AppBskyActorDefs.ProfileViewDetailed
|
||||
profile?: AppBskyActorDefs.ProfileViewDetailed
|
||||
account: SessionAccount
|
||||
onSelect: (account: SessionAccount) => void
|
||||
isCurrentAccount: boolean
|
||||
@@ -170,11 +162,13 @@ function AccountItem({
|
||||
profile?.displayName || profile?.handle || account.handle,
|
||||
)}
|
||||
</Text>
|
||||
<ProfileBadges
|
||||
profile={profile}
|
||||
size="sm"
|
||||
style={[{marginTop: -2}]}
|
||||
/>
|
||||
{profile && (
|
||||
<ProfileBadges
|
||||
profile={profile}
|
||||
size="sm"
|
||||
style={[{marginTop: -2}]}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
<Text
|
||||
style={[
|
||||
|
||||
@@ -11,24 +11,14 @@ import {Robot_Filled_Corner2_Rounded as RobotIcon} from '#/components/icons/Robo
|
||||
import {useAnalytics} from '#/analytics'
|
||||
import type * as bsky from '#/types/bsky'
|
||||
|
||||
const sizes = {
|
||||
xs: 10,
|
||||
sm: 12,
|
||||
md: 14,
|
||||
lg: 18,
|
||||
xl: 22,
|
||||
} as const
|
||||
|
||||
export type Size = keyof typeof sizes
|
||||
|
||||
export function BotBadge({
|
||||
profile,
|
||||
alwaysShow = false,
|
||||
size = 'sm',
|
||||
size,
|
||||
}: {
|
||||
profile: bsky.profile.AnyProfileView
|
||||
alwaysShow?: boolean
|
||||
size: Size
|
||||
size: number
|
||||
}) {
|
||||
const t = useTheme()
|
||||
|
||||
@@ -38,20 +28,17 @@ export function BotBadge({
|
||||
|
||||
return (
|
||||
<View>
|
||||
<RobotIcon
|
||||
width={sizes[size]}
|
||||
fill={t.atoms.text_contrast_medium.color}
|
||||
/>
|
||||
<RobotIcon width={size} fill={t.atoms.text_contrast_medium.color} />
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export function BotBadgeButton({
|
||||
profile,
|
||||
size: _size,
|
||||
size,
|
||||
}: {
|
||||
profile: bsky.profile.AnyProfileView
|
||||
size: Size
|
||||
size: number
|
||||
}) {
|
||||
const t = useTheme()
|
||||
const ax = useAnalytics()
|
||||
@@ -62,8 +49,6 @@ export function BotBadgeButton({
|
||||
return null
|
||||
}
|
||||
|
||||
const size = sizes[_size]
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
|
||||
@@ -139,7 +139,7 @@ function RecentChatItem({
|
||||
numberOfLines={1}>
|
||||
{name}
|
||||
</Text>
|
||||
<ProfileBadges profile={profile} size="sm" style={[a.pl_xs]} />
|
||||
<ProfileBadges profile={profile} size="xs" style={[a.pl_2xs]} />
|
||||
</View>
|
||||
</Button>
|
||||
)
|
||||
|
||||
@@ -3,12 +3,30 @@ import {View} from 'react-native'
|
||||
import {isBotAccount} from '#/lib/bots'
|
||||
import {useProfileShadow} from '#/state/cache/profile-shadow'
|
||||
import {atoms as a, type ViewStyleProp} from '#/alf'
|
||||
import {BotBadge, BotBadgeButton, type Size} from '#/components/BotBadge'
|
||||
import {BotBadge, BotBadgeButton} from '#/components/BotBadge'
|
||||
import {useSimpleVerificationState} from '#/components/verification'
|
||||
import {VerificationCheck} from '#/components/verification/VerificationCheck'
|
||||
import {VerificationCheckButton} from '#/components/verification/VerificationCheckButton'
|
||||
import type * as bsky from '#/types/bsky'
|
||||
|
||||
export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
|
||||
|
||||
const verificationIconSizes: Record<Size, number> = {
|
||||
xs: 10,
|
||||
sm: 12,
|
||||
md: 14,
|
||||
lg: 18,
|
||||
xl: 22,
|
||||
} as const
|
||||
|
||||
const botIconSizes: Record<Size, number> = {
|
||||
xs: 11,
|
||||
sm: 13,
|
||||
md: 15,
|
||||
lg: 19,
|
||||
xl: 23,
|
||||
} as const
|
||||
|
||||
export function ProfileBadges({
|
||||
profile,
|
||||
interactive = false,
|
||||
@@ -25,22 +43,33 @@ export function ProfileBadges({
|
||||
// if nothing to show, don't render the container at all
|
||||
if (!verification.showBadge && !isBotAccount(shadowed)) return null
|
||||
|
||||
const isOnTheSmallSide = size === 'xs' || size === 'sm'
|
||||
|
||||
return (
|
||||
<View style={[a.flex_row, a.align_center, a.gap_xs, style]}>
|
||||
<View
|
||||
style={[
|
||||
a.flex_row,
|
||||
a.align_center,
|
||||
isOnTheSmallSide ? a.gap_2xs : a.gap_xs,
|
||||
style,
|
||||
]}>
|
||||
{interactive ? (
|
||||
<>
|
||||
<VerificationCheckButton profile={shadowed} size={size} />
|
||||
<BotBadgeButton profile={shadowed} size={size} />
|
||||
<VerificationCheckButton
|
||||
profile={shadowed}
|
||||
size={verificationIconSizes[size]}
|
||||
/>
|
||||
<BotBadgeButton profile={shadowed} size={botIconSizes[size]} />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{verification.showBadge && (
|
||||
<VerificationCheck
|
||||
verifier={verification.role === 'verifier'}
|
||||
size={size}
|
||||
width={verificationIconSizes[size]}
|
||||
/>
|
||||
)}
|
||||
<BotBadge profile={shadowed} size={size} />
|
||||
<BotBadge profile={shadowed} size={botIconSizes[size]} />
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
|
||||
@@ -262,7 +262,7 @@ function InlineNameAndHandle({
|
||||
</Text>
|
||||
<ProfileBadges
|
||||
profile={profile}
|
||||
size="sm"
|
||||
size="md"
|
||||
style={[
|
||||
a.pl_2xs,
|
||||
a.self_center,
|
||||
@@ -314,7 +314,7 @@ export function Name({
|
||||
numberOfLines={1}>
|
||||
{name}
|
||||
</Text>
|
||||
<ProfileBadges profile={profile} size="sm" style={[a.pl_xs]} />
|
||||
<ProfileBadges profile={profile} size="md" style={[a.pl_xs]} />
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -531,7 +531,7 @@ function Inner({
|
||||
style={[
|
||||
a.pl_xs,
|
||||
{
|
||||
marginTop: -2,
|
||||
marginTop: -1,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
@@ -157,7 +157,7 @@ function HeaderReady({
|
||||
numberOfLines={1}>
|
||||
{displayName}
|
||||
</Text>
|
||||
<ProfileBadges profile={profile} size="sm" style={[a.pl_xs]} />
|
||||
<ProfileBadges profile={profile} size="md" style={[a.pl_xs]} />
|
||||
</View>
|
||||
{!isDeletedAccount && (
|
||||
<Text
|
||||
|
||||
@@ -14,16 +14,6 @@ import {VerifierDialog} from '#/components/verification/VerifierDialog'
|
||||
import {useAnalytics} from '#/analytics'
|
||||
import type * as bsky from '#/types/bsky'
|
||||
|
||||
const sizes = {
|
||||
xs: 10,
|
||||
sm: 12,
|
||||
md: 14,
|
||||
lg: 18,
|
||||
xl: 22,
|
||||
} as const
|
||||
|
||||
export type Size = keyof typeof sizes
|
||||
|
||||
export function shouldShowVerificationCheckButton(
|
||||
state: FullVerificationState,
|
||||
) {
|
||||
@@ -64,7 +54,7 @@ export function VerificationCheckButton({
|
||||
size,
|
||||
}: {
|
||||
profile: Shadow<bsky.profile.AnyProfileView>
|
||||
size: Size
|
||||
size: number
|
||||
}) {
|
||||
const state = useFullVerificationState({
|
||||
profile,
|
||||
@@ -80,18 +70,17 @@ export function VerificationCheckButton({
|
||||
function Badge({
|
||||
profile,
|
||||
verificationState: state,
|
||||
size: _size,
|
||||
size,
|
||||
}: {
|
||||
profile: Shadow<bsky.profile.AnyProfileView>
|
||||
verificationState: FullVerificationState
|
||||
size: Size
|
||||
size: number
|
||||
}) {
|
||||
const t = useTheme()
|
||||
const ax = useAnalytics()
|
||||
const {_} = useLingui()
|
||||
const verificationsDialogControl = useDialogControl()
|
||||
const verifierDialogControl = useDialogControl()
|
||||
const size = sizes[_size]
|
||||
|
||||
const verifiedByHidden = !state.profile.showBadge && state.profile.isViewer
|
||||
|
||||
|
||||
@@ -412,7 +412,7 @@ function ChatListItemReady({
|
||||
</View>
|
||||
<ProfileBadges
|
||||
profile={profile}
|
||||
size="sm"
|
||||
size="md"
|
||||
style={[a.pl_xs, a.self_center]}
|
||||
/>
|
||||
{lastMessageSentAt && (
|
||||
|
||||
@@ -163,7 +163,7 @@ function RecentProfileItem({
|
||||
<Text emoji style={[a.text_xs, a.leading_snug]} numberOfLines={1}>
|
||||
{name}
|
||||
</Text>
|
||||
<ProfileBadges profile={profile} size="sm" style={[a.pl_xs]} />
|
||||
<ProfileBadges profile={profile} size="xs" style={[a.pl_xs]} />
|
||||
</View>
|
||||
</Link>
|
||||
<Button
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import React from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {type $Typed, ComAtprotoLabelDefs} from '@atproto/api'
|
||||
import {msg} from '@lingui/core/macro'
|
||||
@@ -139,7 +138,7 @@ export function AutomationLabelSettingsScreen({}: Props) {
|
||||
size="xs"
|
||||
/>
|
||||
)}
|
||||
<BotBadge profile={profile} alwaysShow size="md" />
|
||||
<BotBadge profile={profile} alwaysShow size={16} />
|
||||
</View>
|
||||
</View>
|
||||
<Text
|
||||
|
||||
@@ -359,7 +359,7 @@ function ProfilePreview({
|
||||
</Text>
|
||||
<ProfileBadges
|
||||
profile={shadow}
|
||||
size="lg"
|
||||
size="xl"
|
||||
interactive
|
||||
style={[
|
||||
{
|
||||
|
||||
@@ -244,13 +244,14 @@ let NotificationFeedItem = ({
|
||||
{forceLTR(firstAuthorName)}
|
||||
<ProfileBadges
|
||||
profile={firstAuthor.profile}
|
||||
size="sm"
|
||||
size="md"
|
||||
style={[
|
||||
a.relative,
|
||||
{
|
||||
// weird stuff here
|
||||
paddingTop: platform({android: 2}),
|
||||
marginBottom: platform({ios: -7}),
|
||||
top: platform({web: 1}),
|
||||
marginBottom: platform({ios: -6}),
|
||||
top: platform({web: 2}),
|
||||
paddingLeft: 3,
|
||||
paddingRight: 2,
|
||||
},
|
||||
@@ -1046,8 +1047,8 @@ function ExpandedAuthorCard({author}: {author: Author}) {
|
||||
</Text>
|
||||
<ProfileBadges
|
||||
profile={author.profile}
|
||||
size="sm"
|
||||
style={[a.pl_xs, a.self_center]}
|
||||
size="md"
|
||||
style={[a.pl_2xs, a.self_center]}
|
||||
/>
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
|
||||
@@ -13,7 +13,7 @@ import {sanitizeHandle} from '#/lib/strings/handles'
|
||||
import {niceDate} from '#/lib/strings/time'
|
||||
import {useProfileShadow} from '#/state/cache/profile-shadow'
|
||||
import {unstableCacheProfileView} from '#/state/queries/profile'
|
||||
import {atoms as a, platform, useTheme, web} from '#/alf'
|
||||
import {atoms as a, useTheme, web} from '#/alf'
|
||||
import {WebOnlyInlineLinkText} from '#/components/Link'
|
||||
import {ProfileBadges} from '#/components/ProfileBadges'
|
||||
import {ProfileHoverCard} from '#/components/ProfileHoverCard'
|
||||
@@ -109,14 +109,8 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
|
||||
</MaybeLinkText>
|
||||
<ProfileBadges
|
||||
profile={author}
|
||||
size="xs"
|
||||
style={[
|
||||
a.pl_2xs,
|
||||
a.self_center,
|
||||
{
|
||||
marginTop: platform({web: 0, ios: 0, android: -1}),
|
||||
},
|
||||
]}
|
||||
size="sm"
|
||||
style={[a.pl_2xs, a.self_center]}
|
||||
/>
|
||||
<MaybeLinkText
|
||||
emoji
|
||||
|
||||
@@ -95,7 +95,7 @@ let DrawerProfileCard = ({
|
||||
numberOfLines={1}>
|
||||
{profile?.displayName || account.handle}
|
||||
</Text>
|
||||
{profile && <ProfileBadges profile={profile} size="md" />}
|
||||
{profile && <ProfileBadges profile={profile} size="lg" />}
|
||||
</View>
|
||||
<Text
|
||||
emoji
|
||||
|
||||
Reference in New Issue
Block a user