diff --git a/src/components/forms/ToggleButton.tsx b/src/components/forms/ToggleButton.tsx index 3e599b1cfe..458e3bd7f6 100644 --- a/src/components/forms/ToggleButton.tsx +++ b/src/components/forms/ToggleButton.tsx @@ -103,7 +103,7 @@ function ButtonInner({children}: React.PropsWithChildren<{}>) { native({ paddingBottom: 10, }), - a.px_sm, + a.px_md, t.atoms.bg, t.atoms.border_contrast_low, baseStyles, diff --git a/src/components/moderation/ModerationLabelPref.tsx b/src/components/moderation/ModerationLabelPref.tsx index a1ecc1a753..a43ee0aa2b 100644 --- a/src/components/moderation/ModerationLabelPref.tsx +++ b/src/components/moderation/ModerationLabelPref.tsx @@ -5,10 +5,7 @@ import {useLingui} from '@lingui/react' import {msg, Trans} from '@lingui/macro' import {useGlobalLabelStrings} from '#/lib/moderation/useGlobalLabelStrings' -import { - useLabelBehaviorDescription, - useLabelLongBehaviorDescription, -} from '#/lib/moderation/useLabelBehaviorDescription' +import {useLabelBehaviorDescription} from '#/lib/moderation/useLabelBehaviorDescription' import { usePreferencesQuery, usePreferencesSetContentLabelMutation, @@ -19,11 +16,8 @@ import {useTheme, atoms as a} from '#/alf' import {Text} from '#/components/Typography' import {InlineLink} from '#/components/Link' import * as Dialog from '#/components/Dialog' -import {Button} from '#/components/Button' import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '../icons/CircleInfo' -import {SettingsGear2_Stroke2_Corner0_Rounded as Gear} from '../icons/Gear' -import * as Toggle from '#/components/forms/Toggle' -import {Divider} from '#/components/Divider' +import * as ToggleButton from '#/components/forms/ToggleButton' export function ModerationLabelPref({ labelValueDefinition, @@ -52,18 +46,34 @@ export function ModerationLabelPref({ savedPref ?? labelValueDefinition.defaultSetting ?? 'warn' - const [selected, setSelected] = React.useState([pref]) - const settingDesc = useLabelBehaviorDescription(labelValueDefinition, pref) - const hideLabel = useLabelLongBehaviorDescription( - labelValueDefinition, - 'hide', + // does the 'warn' setting make sense for this label? + const canWarn = !( + labelValueDefinition.blurs === 'none' && + labelValueDefinition.severity === 'none' ) - const warnLabel = useLabelLongBehaviorDescription( + // is this label adult only? + const adultOnly = labelValueDefinition.flags.includes('adult') + // is this label disabled because it's adult only? + const adultDisabled = + adultOnly && !preferences?.moderationPrefs.adultContentEnabled + // are there any reasons we cant configure this label here? + const cantConfigure = isGlobalLabel || adultDisabled + + // adjust the pref based on whether warn is available + let prefAdjusted = pref + if (!canWarn && pref === 'warn') { + prefAdjusted = 'ignore' + } + + // grab localized descriptions of the label and its settings + const currentPrefLabel = useLabelBehaviorDescription( labelValueDefinition, - 'warn', + prefAdjusted, ) - const ignoreLabel = useLabelLongBehaviorDescription( + const hideLabel = useLabelBehaviorDescription(labelValueDefinition, 'hide') + const warnLabel = useLabelBehaviorDescription(labelValueDefinition, 'warn') + const ignoreLabel = useLabelBehaviorDescription( labelValueDefinition, 'ignore', ) @@ -74,178 +84,73 @@ export function ModerationLabelPref({ labelValueDefinition, ) - const canWarn = !( - labelValueDefinition.blurs === 'none' && - labelValueDefinition.severity === 'none' - ) - const adultOnly = labelValueDefinition.flags.includes('adult') - const adultDisabled = - adultOnly && !preferences?.moderationPrefs.adultContentEnabled - const cantConfigure = isGlobalLabel || adultDisabled - - const onSettingChange = React.useCallback( - (newPrefs: LabelPreference[]) => { - setSelected(newPrefs) - mutate({label: identifier, visibility: newPrefs[0], labelerDid}) - }, - [mutate, labelerDid, identifier], - ) - - const settings = [ - { - pref: 'hide', - label: hideLabel, - }, - canWarn && { - pref: 'warn', - label: warnLabel, - }, - { - pref: 'ignore', - label: ignoreLabel, - }, - ].filter(Boolean) as { - pref: LabelPreference - label: string - }[] - return ( - <> - - - - - - - - {labelStrings.name} + + {disabled ? ( + <> + ) : cantConfigure ? ( + + + {currentPrefLabel} - - {labelStrings.description} - - - {cantConfigure && ( - - - - - {adultDisabled ? ( - - Adult content must be enabled to configure this label. - - ) : isGlobalLabel ? ( - - {labelStrings.name} is configured in your{' '} - control.close()} - style={a.text_md}> - global moderation settings - - . - - ) : null} - - - )} - - {!cantConfigure && ( - - type="radio" - values={selected} - onChange={onSettingChange} - label={_( - msg`Configure filtering settings for ${labelStrings.name}`, - )}> - - {settings.map((s, i) => ( - <> - {i !== 0 && } - - - - - {s.label} - - - - ))} - - - )} - - - - - + + ) : ( + + + mutate({ + label: identifier, + visibility: newPref[0] as LabelPreference, + labelerDid, + }) + }> + + {ignoreLabel} + + {canWarn && ( + + {warnLabel} + + )} + + {hideLabel} + + + + )} + ) } diff --git a/src/lib/moderation/useLabelBehaviorDescription.ts b/src/lib/moderation/useLabelBehaviorDescription.ts index 6a67ecf831..0250c1bc89 100644 --- a/src/lib/moderation/useLabelBehaviorDescription.ts +++ b/src/lib/moderation/useLabelBehaviorDescription.ts @@ -8,23 +8,18 @@ export function useLabelBehaviorDescription( ) { const {_} = useLingui() if (pref === 'ignore') { - return _(msg`Disabled`) + return _(msg`Off`) } - if (labelValueDef.blurs === 'content') { + if (labelValueDef.blurs === 'content' || labelValueDef.blurs === 'media') { if (pref === 'hide') { return _(msg`Hide`) } return _(msg`Warn`) - } else if (labelValueDef.blurs === 'media') { - if (pref === 'hide') { - return _(msg`Hide`) - } - return _(msg`Blur images`) } else if (labelValueDef.severity === 'alert') { if (pref === 'hide') { return _(msg`Hide`) } - return _(msg`Show warning`) + return _(msg`Warn`) } else if (labelValueDef.severity === 'inform') { if (pref === 'hide') { return _(msg`Hide`) diff --git a/src/screens/Onboarding/StepModeration/ModerationOption.tsx b/src/screens/Onboarding/StepModeration/ModerationOption.tsx index 182244e7bf..740d7ce556 100644 --- a/src/screens/Onboarding/StepModeration/ModerationOption.tsx +++ b/src/screens/Onboarding/StepModeration/ModerationOption.tsx @@ -67,7 +67,7 @@ export function ModerationOption({ ]} layout={Layout.easing(Easing.ease).duration(200)} entering={isMounted.current ? FadeIn : undefined}> - + {labelStrings.name} {labelStrings.description} diff --git a/src/screens/Profile/Sections/Labels.tsx b/src/screens/Profile/Sections/Labels.tsx index e81d6c8843..357a0eeb8f 100644 --- a/src/screens/Profile/Sections/Labels.tsx +++ b/src/screens/Profile/Sections/Labels.tsx @@ -20,6 +20,7 @@ import {isNative} from '#/platform/detection' import {useTheme, atoms as a} from '#/alf' import {Text} from '#/components/Typography' import {Loader} from '#/components/Loader' +import {Divider} from '#/components/Divider' import {CenteredView, ScrollView} from '#/view/com/util/Views' import {ErrorState} from '../ErrorState' import {ModerationLabelPref} from '#/components/moderation/ModerationLabelPref' @@ -191,15 +192,24 @@ export function ProfileLabelsSectionInner({ ) : null} {labelDefs.length > 0 && ( - - {labelDefs.map(labelDef => { + + {labelDefs.map((labelDef, i) => { return ( - + + {i !== 0 && } + + ) })}