1 files changed, 73 insertions, 58 deletions

diff --git a/src/view/com/util/moderation/PostHider.tsx b/src/view/com/util/moderation/PostHider.tsx
index f2b6dbddd..dc74d3e39 100644
--- a/src/view/com/util/moderation/PostHider.tsx
+++ b/src/view/com/util/moderation/PostHider.tsx
@@ -1,17 +1,20 @@
 import React, {ComponentProps} from 'react'
-import {StyleSheet, TouchableOpacity, View} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {StyleSheet, Pressable, View} from 'react-native'
+import {ModerationUI} from '@atproto/api'
 import {usePalette} from 'lib/hooks/usePalette'
 import {Link} from '../Link'
 import {Text} from '../text/Text'
 import {addStyle} from 'lib/styles'
-import {ModerationBehaviorCode, ModerationBehavior} from 'lib/labeling/types'
+import {describeModerationCause} from 'lib/moderation'
+import {InfoCircleIcon} from 'lib/icons'
+import {useStores} from 'state/index'
+import {isDesktopWeb} from 'platform/detection'
 
 interface Props extends ComponentProps<typeof Link> {
   // testID?: string
   // href?: string
   // style: StyleProp<ViewStyle>
-  moderation: ModerationBehavior
+  moderation: ModerationUI
 }
 
 export function PostHider({
@@ -22,60 +25,71 @@ export function PostHider({
   children,
   ...props
 }: Props) {
+  const store = useStores()
   const pal = usePalette('default')
   const [override, setOverride] = React.useState(false)
-  const bg = override ? pal.viewLight : pal.view
 
-  if (moderation.behavior === ModerationBehaviorCode.Hide) {
-    return null
-  }
-
-  if (moderation.behavior === ModerationBehaviorCode.Warn) {
+  if (!moderation.blur) {
     return (
-      <>
-        <View style={[styles.description, bg, pal.border]}>
-          <FontAwesomeIcon
-            icon={['far', 'eye-slash']}
-            style={[styles.icon, pal.text]}
-          />
-          <Text type="md" style={pal.textLight}>
-            {moderation.reason || 'Content warning'}
-          </Text>
-          <TouchableOpacity
-            style={styles.showBtn}
-            onPress={() => setOverride(v => !v)}
-            accessibilityRole="button">
-            <Text type="md" style={pal.link}>
-              {override ? 'Hide' : 'Show'} post
-            </Text>
-          </TouchableOpacity>
-        </View>
-        {override && (
-          <View style={[styles.childrenContainer, pal.border, bg]}>
-            <Link
-              testID={testID}
-              style={addStyle(style, styles.child)}
-              href={href}
-              noFeedback>
-              {children}
-            </Link>
-          </View>
-        )}
-      </>
+      <Link
+        testID={testID}
+        style={style}
+        href={href}
+        noFeedback
+        accessible={false}
+        {...props}>
+        {children}
+      </Link>
     )
   }
 
-  // NOTE: any further label enforcement should occur in ContentContainer
+  const desc = describeModerationCause(moderation.cause, 'content')
   return (
-    <Link
-      testID={testID}
-      style={style}
-      href={href}
-      noFeedback
-      accessible={false}
-      {...props}>
-      {children}
-    </Link>
+    <>
+      <Pressable
+        onPress={() => {
+          if (!moderation.noOverride) {
+            setOverride(v => !v)
+          }
+        }}
+        accessibilityRole="button"
+        accessibilityHint={override ? 'Hide the content' : 'Show the content'}
+        accessibilityLabel=""
+        style={[styles.description, pal.viewLight]}>
+        <Pressable
+          onPress={() => {
+            store.shell.openModal({
+              name: 'moderation-details',
+              context: 'content',
+              moderation,
+            })
+          }}
+          accessibilityRole="button"
+          accessibilityLabel="Learn more about this warning"
+          accessibilityHint="">
+          <InfoCircleIcon size={18} style={pal.text} />
+        </Pressable>
+        <Text type="lg" style={pal.text}>
+          {desc.name}
+        </Text>
+        {!moderation.noOverride && (
+          <Text type="xl" style={[styles.showBtn, pal.link]}>
+            {override ? 'Hide' : 'Show'}
+          </Text>
+        )}
+      </Pressable>
+      {override && (
+        <View style={[styles.childrenContainer, pal.border, pal.viewLight]}>
+          <Link
+            testID={testID}
+            style={addStyle(style, styles.child)}
+            href={href}
+            noFeedback>
+            {children}
+          </Link>
+        </View>
+      )}
+    </>
   )
 }
 
@@ -83,22 +97,23 @@ const styles = StyleSheet.create({
   description: {
     flexDirection: 'row',
     alignItems: 'center',
+    gap: 4,
     paddingVertical: 14,
-    paddingHorizontal: 18,
-    borderTopWidth: 1,
-  },
-  icon: {
-    marginRight: 10,
+    paddingLeft: 18,
+    paddingRight: isDesktopWeb ? 18 : 22,
+    marginTop: 1,
   },
   showBtn: {
     marginLeft: 'auto',
+    alignSelf: 'center',
   },
   childrenContainer: {
-    paddingHorizontal: 6,
+    paddingHorizontal: 4,
     paddingBottom: 6,
   },
   child: {
-    borderWidth: 1,
-    borderRadius: 12,
+    borderWidth: 0,
+    borderTopWidth: 0,
+    borderRadius: 8,
   },
 })