Improve the post-hiders and the header alerts (#2074)

* Improve the post-hider and the header alerts

* Adjust the contenthider (icon, font size)

src/view/com/post-thread/PostThreadItem.tsx

@@ -426,7 +426,11 @@ let PostThreadItemLoaded = ({
           testID={`postThreadItem-by-${post.author.handle}`}
           href={postHref}
           style={[pal.view]}
-          moderation={moderation.content}>
+          moderation={moderation.content}
+          iconSize={isThreadedChild ? 26 : 38}
+          iconStyles={
+            isThreadedChild ? {marginRight: 4} : {marginLeft: 2, marginRight: 2}
+          }>
           <PostSandboxWarning />
 
           <View

src/view/com/util/moderation/ContentHider.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import {Pressable, StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {ModerationUI} from '@atproto/api'
 import {Text} from '../text/Text'
 import {ShieldExclamation} from 'lib/icons'
@@ -26,7 +26,6 @@ export function ContentHider({
 }>) {
   const pal = usePalette('default')
   const {_} = useLingui()
-  const {isMobile} = useWebMediaQueries()
   const [override, setOverride] = React.useState(false)
   const {openModal} = useModalControls()
 
@@ -38,6 +37,7 @@ export function ContentHider({
     )
   }
 
+  const isMute = moderation.cause.type === 'muted'
   const desc = describeModerationCause(moderation.cause, 'content')
   return (
     <View testID={testID} style={[styles.outer, style]}>
@@ -58,7 +58,6 @@ export function ContentHider({
         accessibilityLabel=""
         style={[
           styles.cover,
-          {paddingRight: isMobile ? 22 : 18},
           moderation.noOverride
             ? {borderWidth: 1, borderColor: pal.colors.borderDark}
             : pal.viewLight,
@@ -74,14 +73,22 @@ export function ContentHider({
           accessibilityRole="button"
           accessibilityLabel={_(msg`Learn more about this warning`)}
           accessibilityHint="">
-          <ShieldExclamation size={18} style={pal.text} />
+          {isMute ? (
+            <FontAwesomeIcon
+              icon={['far', 'eye-slash']}
+              size={18}
+              color={pal.colors.textLight}
+            />
+          ) : (
+            <ShieldExclamation size={18} style={pal.textLight} />
+          )}
         </Pressable>
-        <Text type="lg" style={pal.text}>
+        <Text type="md" style={pal.text}>
           {desc.name}
         </Text>
         {!moderation.noOverride && (
           <View style={styles.showBtn}>
-            <Text type="xl" style={pal.link}>
+            <Text type="lg" style={pal.link}>
               {override ? 'Hide' : 'Show'}
             </Text>
           </View>
@@ -104,6 +111,7 @@ const styles = StyleSheet.create({
     marginTop: 4,
     paddingVertical: 14,
     paddingLeft: 14,
+    paddingRight: 18,
   },
   showBtn: {
     marginLeft: 'auto',

src/view/com/util/moderation/PostHider.tsx

@@ -1,8 +1,8 @@
 import React, {ComponentProps} from 'react'
-import {StyleSheet, Pressable, View} from 'react-native'
+import {StyleSheet, Pressable, View, ViewStyle, StyleProp} from 'react-native'
 import {ModerationUI} from '@atproto/api'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {Link} from '../Link'
 import {Text} from '../text/Text'
 import {addStyle} from 'lib/styles'
@@ -13,9 +13,8 @@ import {msg} from '@lingui/macro'
 import {useModalControls} from '#/state/modals'
 
 interface Props extends ComponentProps<typeof Link> {
-  // testID?: string
+  iconSize: number
-  // href?: string
+  iconStyles: StyleProp<ViewStyle>
-  // style: StyleProp<ViewStyle>
   moderation: ModerationUI
 }
 
@@ -25,11 +24,12 @@ export function PostHider({
   moderation,
   style,
   children,
+  iconSize,
+  iconStyles,
   ...props
 }: Props) {
   const pal = usePalette('default')
   const {_} = useLingui()
-  const {isMobile} = useWebMediaQueries()
   const [override, setOverride] = React.useState(false)
   const {openModal} = useModalControls()
 
@@ -47,9 +47,9 @@ export function PostHider({
     )
   }
 
+  const isMute = moderation.cause.type === 'muted'
   const desc = describeModerationCause(moderation.cause, 'content')
-  return (
+  return !override ? (
-    <>
     <Pressable
       onPress={() => {
         if (!moderation.noOverride) {
@@ -61,8 +61,8 @@ export function PostHider({
       accessibilityLabel=""
       style={[
         styles.description,
-          {paddingRight: isMobile ? 22 : 18},
+        override ? {paddingBottom: 0} : undefined,
-          pal.viewLight,
+        pal.view,
       ]}>
       <Pressable
         onPress={() => {
@@ -75,19 +75,39 @@ export function PostHider({
         accessibilityRole="button"
         accessibilityLabel={_(msg`Learn more about this warning`)}
         accessibilityHint="">
-          <ShieldExclamation size={18} style={pal.text} />
+        <View
+          style={[
+            pal.viewLight,
+            {
+              width: iconSize,
+              height: iconSize,
+              borderRadius: iconSize,
+              alignItems: 'center',
+              justifyContent: 'center',
+            },
+            iconStyles,
+          ]}>
+          {isMute ? (
+            <FontAwesomeIcon
+              icon={['far', 'eye-slash']}
+              size={14}
+              color={pal.colors.textLight}
+            />
+          ) : (
+            <ShieldExclamation size={14} style={pal.textLight} />
+          )}
+        </View>
       </Pressable>
-        <Text type="lg" style={[{flex: 1}, pal.text]} numberOfLines={1}>
+      <Text type="sm" style={[{flex: 1}, pal.textLight]} numberOfLines={1}>
         {desc.name}
       </Text>
       {!moderation.noOverride && (
-          <Text type="xl" style={[styles.showBtn, pal.link]}>
+        <Text type="sm" 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)}
@@ -95,9 +115,6 @@ export function PostHider({
       noFeedback>
       {children}
     </Link>
-        </View>
-      )}
-    </>
   )
 }
 
@@ -106,18 +123,15 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     gap: 4,
-    paddingVertical: 14,
+    paddingVertical: 10,
-    paddingLeft: 18,
+    paddingLeft: 6,
+    paddingRight: 18,
     marginTop: 1,
   },
   showBtn: {
     marginLeft: 'auto',
     alignSelf: 'center',
   },
-  childrenContainer: {
-    paddingHorizontal: 4,
-    paddingBottom: 6,
-  },
   child: {
     borderWidth: 0,
     borderTopWidth: 0,

src/view/com/util/moderation/ProfileHeaderAlerts.tsx

@@ -10,6 +10,7 @@ import {
 } from 'lib/moderation'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {useModalControls} from '#/state/modals'
 
 export function ProfileHeaderAlerts({
@@ -31,6 +32,7 @@ export function ProfileHeaderAlerts({
   return (
     <View style={styles.grid}>
       {causes.map(cause => {
+        const isMute = cause.type === 'muted'
         const desc = describeModerationCause(cause, 'account')
         return (
           <Pressable
@@ -47,11 +49,19 @@ export function ProfileHeaderAlerts({
             accessibilityLabel={_(msg`Learn more about this warning`)}
             accessibilityHint=""
             style={[styles.container, pal.viewLight, style]}>
-            <ShieldExclamation style={pal.text} size={24} />
+            {isMute ? (
-            <Text type="lg" style={[{flex: 1}, pal.text]}>
+              <FontAwesomeIcon
+                icon={['far', 'eye-slash']}
+                size={14}
+                color={pal.colors.textLight}
+              />
+            ) : (
+              <ShieldExclamation style={pal.text} size={18} />
+            )}
+            <Text type="sm" style={[{flex: 1}, pal.text]}>
               {desc.name}
             </Text>
-            <Text type="lg" style={[pal.link, styles.learnMoreBtn]}>
+            <Text type="sm" style={[pal.link, styles.learnMoreBtn]}>
               <Trans>Learn More</Trans>
             </Text>
           </Pressable>