Make whole verifier clickable, no nested interactives (#8249)

2 files changed, 29 insertions, 9 deletions

diff --git a/src/components/ProfileCard.tsx b/src/components/ProfileCard.tsx
index c97911a3f..aa5830eb9 100644
--- a/src/components/ProfileCard.tsx
+++ b/src/components/ProfileCard.tsx
@@ -16,7 +16,7 @@ import {useProfileShadow} from '#/state/cache/profile-shadow'
 import {useProfileFollowMutationQueue} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
-import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
+import {PreviewableUserAvatar, UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useTheme} from '#/alf'
 import {
   Button,
@@ -130,17 +130,29 @@ export function Link({
 export function Avatar({
   profile,
   moderationOpts,
+  onPress,
+  disabledPreview,
 }: {
   profile: bsky.profile.AnyProfileView
   moderationOpts: ModerationOpts
+  onPress?: () => void
+  disabledPreview?: boolean
 }) {
   const moderation = moderateProfile(profile, moderationOpts)
 
-  return (
+  return disabledPreview ? (
+    <UserAvatar
+      size={40}
+      avatar={profile.avatar}
+      type={profile.associated?.labeler ? 'labeler' : 'user'}
+      moderation={moderation.ui('avatar')}
+    />
+  ) : (
     <PreviewableUserAvatar
       size={40}
       profile={profile}
       moderation={moderation.ui('avatar')}
+      onBeforePress={onPress}
     />
   )
 }
diff --git a/src/components/verification/VerificationsDialog.tsx b/src/components/verification/VerificationsDialog.tsx
index 42e7369ee..554149d9e 100644
--- a/src/components/verification/VerificationsDialog.tsx
+++ b/src/components/verification/VerificationsDialog.tsx
@@ -211,14 +211,22 @@ function VerifierCard({
             </>
           ) : profile && moderationOpts ? (
             <>
-              <ProfileCard.Avatar
+              <ProfileCard.Link
                 profile={profile}
-                moderationOpts={moderationOpts}
-              />
-              <ProfileCard.NameAndHandle
-                profile={profile}
-                moderationOpts={moderationOpts}
-              />
+                style={[a.flex_row, a.align_center, a.gap_sm, a.flex_1]}
+                onPress={() => {
+                  outerDialogControl.close()
+                }}>
+                <ProfileCard.Avatar
+                  profile={profile}
+                  moderationOpts={moderationOpts}
+                  disabledPreview
+                />
+                <ProfileCard.NameAndHandle
+                  profile={profile}
+                  moderationOpts={moderationOpts}
+                />
+              </ProfileCard.Link>
               {canAdminister && (
                 <View>
                   <Button