diff --git a/web/components/enum-settings-option-info.react.js b/web/components/enum-settings-option-info.react.js --- a/web/components/enum-settings-option-info.react.js +++ b/web/components/enum-settings-option-info.react.js @@ -9,26 +9,35 @@ type Props = { +optionSelected: boolean, +valid: boolean, + +styleStatementBasedOnValidity: boolean, +children: React.Node, }; function EnumSettingsOptionInfo(props: Props): React.Node { - const { valid, children, optionSelected } = props; + const { + optionSelected, + valid, + styleStatementBasedOnValidity, + children, + } = props; const optionInfoClasses = React.useMemo( () => classnames({ [css.optionInfo]: true, - [css.optionInfoInvalid]: !valid, - [css.optionInfoInvalidSelected]: !valid && optionSelected, + [css.optionInfoInvalid]: styleStatementBasedOnValidity && !valid, + [css.optionInfoInvalidSelected]: + styleStatementBasedOnValidity && !valid && optionSelected, }), - [valid, optionSelected], + [styleStatementBasedOnValidity, valid, optionSelected], ); - const icon = React.useMemo( - () => , - [valid], - ); + const icon = React.useMemo(() => { + if (!styleStatementBasedOnValidity) { + return null; + } + return ; + }, [styleStatementBasedOnValidity, valid]); return (
{icon} diff --git a/web/components/enum-settings-option.react.js b/web/components/enum-settings-option.react.js --- a/web/components/enum-settings-option.react.js +++ b/web/components/enum-settings-option.react.js @@ -15,6 +15,7 @@ +statements: $ReadOnlyArray<{ +statement: string, +isStatementValid: boolean, + +styleStatementBasedOnValidity: boolean, }>, }; @@ -23,15 +24,18 @@ const descriptionItems = React.useMemo( () => - statements.map(({ statement, isStatementValid }) => ( - - {statement} - - )), + statements.map( + ({ statement, isStatementValid, styleStatementBasedOnValidity }) => ( + + {statement} + + ), + ), [selected, statements], ); diff --git a/web/modals/threads/notifications/notifications-modal.react.js b/web/modals/threads/notifications/notifications-modal.react.js --- a/web/modals/threads/notifications/notifications-modal.react.js +++ b/web/modals/threads/notifications/notifications-modal.react.js @@ -32,21 +32,57 @@ const IN_BACKGROUND_TAB = 'Lives in Background tab'; const focusedStatements = [ - { statement: BANNER_NOTIFS, isStatementValid: true }, - { statement: BADGE_COUNT, isStatementValid: true }, - { statement: IN_FOCUSED_TAB, isStatementValid: true }, + { + statement: BANNER_NOTIFS, + isStatementValid: true, + styleStatementBasedOnValidity: true, + }, + { + statement: BADGE_COUNT, + isStatementValid: true, + styleStatementBasedOnValidity: true, + }, + { + statement: IN_FOCUSED_TAB, + isStatementValid: true, + styleStatementBasedOnValidity: true, + }, ]; const badgeOnlyStatements = [ - { statement: BANNER_NOTIFS, isStatementValid: false }, - { statement: BADGE_COUNT, isStatementValid: true }, - { statement: IN_FOCUSED_TAB, isStatementValid: true }, + { + statement: BANNER_NOTIFS, + isStatementValid: false, + styleStatementBasedOnValidity: true, + }, + { + statement: BADGE_COUNT, + isStatementValid: true, + styleStatementBasedOnValidity: true, + }, + { + statement: IN_FOCUSED_TAB, + isStatementValid: true, + styleStatementBasedOnValidity: true, + }, ]; const backgroundStatements = [ - { statement: BANNER_NOTIFS, isStatementValid: false }, - { statement: BADGE_COUNT, isStatementValid: false }, - { statement: IN_BACKGROUND_TAB, isStatementValid: true }, + { + statement: BANNER_NOTIFS, + isStatementValid: false, + styleStatementBasedOnValidity: true, + }, + { + statement: BADGE_COUNT, + isStatementValid: false, + styleStatementBasedOnValidity: true, + }, + { + statement: IN_BACKGROUND_TAB, + isStatementValid: true, + styleStatementBasedOnValidity: true, + }, ]; type Props = { diff --git a/web/modals/threads/settings/thread-settings-privacy-tab.react.js b/web/modals/threads/settings/thread-settings-privacy-tab.react.js --- a/web/modals/threads/settings/thread-settings-privacy-tab.react.js +++ b/web/modals/threads/settings/thread-settings-privacy-tab.react.js @@ -30,6 +30,7 @@ { statement: threadTypeDescriptions[COMMUNITY_OPEN_SUBTHREAD], isStatementValid: true, + styleStatementBasedOnValidity: false, }, ]; @@ -37,6 +38,7 @@ { statement: threadTypeDescriptions[COMMUNITY_SECRET_SUBTHREAD], isStatementValid: true, + styleStatementBasedOnValidity: false, }, ];