diff --git a/web/assets.js b/web/assets.js --- a/web/assets.js +++ b/web/assets.js @@ -6,3 +6,18 @@ export const backgroundIllustrationFileName = 'background-illustration.svg'; export const backgroundIllustrationHeight = '100px'; export const backgroundIllustrationWidth = '133px'; + +// Notifications Modal Illustration: "Focused" +export const focusedNotificationsIllustrationFileName = 'all-notifs.svg'; +export const focusedNotificationsIllustrationHeight = '86px'; +export const focusedNotificationsIllustrationWidth = '46px'; + +// Notifications Modal Illustration: "Focused (badge only)" +export const badgeOnlyNotificationsIllustrationFileName = 'badge-notifs.svg'; +export const badgeOnlyNotificationsIllustrationHeight = '86px'; +export const badgeOnlyNotificationsIllustrationWidth = '46px'; + +// Notifications Modal Illustration: "Background" +export const backgroundNotificationsIllustrationFileName = 'muted-notifs.svg'; +export const backgroundNotificationsIllustrationHeight = '86px'; +export const backgroundNotificationsIllustrationWidth = '46px'; 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 @@ -12,9 +12,20 @@ useDispatchActionPromise, } from 'lib/utils/action-utils'; +import { + assetCacheURLPrefix, + backgroundNotificationsIllustrationFileName, + backgroundNotificationsIllustrationHeight, + backgroundNotificationsIllustrationWidth, + badgeOnlyNotificationsIllustrationFileName, + badgeOnlyNotificationsIllustrationHeight, + badgeOnlyNotificationsIllustrationWidth, + focusedNotificationsIllustrationFileName, + focusedNotificationsIllustrationHeight, + focusedNotificationsIllustrationWidth, +} from '../../../assets.js'; import Button from '../../../components/button.react'; import { useSelector } from '../../../redux/redux-utils'; -import SWMansionIcon from '../../../SWMansionIcon.react'; import Modal from '../../modal.react'; import EnumSettingsOption from './enum-settings-option.react'; import css from './notifications-modal.css'; @@ -59,8 +70,6 @@ [], ); - const notificationIconStyle = React.useMemo(() => ({ width: 'auto' }), []); - const isFocusedSelected = notificationSettings === 'focused'; const focusedItem = React.useMemo(() => { const description = [ @@ -69,10 +78,10 @@ ['Lives in Focused tab', true], ]; const icon = ( - ); return ( @@ -84,7 +93,7 @@ onSelect={onFocusedSelected} /> ); - }, [isFocusedSelected, notificationIconStyle, onFocusedSelected]); + }, [isFocusedSelected, onFocusedSelected]); const isFocusedBadgeOnlySelected = notificationSettings === 'badge-only'; const focusedBadgeOnlyItem = React.useMemo(() => { @@ -94,10 +103,10 @@ ['Lives in Focused tab', true], ]; const icon = ( - ); return ( @@ -109,7 +118,7 @@ onSelect={onBadgeOnlySelected} /> ); - }, [isFocusedBadgeOnlySelected, notificationIconStyle, onBadgeOnlySelected]); + }, [isFocusedBadgeOnlySelected, onBadgeOnlySelected]); const isBackgroundSelected = notificationSettings === 'background'; const backgroundItem = React.useMemo(() => { @@ -119,10 +128,10 @@ ['Lives in Backgound tab', true], ]; const icon = ( - ); return ( @@ -134,7 +143,7 @@ onSelect={onBackgroundSelected} /> ); - }, [isBackgroundSelected, notificationIconStyle, onBackgroundSelected]); + }, [isBackgroundSelected, onBackgroundSelected]); const dispatchActionPromise = useDispatchActionPromise();