diff --git a/web/modals/threads/notifications/notifications-modal.css b/web/modals/threads/notifications/notifications-modal.css --- a/web/modals/threads/notifications/notifications-modal.css +++ b/web/modals/threads/notifications/notifications-modal.css @@ -2,7 +2,6 @@ display: flex; flex-direction: column; color: var(--fg); - margin: 24px 32px; row-gap: 20px; min-width: 343px; width: min-content; 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 @@ -218,8 +218,11 @@ ); }, [isSidebar, parentThreadInfo, threadInfo]); + const parentThreadIsInBackground = + isSidebar && !parentThreadInfo?.currentUser.subscription.home; + const modalContent = React.useMemo(() => { - if (isSidebar && !parentThreadInfo?.currentUser.subscription.home) { + if (parentThreadIsInBackground) { return ( <>

@@ -248,13 +251,6 @@ {focusedBadgeOnlyItem} {backgroundItem} - {noticeText} ); @@ -262,17 +258,40 @@ backgroundItem, focusedBadgeOnlyItem, focusedItem, - initialThreadSetting, - isSidebar, noticeText, - notificationSettings, - onClickSave, parentThreadInfo, + parentThreadIsInBackground, threadInfo, ]); + const saveButton = React.useMemo(() => { + if (parentThreadIsInBackground) { + return undefined; + } + + return ( + + ); + }, [ + initialThreadSetting, + notificationSettings, + onClickSave, + parentThreadIsInBackground, + ]); + return ( - +

{modalContent}
);