Tune moderation UIs

src/components/moderation/ContentHider.tsx

@@ -74,16 +74,17 @@ export function ContentHider({
               a.w_full,
               a.justify_start,
               a.align_center,
-              a.py_sm,
+              a.py_md,
-              a.px_md,
+              a.pl_md,
-              a.gap_sm,
+              a.pr_lg,
+              a.gap_xs,
               a.rounded_sm,
               t.atoms.bg_contrast_25,
-              gtMobile && [a.py_md, a.px_lg],
+              gtMobile && [a.py_md, a.px_lg, a.gap_sm],
               (state.hovered || state.pressed) && t.atoms.bg_contrast_50,
             ]}>
             <desc.icon
-              size={gtMobile ? 'lg' : 'md'}
+              size="md"
               fill={t.atoms.text_contrast_medium.color}
               style={{marginLeft: -2}}
             />
@@ -92,7 +93,6 @@ export function ContentHider({
                 a.flex_1,
                 a.text_left,
                 a.font_bold,
-                a.italic,
                 a.leading_snug,
                 t.atoms.text_contrast_medium,
                 web({
@@ -126,7 +126,7 @@ export function ContentHider({
           label={_(
             msg`Learn more about the moderation applied to this content.`,
           )}
-          style={[a.pt_sm]}>
+          style={[a.pt_xs]}>
           {state => (
             <Text
               style={[
@@ -138,7 +138,7 @@ export function ContentHider({
                 a.text_left,
               ]}>
               <Trans>
-                This post was labeled by {sanitizeDisplayName(desc.source!)}.{' '}
+                Labeled by {sanitizeDisplayName(desc.source!)}.{' '}
                 <Text
                   style={[
                     {color: t.palette.primary_500},

src/components/moderation/LabelsOnMe.tsx

@@ -52,7 +52,7 @@ export function LabelsOnMe({
           control.open()
         }}>
         <ButtonIcon position="left" icon={CircleInfo} />
-        <ButtonText style={[a.leading_snug, a.italic]}>
+        <ButtonText style={[a.leading_snug]}>
           {labels.length}{' '}
           {labels.length === 1 ? (
             <Trans>

src/components/moderation/ModerationDetailsDialog.tsx

@@ -6,13 +6,14 @@ import {ModerationCause} from '@atproto/api'
 
 import {listUriToHref} from '#/lib/strings/url-helpers'
 import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
+import {makeProfileLink} from '#/lib/routes/links'
 
 import {isNative} from '#/platform/detection'
 import {useTheme, atoms as a} from '#/alf'
 import {Text} from '#/components/Typography'
 import * as Dialog from '#/components/Dialog'
 import {InlineLink} from '#/components/Link'
-import {makeProfileLink} from '#/lib/routes/links'
+import {Divider} from '#/components/Divider'
 
 export {useDialogControl as useModerationDetailsDialogControl} from '#/components/Dialog'
 
@@ -118,19 +119,21 @@ function ModerationDetailsDialogInner({
       </Text>
 
       {modcause.type === 'label' && (
-        <View style={[t.atoms.bg_contrast_25, a.px_lg, a.py_lg, a.rounded_sm]}>
+        <>
-          <Text style={[t.atoms.text, a.text_sm, a.leading_snug]}>
+          <Divider />
+          <Text style={[t.atoms.text, a.text_md, a.leading_snug, a.mt_md]}>
             <Trans>
               This label was applied by{' '}
               <InlineLink
                 to={makeProfileLink({did: modcause.label.src, handle: ''})}
-                onPress={() => control.close()}>
+                onPress={() => control.close()}
+                style={a.text_md}>
                 {desc.source}
               </InlineLink>
               .
             </Trans>
           </Text>
-        </View>
+        </>
       )}
 
       {isNative && <View style={{height: 40}} />}

src/components/moderation/PostAlerts.tsx

@@ -4,11 +4,9 @@ import {ModerationUI, ModerationCause} from '@atproto/api'
 
 import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
 import {getModerationCauseKey} from '#/lib/moderation'
-import {sanitizeDisplayName} from '#/lib/strings/display-names'
 
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a} from '#/alf'
 import {Button, ButtonText, ButtonIcon} from '#/components/Button'
-import {Text} from '#/components/Typography'
 import {
   ModerationDetailsDialog,
   useModerationDetailsDialogControl,
@@ -28,46 +26,19 @@ export function PostAlerts({
 
   return (
     <View style={[a.flex_col, a.gap_xs, style]}>
-      {modui.inform && (
+      <View style={[a.flex_row, a.flex_wrap, a.gap_xs]}>
-        <View style={[a.flex_row, a.flex_wrap, a.gap_xs]}>
+        {modui.alerts.map(cause => (
-          {modui.informs.map(cause => (
+          <PostLabel key={getModerationCauseKey(cause)} cause={cause} />
-            <PostInform key={getModerationCauseKey(cause)} cause={cause} />
+        ))}
-          ))}
+        {modui.informs.map(cause => (
-        </View>
+          <PostLabel key={getModerationCauseKey(cause)} cause={cause} />
-      )}
+        ))}
-      {modui.alerts.map(cause => (
+      </View>
-        <PostAlert key={getModerationCauseKey(cause)} cause={cause} />
-      ))}
     </View>
   )
 }
 
-function PostInform({cause}: {cause: ModerationCause}) {
+function PostLabel({cause}: {cause: ModerationCause}) {
-  const control = useModerationDetailsDialogControl()
-  const desc = useModerationCauseDescription(cause)
-
-  return (
-    <>
-      <Button
-        label={desc.name}
-        variant="solid"
-        color="secondary"
-        size="tiny"
-        shape="default"
-        onPress={() => {
-          control.open()
-        }}>
-        <ButtonIcon icon={desc.icon} position="left" />
-        <ButtonText>{desc.name}</ButtonText>
-      </Button>
-
-      <ModerationDetailsDialog control={control} modcause={cause} />
-    </>
-  )
-}
-
-function PostAlert({cause}: {cause: ModerationCause}) {
-  const t = useTheme()
   const control = useModerationDetailsDialogControl()
   const desc = useModerationCauseDescription(cause)
 
@@ -81,16 +52,11 @@ function PostAlert({cause}: {cause: ModerationCause}) {
         shape="default"
         onPress={() => {
           control.open()
-        }}>
+        }}
+        style={[a.px_sm, a.py_xs, a.gap_xs]}>
         <ButtonIcon icon={desc.icon} position="left" />
-        <ButtonText style={[a.flex_1, a.text_left, a.italic, a.leading_snug]}>
+        <ButtonText style={[a.flex_1, a.text_left, a.leading_snug]}>
           {desc.name}
-          {desc.source && (
-            <Text style={[a.text_sm, t.atoms.text_contrast_medium]}>
-              {' — '}
-              {sanitizeDisplayName(desc.source)}
-            </Text>
-          )}
         </ButtonText>
       </Button>
 

src/components/moderation/ProfileHeaderAlerts.tsx

@@ -2,13 +2,11 @@ import React from 'react'
 import {StyleProp, View, ViewStyle} from 'react-native'
 import {ModerationCause, ModerationDecision} from '@atproto/api'
 
-import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {getModerationCauseKey} from 'lib/moderation'
 import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
 
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a} from '#/alf'
 import {Button, ButtonText, ButtonIcon} from '#/components/Button'
-import {Text} from '#/components/Typography'
 import {
   ModerationDetailsDialog,
   useModerationDetailsDialogControl,
@@ -28,46 +26,19 @@ export function ProfileHeaderAlerts({
 
   return (
     <View style={[a.flex_col, a.gap_xs, style]}>
-      {modui.inform && (
+      <View style={[a.flex_row, a.flex_wrap, a.gap_xs]}>
-        <View style={[a.flex_row, a.flex_wrap, a.gap_xs]}>
+        {modui.alerts.map(cause => (
-          {modui.informs.map(cause => (
+          <ProfileLabel key={getModerationCauseKey(cause)} cause={cause} />
-            <ProfileInform key={getModerationCauseKey(cause)} cause={cause} />
+        ))}
-          ))}
+        {modui.informs.map(cause => (
-        </View>
+          <ProfileLabel key={getModerationCauseKey(cause)} cause={cause} />
-      )}
+        ))}
-      {modui.alerts.map(cause => (
+      </View>
-        <ProfileAlert key={getModerationCauseKey(cause)} cause={cause} />
-      ))}
     </View>
   )
 }
 
-function ProfileInform({cause}: {cause: ModerationCause}) {
+function ProfileLabel({cause}: {cause: ModerationCause}) {
-  const control = useModerationDetailsDialogControl()
-  const desc = useModerationCauseDescription(cause)
-
-  return (
-    <>
-      <Button
-        label={desc.name}
-        variant="solid"
-        color="secondary"
-        size="tiny"
-        shape="default"
-        onPress={() => {
-          control.open()
-        }}>
-        <ButtonIcon icon={desc.icon} position="left" />
-        <ButtonText>{desc.name}</ButtonText>
-      </Button>
-
-      <ModerationDetailsDialog control={control} modcause={cause} />
-    </>
-  )
-}
-
-function ProfileAlert({cause}: {cause: ModerationCause}) {
-  const t = useTheme()
   const control = useModerationDetailsDialogControl()
   const desc = useModerationCauseDescription(cause)
 
@@ -81,18 +52,14 @@ function ProfileAlert({cause}: {cause: ModerationCause}) {
         shape="default"
         onPress={() => {
           control.open()
-        }}>
+        }}
+        style={[a.px_sm, a.py_xs, a.gap_xs]}>
         <ButtonIcon icon={desc.icon} position="left" />
-        <ButtonText style={[a.flex_1, a.text_left, a.italic, a.leading_snug]}>
+        <ButtonText style={[a.flex_1, a.text_left, a.leading_snug]}>
           {desc.name}
-          {desc.source && (
-            <Text style={[a.text_sm, t.atoms.text_contrast_medium]}>
-              {' — '}
-              {sanitizeDisplayName(desc.source)}
-            </Text>
-          )}
         </ButtonText>
       </Button>
+
       <ModerationDetailsDialog control={control} modcause={cause} />
     </>
   )

src/lib/moderation/useModerationCauseDescription.ts

@@ -102,7 +102,7 @@ export function useModerationCauseDescription(
     }
   }
   if (cause.type === 'label') {
-    const def = getDefinition(labelDefs, cause.label)
+    const def = cause.labelDef || getDefinition(labelDefs, cause.label)
     const strings = getLabelStrings(i18n.locale, globalLabelStrings, def)
     const labeler = labelers.find(l => l.creator.did === cause.label.src)
     return {