Improve the visual clarity of labels on profiles and posts (#4262)

* Update PostAlerts rendering to show the avi of the labeler rather than the display name; also add size variations

* Update ProfileHeaderAlerts to match PostAlerts behavior

1 files changed, 41 insertions, 12 deletions

diff --git a/src/components/moderation/PostAlerts.tsx b/src/components/moderation/PostAlerts.tsx
index c59aa2655..5a33bbc80 100644
--- a/src/components/moderation/PostAlerts.tsx
+++ b/src/components/moderation/PostAlerts.tsx
@@ -1,9 +1,10 @@
 import React from 'react'
 import {StyleProp, View, ViewStyle} from 'react-native'
-import {ModerationCause, ModerationUI} from '@atproto/api'
+import {BSKY_LABELER_DID, ModerationCause, ModerationUI} from '@atproto/api'
 
 import {getModerationCauseKey} from '#/lib/moderation'
 import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
+import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useTheme} from '#/alf'
 import {Button} from '#/components/Button'
 import {
@@ -14,9 +15,11 @@ import {Text} from '#/components/Typography'
 
 export function PostAlerts({
   modui,
+  size,
   style,
 }: {
   modui: ModerationUI
+  size?: 'medium' | 'large'
   includeMute?: boolean
   style?: StyleProp<ViewStyle>
 }) {
@@ -28,17 +31,31 @@ export function PostAlerts({
     <View style={[a.flex_col, a.gap_xs, style]}>
       <View style={[a.flex_row, a.flex_wrap, a.gap_xs]}>
         {modui.alerts.map(cause => (
-          <PostLabel key={getModerationCauseKey(cause)} cause={cause} />
+          <PostLabel
+            key={getModerationCauseKey(cause)}
+            cause={cause}
+            size={size}
+          />
         ))}
         {modui.informs.map(cause => (
-          <PostLabel key={getModerationCauseKey(cause)} cause={cause} />
+          <PostLabel
+            key={getModerationCauseKey(cause)}
+            cause={cause}
+            size={size}
+          />
         ))}
       </View>
     </View>
   )
 }
 
-function PostLabel({cause}: {cause: ModerationCause}) {
+function PostLabel({
+  cause,
+  size,
+}: {
+  cause: ModerationCause
+  size?: 'medium' | 'large'
+}) {
   const control = useModerationDetailsDialogControl()
   const desc = useModerationCauseDescription(cause)
   const t = useTheme()
@@ -55,24 +72,36 @@ function PostLabel({cause}: {cause: ModerationCause}) {
             style={[
               a.flex_row,
               a.align_center,
-              {paddingLeft: 4, paddingRight: 6, paddingVertical: 1},
               a.gap_xs,
               a.rounded_sm,
               hovered || pressed
-                ? t.atoms.bg_contrast_50
-                : t.atoms.bg_contrast_25,
+                ? size === 'large'
+                  ? t.atoms.bg_contrast_50
+                  : t.atoms.bg_contrast_25
+                : size === 'large'
+                ? t.atoms.bg_contrast_25
+                : undefined,
+              size === 'large'
+                ? {paddingLeft: 4, paddingRight: 6, paddingVertical: 2}
+                : {paddingRight: 4, paddingVertical: 1},
             ]}>
-            <desc.icon size="xs" fill={t.atoms.text_contrast_medium.color} />
+            {desc.sourceType === 'labeler' &&
+            desc.sourceDid !== BSKY_LABELER_DID ? (
+              <UserAvatar
+                avatar={desc.sourceAvi}
+                size={size === 'large' ? 16 : 12}
+              />
+            ) : (
+              <desc.icon size="sm" fill={t.atoms.text_contrast_medium.color} />
+            )}
             <Text
               style={[
                 a.text_left,
                 a.leading_snug,
-                a.text_xs,
-                t.atoms.text_contrast_medium,
-                a.font_semibold,
+                size === 'large' ? {fontSize: 13} : a.text_xs,
+                size === 'large' ? t.atoms.text : t.atoms.text_contrast_high,
               ]}>
               {desc.name}
-              {desc.source ? ` – ${desc.source}` : ''}
             </Text>
           </View>
         )}