diff --git a/native/chat/settings/thread-settings-notifications.react.js b/native/chat/settings/thread-settings-notifications.react.js --- a/native/chat/settings/thread-settings-notifications.react.js +++ b/native/chat/settings/thread-settings-notifications.react.js @@ -1,7 +1,7 @@ // @flow import * as React from 'react'; -import { View } from 'react-native'; +import { View, Text } from 'react-native'; import { threadSettingsNotificationsCopy, @@ -10,9 +10,10 @@ import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js'; import EnumSettingsOption from '../../components/enum-settings-option.react.js'; +import SWMansionIcon from '../../components/swmansion-icon.react.js'; import HeaderRightTextButton from '../../navigation/header-right-text-button.react.js'; import type { NavigationRoute } from '../../navigation/route-names.js'; -import { useStyles } from '../../themes/colors.js'; +import { useStyles, useColors } from '../../themes/colors.js'; import AllNotifsIllustration from '../../vectors/all-notifs-illustration.react.js'; import BadgeNotifsIllustration from '../../vectors/badge-notifs-illustration.react.js'; import MutedNotifsIllustration from '../../vectors/muted-notifs-illustration.react.js'; @@ -22,6 +23,114 @@ +threadInfo: ThreadInfo, }; +type NotificationDescriptionProps = { + +selected: boolean, + +bannerNotifsEnabled: boolean, + +badgeCountEnabled: boolean, + +livesInFocusedTab: boolean, +}; + +function NotificationDescription( + props: NotificationDescriptionProps, +): React.Node { + const { + selected, + bannerNotifsEnabled, + badgeCountEnabled, + livesInFocusedTab, + } = props; + + const styles = useStyles(unboundStyles); + const colors = useColors(); + + const bannerNotifsDescriptionTextStyles = React.useMemo(() => { + const style = [styles.notificationOptionDescriptionText]; + + if (selected && !bannerNotifsEnabled) { + style.push(styles.notificationOptionDescriptionTextDisabledSelected); + } else if (!bannerNotifsEnabled) { + style.push(styles.notificationOptionDescriptionTextDisabled); + } + + return style; + }, [ + bannerNotifsEnabled, + selected, + styles.notificationOptionDescriptionText, + styles.notificationOptionDescriptionTextDisabled, + styles.notificationOptionDescriptionTextDisabledSelected, + ]); + + const badgeCountDescriptionTextStyles = React.useMemo(() => { + const style = [styles.notificationOptionDescriptionText]; + + if (selected && !badgeCountEnabled) { + style.push(styles.notificationOptionDescriptionTextDisabledSelected); + } else if (!badgeCountEnabled) { + style.push(styles.notificationOptionDescriptionTextDisabled); + } + + return style; + }, [ + badgeCountEnabled, + selected, + styles.notificationOptionDescriptionText, + styles.notificationOptionDescriptionTextDisabled, + styles.notificationOptionDescriptionTextDisabledSelected, + ]); + + let bannerNotifsIconColor = colors.panelForegroundSecondaryLabel; + if (selected && !bannerNotifsEnabled) { + bannerNotifsIconColor = colors.panelInputSecondaryForeground; + } else if (!bannerNotifsEnabled) { + bannerNotifsIconColor = colors.panelSecondaryForeground; + } + + let badgeCountIconColor = colors.panelForegroundSecondaryLabel; + if (selected && !badgeCountEnabled) { + badgeCountIconColor = colors.panelInputSecondaryForeground; + } else if (!badgeCountEnabled) { + badgeCountIconColor = colors.panelSecondaryForeground; + } + + return ( + <> + + + + {threadSettingsNotificationsCopy.BANNER_NOTIFS} + + + + + + {threadSettingsNotificationsCopy.BADGE_COUNT} + + + + + + {livesInFocusedTab + ? threadSettingsNotificationsCopy.IN_FOCUSED_TAB + : threadSettingsNotificationsCopy.IN_BACKGROUND_TAB} + + + + ); +} + type Props = { +navigation: ChatNavigationProp<'ThreadSettingsNotifications'>, +route: NavigationRoute<'ThreadSettingsNotifications'>, @@ -85,6 +194,36 @@ [styles.notificationOptionIconContainer], ); + const allNotificationsDescription = React.useMemo( + () => ( + + ), + [notificationSettings], + ); + + const badgeOnlyDescription = ( + + ); + + const mutedDescription = ( + + ); + return ( @@ -92,7 +231,7 @@ name={threadSettingsNotificationsCopy.FOCUSED} enumValue={notificationSettings === 'focused'} onEnumValuePress={onFocusedSelected} - description="" + description={allNotificationsDescription} icon={allNotificationsIllustration} /> @@ -101,7 +240,7 @@ name={threadSettingsNotificationsCopy.BADGE_ONLY} enumValue={notificationSettings === 'badge-only'} onEnumValuePress={onBadgeOnlySelected} - description="" + description={badgeOnlyDescription} icon={badgeOnlyIllustration} /> @@ -110,7 +249,7 @@ name={threadSettingsNotificationsCopy.BACKGROUND} enumValue={notificationSettings === 'background'} onEnumValuePress={onBackgroundSelected} - description="" + description={mutedDescription} icon={mutedIllustration} /> @@ -130,6 +269,24 @@ marginLeft: 8, marginRight: 16, }, + notificationOptionDescriptionListItem: { + flexDirection: 'row', + alignItems: 'center', + marginTop: 4, + }, + notificationOptionDescriptionText: { + color: 'panelForegroundSecondaryLabel', + marginLeft: 4, + fontSize: 14, + }, + notificationOptionDescriptionTextDisabled: { + textDecorationLine: 'line-through', + color: 'panelSecondaryForeground', + }, + notificationOptionDescriptionTextDisabledSelected: { + color: 'panelInputSecondaryForeground', + textDecorationLine: 'line-through', + }, }; export default ThreadSettingsNotifications; diff --git a/native/components/enum-settings-option.react.js b/native/components/enum-settings-option.react.js --- a/native/components/enum-settings-option.react.js +++ b/native/components/enum-settings-option.react.js @@ -11,7 +11,7 @@ type EnumSettingsOptionProps = { +icon?: string | React.Node, +name: string, - +description: string, + +description: string | React.Node, +enumValue: boolean, +onEnumValuePress: () => mixed, +type?: InputType, @@ -47,6 +47,14 @@ return icon; }, [icon, styles.enumIcon, colors.purpleButton]); + const descriptionElement = React.useMemo(() => { + if (typeof description === 'string') { + return {description}; + } + + return description; + }, [description, styles.enumInfoDescription]); + const enumInputStyles = React.useMemo(() => { const style = [styles.enumInput]; @@ -106,7 +114,7 @@ {enumIcon} {name} - {description} + {descriptionElement} {enumInputFill}