diff --git a/src/components/BotBadge.tsx b/src/components/BotBadge.tsx
index 1b5555ba45..3f9a023b3a 100644
--- a/src/components/BotBadge.tsx
+++ b/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 (
-
+
)
}
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})
- let dimensions = 12
- if (size === 'lg') {
- dimensions = gtPhone ? 20 : 18
- } else if (size === 'md') {
- dimensions = 14
- }
+ const size = sizes[_size]
return (
<>
@@ -76,15 +81,12 @@ export function BotBadgeButton({
a.align_end,
a.transition_transform,
{
- width: dimensions,
- height: dimensions,
+ width: size,
+ height: size,
transform: [{scale: hovered ? 1.1 : 1}],
},
]}>
-
+
)}
diff --git a/src/components/ProfileBadges.tsx b/src/components/ProfileBadges.tsx
index e7441962ea..44bddacf99 100644
--- a/src/components/ProfileBadges.tsx
+++ b/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})
diff --git a/src/components/verification/VerificationCheckButton.tsx b/src/components/verification/VerificationCheckButton.tsx
index 210ed635a5..71d63e6fb8 100644
--- a/src/components/verification/VerificationCheckButton.tsx
+++ b/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
- 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
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({
},
]}>
)}
-
+
{