Spot check each placement

src/components/AccountList.tsx

@@ -51,26 +51,18 @@ export function AccountList({
         a.border,
         t.atoms.border_contrast_low,
       ]}>
-      {accounts
+      {accounts.map(account => (
-        .map(account => ({
+        <React.Fragment key={account.did}>
-          account,
+          <AccountItem
-          profile: profiles?.profiles.find(p => p.did === account.did),
+            profile={profiles?.profiles.find(p => p.did === account.did)}
-        }))
+            account={account}
-        .filter(item => {
+            onSelect={onSelectAccount}
-          return !!item.profile
+            isCurrentAccount={account.did === currentAccount?.did}
-        })
+            isPendingAccount={account.did === pendingDid}
-        .map(({account, profile}) => (
+          />
-          <React.Fragment key={account.did}>
+          <View style={[a.border_b, t.atoms.border_contrast_low]} />
-            <AccountItem
+        </React.Fragment>
-              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>
-        ))}
       <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={profile}
+                <ProfileBadges
-                size="sm"
+                  profile={profile}
-                style={[{marginTop: -2}]}
+                  size="sm"
-              />
+                  style={[{marginTop: -2}]}
+                />
+              )}
             </View>
             <Text
               style={[

src/components/BotBadge.tsx

@@ -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
+      <RobotIcon width={size} fill={t.atoms.text_contrast_medium.color} />
-        width={sizes[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

src/components/PostControls/ShareMenu/RecentChats.tsx

@@ -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>
   )

src/components/ProfileBadges.tsx

@@ -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} />
+          <VerificationCheckButton
-          <BotBadgeButton profile={shadowed} size={size} />
+            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>

src/components/ProfileCard.tsx

@@ -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>
   )
 }

src/components/ProfileHoverCard/index.web.tsx

@@ -531,7 +531,7 @@ function Inner({
               style={[
                 a.pl_xs,
                 {
-                  marginTop: -2,
+                  marginTop: -1,
                 },
               ]}
             />

src/components/dms/MessagesListHeader.tsx

@@ -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

src/components/verification/VerificationCheckButton.tsx

@@ -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
 

src/screens/Messages/components/ChatListItem.tsx

@@ -412,7 +412,7 @@ function ChatListItemReady({
                     </View>
                     <ProfileBadges
                       profile={profile}
-                      size="sm"
+                      size="md"
                       style={[a.pl_xs, a.self_center]}
                     />
                     {lastMessageSentAt && (

src/screens/Search/components/SearchHistory.tsx

@@ -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

src/screens/Settings/AutomationLabelSettings.tsx

@@ -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

src/screens/Settings/Settings.tsx

@@ -359,7 +359,7 @@ function ProfilePreview({
         </Text>
         <ProfileBadges
           profile={shadow}
-          size="lg"
+          size="xl"
           interactive
           style={[
             {

src/view/com/notifications/NotificationFeedItem.tsx

@@ -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}),
+              marginBottom: platform({ios: -6}),
-              top: platform({web: 1}),
+              top: platform({web: 2}),
               paddingLeft: 3,
               paddingRight: 2,
             },
@@ -1046,8 +1047,8 @@ function ExpandedAuthorCard({author}: {author: Author}) {
           </Text>
           <ProfileBadges
             profile={author.profile}
-            size="sm"
+            size="md"
-            style={[a.pl_xs, a.self_center]}
+            style={[a.pl_2xs, a.self_center]}
           />
           <Text
             numberOfLines={1}

src/view/com/util/PostMeta.tsx

@@ -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"
+              size="sm"
-              style={[
+              style={[a.pl_2xs, a.self_center]}
-                a.pl_2xs,
-                a.self_center,
-                {
-                  marginTop: platform({web: 0, ios: 0, android: -1}),
-                },
-              ]}
             />
             <MaybeLinkText
               emoji

src/view/shell/Drawer.tsx

@@ -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