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

* Improve the post-hider and the header alerts

* Adjust the contenthider (icon, font size)

1 files changed, 14 insertions, 6 deletions

diff --git a/src/view/com/util/moderation/ContentHider.tsx b/src/view/com/util/moderation/ContentHider.tsx
index a13aae2b5..c5c887685 100644
--- a/src/view/com/util/moderation/ContentHider.tsx
+++ b/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',