diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
index a4b7a4a9c3..900adfa81c 100644
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/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}
+ }>
) {
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 (
@@ -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="">
-
+ {isMute ? (
+
+ ) : (
+
+ )}
-
+
{desc.name}
{!moderation.noOverride && (
-
+
{override ? 'Hide' : 'Show'}
@@ -104,6 +111,7 @@ const styles = StyleSheet.create({
marginTop: 4,
paddingVertical: 14,
paddingLeft: 14,
+ paddingRight: 18,
},
showBtn: {
marginLeft: 'auto',
diff --git a/src/view/com/util/moderation/PostHider.tsx b/src/view/com/util/moderation/PostHider.tsx
index c2b857f54c..30364b7a3f 100644
--- a/src/view/com/util/moderation/PostHider.tsx
+++ b/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 {
- // testID?: string
- // href?: string
- // style: StyleProp
+ iconSize: number
+ iconStyles: StyleProp
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,57 +47,74 @@ export function PostHider({
)
}
+ const isMute = moderation.cause.type === 'muted'
const desc = describeModerationCause(moderation.cause, 'content')
- return (
- <>
+ return !override ? (
+ {
+ if (!moderation.noOverride) {
+ setOverride(v => !v)
+ }
+ }}
+ accessibilityRole="button"
+ accessibilityHint={override ? 'Hide the content' : 'Show the content'}
+ accessibilityLabel=""
+ style={[
+ styles.description,
+ override ? {paddingBottom: 0} : undefined,
+ pal.view,
+ ]}>
{
- if (!moderation.noOverride) {
- setOverride(v => !v)
- }
+ openModal({
+ name: 'moderation-details',
+ context: 'content',
+ moderation,
+ })
}}
accessibilityRole="button"
- accessibilityHint={override ? 'Hide the content' : 'Show the content'}
- accessibilityLabel=""
- style={[
- styles.description,
- {paddingRight: isMobile ? 22 : 18},
- pal.viewLight,
- ]}>
- {
- openModal({
- name: 'moderation-details',
- context: 'content',
- moderation,
- })
- }}
- accessibilityRole="button"
- accessibilityLabel={_(msg`Learn more about this warning`)}
- accessibilityHint="">
-
-
-
- {desc.name}
-
- {!moderation.noOverride && (
-
- {override ? 'Hide' : 'Show'}
-
- )}
-
- {override && (
-
-
- {children}
-
+ accessibilityLabel={_(msg`Learn more about this warning`)}
+ accessibilityHint="">
+
+ {isMute ? (
+
+ ) : (
+
+ )}
+
+
+ {desc.name}
+
+ {!moderation.noOverride && (
+
+ {override ? 'Hide' : 'Show'}
+
)}
- >
+
+ ) : (
+
+ {children}
+
)
}
@@ -106,18 +123,15 @@ const styles = StyleSheet.create({
flexDirection: 'row',
alignItems: 'center',
gap: 4,
- paddingVertical: 14,
- paddingLeft: 18,
+ paddingVertical: 10,
+ paddingLeft: 6,
+ paddingRight: 18,
marginTop: 1,
},
showBtn: {
marginLeft: 'auto',
alignSelf: 'center',
},
- childrenContainer: {
- paddingHorizontal: 4,
- paddingBottom: 6,
- },
child: {
borderWidth: 0,
borderTopWidth: 0,
diff --git a/src/view/com/util/moderation/ProfileHeaderAlerts.tsx b/src/view/com/util/moderation/ProfileHeaderAlerts.tsx
index d2675ca545..0f07b679ba 100644
--- a/src/view/com/util/moderation/ProfileHeaderAlerts.tsx
+++ b/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 (
{causes.map(cause => {
+ const isMute = cause.type === 'muted'
const desc = describeModerationCause(cause, 'account')
return (
-
-
+ {isMute ? (
+
+ ) : (
+
+ )}
+
{desc.name}
-
+
Learn More