Rough pass at sizing

src/components/BotBadge.tsx

@@ -3,23 +3,32 @@ import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 
 import {isBotAccount} from '#/lib/bots'
-import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 import {BotAccountAlert} from '#/components/BotAccountAlert'
 import {Button} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
-import {type Props} from '#/components/icons/common'
 import {Robot_Filled_Corner2_Rounded as RobotIcon} from '#/components/icons/Robot'
 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,
+  size = 'sm',
 }: {
   profile: bsky.profile.AnyProfileView
   alwaysShow?: boolean
-  size: Props['size']
+  size: Size
 }) {
   const t = useTheme()
 
@@ -29,35 +38,31 @@ export function BotBadge({
 
   return (
     <View>
-      <RobotIcon size={size} fill={t.atoms.text_contrast_medium.color} />
+      <RobotIcon
+        width={sizes[size]}
+        fill={t.atoms.text_contrast_medium.color}
+      />
     </View>
   )
 }
 
 export function BotBadgeButton({
   profile,
-  size,
+  size: _size,
 }: {
   profile: bsky.profile.AnyProfileView
-  size: 'lg' | 'md' | 'sm'
+  size: Size
 }) {
   const t = useTheme()
   const ax = useAnalytics()
   const {_} = useLingui()
-  const {gtPhone} = useBreakpoints()
   const control = useDialogControl()
 
   if (!isBotAccount(profile)) {
     return null
   }
 
-  console.log({size})
+  const size = sizes[_size]
-  let dimensions = 12
-  if (size === 'lg') {
-    dimensions = gtPhone ? 20 : 18
-  } else if (size === 'md') {
-    dimensions = 14
-  }
 
   return (
     <>
@@ -76,15 +81,12 @@ export function BotBadgeButton({
               a.align_end,
               a.transition_transform,
               {
-                width: dimensions,
+                width: size,
-                height: dimensions,
+                height: size,
                 transform: [{scale: hovered ? 1.1 : 1}],
               },
             ]}>
-            <RobotIcon
+            <RobotIcon width={size} fill={t.atoms.text_contrast_medium.color} />
-              width={dimensions}
-              fill={t.atoms.text_contrast_medium.color}
-            />
           </View>
         )}
       </Button>

src/components/ProfileBadges.tsx

@@ -3,7 +3,7 @@ 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} from '#/components/BotBadge'
+import {BotBadge, BotBadgeButton, type Size} from '#/components/BotBadge'
 import {useSimpleVerificationState} from '#/components/verification'
 import {VerificationCheck} from '#/components/verification/VerificationCheck'
 import {VerificationCheckButton} from '#/components/verification/VerificationCheckButton'
@@ -17,7 +17,7 @@ export function ProfileBadges({
 }: ViewStyleProp & {
   profile: bsky.profile.AnyProfileView
   interactive?: boolean
-  size: 'lg' | 'md' | 'sm'
+  size: Size
 }) {
   const shadowed = useProfileShadow(profile)
   const verification = useSimpleVerificationState({profile})

src/components/verification/VerificationCheckButton.tsx

@@ -3,7 +3,7 @@ import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 
 import {type Shadow} from '#/state/cache/types'
-import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 import {Button} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
 import {useFullVerificationState} from '#/components/verification'
@@ -14,6 +14,16 @@ 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,
 ) {
@@ -54,7 +64,7 @@ export function VerificationCheckButton({
   size,
 }: {
   profile: Shadow<bsky.profile.AnyProfileView>
-  size: 'lg' | 'md' | 'sm'
+  size: Size
 }) {
   const state = useFullVerificationState({
     profile,
@@ -70,24 +80,18 @@ export function VerificationCheckButton({
 function Badge({
   profile,
   verificationState: state,
-  size,
+  size: _size,
 }: {
   profile: Shadow<bsky.profile.AnyProfileView>
   verificationState: FullVerificationState
-  size: 'lg' | 'md' | 'sm'
+  size: Size
 }) {
   const t = useTheme()
   const ax = useAnalytics()
   const {_} = useLingui()
   const verificationsDialogControl = useDialogControl()
   const verifierDialogControl = useDialogControl()
-  const {gtPhone} = useBreakpoints()
+  const size = sizes[_size]
-  let dimensions = 12
-  if (size === 'lg') {
-    dimensions = gtPhone ? 20 : 18
-  } else if (size === 'md') {
-    dimensions = 14
-  }
 
   const verifiedByHidden = !state.profile.showBadge && state.profile.isViewer
 
@@ -116,8 +120,8 @@ function Badge({
               a.align_end,
               a.transition_transform,
               {
-                width: dimensions,
+                width: size,
-                height: dimensions,
+                height: size,
                 transform: [
                   {
                     scale: hovered ? 1.1 : 1,
@@ -126,7 +130,7 @@ function Badge({
               },
             ]}>
             <VerificationCheck
-              width={dimensions}
+              width={size}
               fill={
                 verifiedByHidden
                   ? t.atoms.bg_contrast_100.backgroundColor

src/screens/Settings/AutomationLabelSettings.tsx

@@ -139,7 +139,7 @@ export function AutomationLabelSettingsScreen({}: Props) {
                         size="xs"
                       />
                     )}
-                    <BotBadge profile={profile} alwaysShow size={16} />
+                    <BotBadge profile={profile} alwaysShow size="md" />
                   </View>
                 </View>
                 <Text

src/view/com/util/PostMeta.tsx

@@ -109,7 +109,7 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
             </MaybeLinkText>
             <ProfileBadges
               profile={author}
-              size="sm"
+              size="xs"
               style={[
                 a.pl_2xs,
                 a.self_center,