[APP-1928] add bot/automated account badge and self-labeling settings (#10008)

Co-authored-by: Eric Bailey <git@esb.lol>

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'
@@ -51,43 +51,36 @@ export function shouldShowVerificationCheckButton(
 
 export function VerificationCheckButton({
   profile,
-  size,
+  width,
 }: {
   profile: Shadow<bsky.profile.AnyProfileView>
-  size: 'lg' | 'md' | 'sm'
+  width: number
 }) {
   const state = useFullVerificationState({
     profile,
   })
 
   if (shouldShowVerificationCheckButton(state)) {
-    return <Badge profile={profile} verificationState={state} size={size} />
+    return <Badge profile={profile} verificationState={state} width={width} />
   }
 
   return null
 }
 
-export function Badge({
+function Badge({
   profile,
   verificationState: state,
-  size,
+  width,
 }: {
   profile: Shadow<bsky.profile.AnyProfileView>
   verificationState: FullVerificationState
-  size: 'lg' | 'md' | 'sm'
+  width: number
 }) {
   const t = useTheme()
   const ax = useAnalytics()
   const {_} = useLingui()
   const verificationsDialogControl = useDialogControl()
   const verifierDialogControl = useDialogControl()
-  const {gtPhone} = useBreakpoints()
-  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 +109,8 @@ export function Badge({
               a.align_end,
               a.transition_transform,
               {
-                width: dimensions,
-                height: dimensions,
+                width: width,
+                height: width,
                 transform: [
                   {
                     scale: hovered ? 1.1 : 1,
@@ -126,7 +119,7 @@ export function Badge({
               },
             ]}>
             <VerificationCheck
-              width={dimensions}
+              width={width}
               fill={
                 verifiedByHidden
                   ? t.atoms.bg_contrast_100.backgroundColor