diff --git a/webapp/channels/src/components/user_settings/notifications/__snapshots__/user_settings_notifications.test.tsx.snap b/webapp/channels/src/components/user_settings/notifications/__snapshots__/user_settings_notifications.test.tsx.snap index 896baf81d5..74ccbc1d59 100644 --- a/webapp/channels/src/components/user_settings/notifications/__snapshots__/user_settings_notifications.test.tsx.snap +++ b/webapp/channels/src/components/user_settings/notifications/__snapshots__/user_settings_notifications.test.tsx.snap @@ -40,12 +40,28 @@ Object {
@@ -248,12 +264,28 @@ Object { diff --git a/webapp/channels/src/components/user_settings/notifications/user_settings_notifications.scss b/webapp/channels/src/components/user_settings/notifications/user_settings_notifications.scss index aea66ee015..4567e8f125 100644 --- a/webapp/channels/src/components/user_settings/notifications/user_settings_notifications.scss +++ b/webapp/channels/src/components/user_settings/notifications/user_settings_notifications.scss @@ -3,3 +3,37 @@ margin-block-start: 10px; } } + +.notificationSettingsModalHeader { + display: flex; + + > span { + align-self: center; + margin-left: auto; + + a { + display: flex; + + &:hover, + &:active, + &:focus { + color: var(--button-bg); + text-decoration: none; + } + + > i { + font-size: 14.4px; + } + + > span { + font-size: 12px; + font-weight: 600; + line-height: 16px; + + &:hover { + text-decoration: underline; + } + } + } + } +} diff --git a/webapp/channels/src/components/user_settings/notifications/user_settings_notifications.tsx b/webapp/channels/src/components/user_settings/notifications/user_settings_notifications.tsx index 56c0acbf98..634fca65fa 100644 --- a/webapp/channels/src/components/user_settings/notifications/user_settings_notifications.tsx +++ b/webapp/channels/src/components/user_settings/notifications/user_settings_notifications.tsx @@ -15,6 +15,7 @@ import type {UserNotifyProps, UserProfile} from '@mattermost/types/users'; import type {ActionResult} from 'mattermost-redux/types/actions'; +import ExternalLink from 'components/external_link'; import LocalizedIcon from 'components/localized_icon'; import SettingItem from 'components/setting_item'; import SettingItemMax from 'components/setting_item_max'; @@ -1085,15 +1086,29 @@ class NotificationsTab extends React.PureComponent