3 files changed, 68 insertions, 30 deletions
diff --git a/src/components/moderation/PostAlerts.tsx b/src/components/moderation/PostAlerts.tsx
index 0bfe69678..c59aa2655 100644
--- a/src/components/moderation/PostAlerts.tsx
+++ b/src/components/moderation/PostAlerts.tsx
@@ -1,16 +1,16 @@
 import React from 'react'
 import {StyleProp, View, ViewStyle} from 'react-native'
-import {ModerationUI, ModerationCause} from '@atproto/api'
+import {ModerationCause, ModerationUI} from '@atproto/api'
 
-import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
 import {getModerationCauseKey} from '#/lib/moderation'
-
-import {atoms as a} from '#/alf'
-import {Button, ButtonText, ButtonIcon} from '#/components/Button'
+import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
+import {atoms as a, useTheme} from '#/alf'
+import {Button} from '#/components/Button'
 import {
   ModerationDetailsDialog,
   useModerationDetailsDialogControl,
 } from '#/components/moderation/ModerationDetailsDialog'
+import {Text} from '#/components/Typography'
 
 export function PostAlerts({
   modui,
@@ -41,23 +41,41 @@ export function PostAlerts({
 function PostLabel({cause}: {cause: ModerationCause}) {
   const control = useModerationDetailsDialogControl()
   const desc = useModerationCauseDescription(cause)
+  const t = useTheme()
 
   return (
     <>
       <Button
         label={desc.name}
-        variant="solid"
-        color="secondary"
-        size="small"
-        shape="default"
         onPress={() => {
           control.open()
-        }}
-        style={[a.px_sm, a.py_xs, a.gap_xs]}>
-        <ButtonIcon icon={desc.icon} position="left" />
-        <ButtonText style={[a.text_left, a.leading_snug]}>
-          {desc.name}
-        </ButtonText>
+        }}>
+        {({hovered, pressed}) => (
+          <View
+            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,
+            ]}>
+            <desc.icon size="xs" 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,
+              ]}>
+              {desc.name}
+              {desc.source ? ` – ${desc.source}` : ''}
+            </Text>
+          </View>
+        )}
       </Button>
 
       <ModerationDetailsDialog control={control} modcause={cause} />
diff --git a/src/components/moderation/PostHider.tsx b/src/components/moderation/PostHider.tsx
index 05cb8464e..177104f93 100644
--- a/src/components/moderation/PostHider.tsx
+++ b/src/components/moderation/PostHider.tsx
@@ -18,6 +18,7 @@ import {
 import {Text} from '#/components/Typography'
 
 interface Props extends ComponentProps<typeof Link> {
+  disabled: boolean
   iconSize: number
   iconStyles: StyleProp<ViewStyle>
   modui: ModerationUI
@@ -27,6 +28,7 @@ interface Props extends ComponentProps<typeof Link> {
 export function PostHider({
   testID,
   href,
+  disabled,
   modui,
   style,
   children,
@@ -47,7 +49,7 @@ export function PostHider({
     precacheProfile(queryClient, profile)
   }, [queryClient, profile])
 
-  if (!blur) {
+  if (!blur || (disabled && !modui.noOverride)) {
     return (
       <Link
         testID={testID}
diff --git a/src/components/moderation/ProfileHeaderAlerts.tsx b/src/components/moderation/ProfileHeaderAlerts.tsx
index dfc2aa557..3fa24b938 100644
--- a/src/components/moderation/ProfileHeaderAlerts.tsx
+++ b/src/components/moderation/ProfileHeaderAlerts.tsx
@@ -2,15 +2,15 @@ import React from 'react'
 import {StyleProp, View, ViewStyle} from 'react-native'
 import {ModerationCause, ModerationDecision} from '@atproto/api'
 
-import {getModerationCauseKey} from 'lib/moderation'
 import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
-
-import {atoms as a} from '#/alf'
-import {Button, ButtonText, ButtonIcon} from '#/components/Button'
+import {getModerationCauseKey} from 'lib/moderation'
+import {atoms as a, useTheme} from '#/alf'
+import {Button} from '#/components/Button'
 import {
   ModerationDetailsDialog,
   useModerationDetailsDialogControl,
 } from '#/components/moderation/ModerationDetailsDialog'
+import {Text} from '#/components/Typography'
 
 export function ProfileHeaderAlerts({
   moderation,
@@ -39,6 +39,7 @@ export function ProfileHeaderAlerts({
 }
 
 function ProfileLabel({cause}: {cause: ModerationCause}) {
+  const t = useTheme()
   const control = useModerationDetailsDialogControl()
   const desc = useModerationCauseDescription(cause)
 
@@ -46,18 +47,35 @@ function ProfileLabel({cause}: {cause: ModerationCause}) {
     <>
       <Button
         label={desc.name}
-        variant="solid"
-        color="secondary"
-        size="small"
-        shape="default"
         onPress={() => {
           control.open()
-        }}
-        style={[a.px_sm, a.py_xs, a.gap_xs]}>
-        <ButtonIcon icon={desc.icon} position="left" />
-        <ButtonText style={[a.text_left, a.leading_snug]}>
-          {desc.name}
-        </ButtonText>
+        }}>
+        {({hovered, pressed}) => (
+          <View
+            style={[
+              a.flex_row,
+              a.align_center,
+              {paddingLeft: 6, paddingRight: 8, paddingVertical: 4},
+              a.gap_xs,
+              a.rounded_md,
+              hovered || pressed
+                ? t.atoms.bg_contrast_50
+                : t.atoms.bg_contrast_25,
+            ]}>
+            <desc.icon size="sm" fill={t.atoms.text_contrast_medium.color} />
+            <Text
+              style={[
+                a.text_left,
+                a.leading_snug,
+                a.text_sm,
+                t.atoms.text_contrast_medium,
+                a.font_semibold,
+              ]}>
+              {desc.name}
+              {desc.source ? ` – ${desc.source}` : ''}
+            </Text>
+          </View>
+        )}
       </Button>
 
       <ModerationDetailsDialog control={control} modcause={cause} />