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();