diff --git a/web/components/enum-settings-option-info.css b/web/components/enum-settings-option-info.css --- a/web/components/enum-settings-option-info.css +++ b/web/components/enum-settings-option-info.css @@ -9,6 +9,6 @@ color: var(--notification-settings-option-invalid-color); } -div.optionContainerSelected div.optionInfoInvalid { +div.optionInfoInvalidSelected { color: var(--notification-settings-option-invalid-selected-color); } 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 @@ -7,19 +7,22 @@ import css from './enum-settings-option-info.css'; type Props = { + +optionSelected: boolean, +valid: boolean, +children: React.Node, }; function EnumSettingsOptionInfo(props: Props): React.Node { - const { valid, children } = props; + const { valid, children, optionSelected } = props; const optionInfoClasses = React.useMemo( () => - classnames(css.optionInfo, { + classnames({ + [css.optionInfo]: true, [css.optionInfoInvalid]: !valid, + [css.optionInfoInvalidSelected]: !valid && optionSelected, }), - [valid], + [valid, optionSelected], ); const icon = React.useMemo( 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 @@ -24,11 +24,15 @@ const descriptionItems = React.useMemo( () => statements.map(({ statement, isStatementValid }) => ( - + {statement} )), - [statements], + [selected, statements], ); const optionContainerClasses = React.useMemo(