diff --git a/web/modals/threads/notifications/notifications-modal.css b/web/modals/threads/notifications/notifications-modal.css new file mode 100644 --- /dev/null +++ b/web/modals/threads/notifications/notifications-modal.css @@ -0,0 +1,14 @@ +div.optionInfo { + display: flex; + align-items: center; + column-gap: 4px; +} + +div.optionInfoInvalid { + text-decoration: line-through; + color: var(--notification-settings-option-invalid-color); +} + +div.optionContainerSelected div.optionInfoInvalid { + color: var(--notification-settings-option-invalid-selected-color); +} diff --git a/web/modals/threads/notifications/notifications-option-info.react.js b/web/modals/threads/notifications/notifications-option-info.react.js new file mode 100644 --- /dev/null +++ b/web/modals/threads/notifications/notifications-option-info.react.js @@ -0,0 +1,37 @@ +// @flow + +import classnames from 'classnames'; +import * as React from 'react'; + +import SWMansionIcon from '../../../SWMansionIcon.react'; +import css from './notifications-modal.css'; + +type Props = { + +valid: boolean, + +children: React.Node, +}; + +function NotificationsOptionInfo(props: Props): React.Node { + const { valid, children } = props; + + const optionInfoClasses = React.useMemo( + () => + classnames(css.optionInfo, { + [css.optionInfoInvalid]: !valid, + }), + [valid], + ); + + const icon = React.useMemo( + () => , + [valid], + ); + return ( +
+ {icon} + {children} +
+ ); +} + +export default NotificationsOptionInfo; diff --git a/web/theme.css b/web/theme.css --- a/web/theme.css +++ b/web/theme.css @@ -161,4 +161,6 @@ --add-members-remove-pending-color-hover: var(--error-light-50); --radio-border: var(--shades-black-70); --radio-color: var(--shades-white-60); + --notification-settings-option-invalid-color: var(--shades-black-80); + --notification-settings-option-invalid-selected-color: var(--shades-black-60); }