Rough pass at sizing

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()
-  let dimensions = 12
-  if (size === 'lg') {
-    dimensions = gtPhone ? 20 : 18
-  } else if (size === 'md') {
-    dimensions = 14
-  }
+  const size = sizes[_size]
 
   const verifiedByHidden = !state.profile.showBadge && state.profile.isViewer
 
@@ -116,8 +120,8 @@ function Badge({
               a.align_end,
               a.transition_transform,
               {
-                width: dimensions,
-                height: dimensions,
+                width: size,
+                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