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, 10 insertions, 6 deletions

diff --git a/src/lib/moderation/useModerationCauseDescription.ts b/src/lib/moderation/useModerationCauseDescription.ts
index 57b50d777..be9014029 100644
--- a/src/lib/moderation/useModerationCauseDescription.ts
+++ b/src/lib/moderation/useModerationCauseDescription.ts
@@ -6,15 +6,15 @@ import {
 } from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {getDefinition, getLabelStrings} from './useLabelInfo'
-import {useLabelDefinitions} from '#/state/preferences'
-import {useGlobalLabelStrings} from './useGlobalLabelStrings'
 
-import {Props as SVGIconProps} from '#/components/icons/common'
-import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning'
+import {useLabelDefinitions} from '#/state/preferences'
+import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/components/icons/CircleBanSign'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
+import {Props as SVGIconProps} from '#/components/icons/common'
 import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash'
-import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/components/icons/CircleBanSign'
+import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning'
+import {useGlobalLabelStrings} from './useGlobalLabelStrings'
+import {getDefinition, getLabelStrings} from './useLabelInfo'
 
 export interface ModerationCauseDescription {
   icon: React.ComponentType<SVGIconProps>
@@ -22,6 +22,8 @@ export interface ModerationCauseDescription {
   description: string
   source?: string
   sourceType?: ModerationCauseSource['type']
+  sourceAvi?: string
+  sourceDid?: string
 }
 
 export function useModerationCauseDescription(
@@ -138,6 +140,8 @@ export function useModerationCauseDescription(
         description: strings.description,
         source,
         sourceType: cause.source.type,
+        sourceAvi: labeler?.creator.avatar,
+        sourceDid: cause.label.src,
       }
     }
     // should never happen