feat: Added link to documentation on preferences UI

src/index.scss

@@ -73,6 +73,17 @@ $fa-font-path: "~font-awesome/fonts";
   padding-left: 0.625rem;
 }
 
+.notification-sub-heading {
+  font-size: 14px;
+  line-height: 28px;
+}
+
+.notification-launch-icon {
+  vertical-align: middle;
+  height: 16px;
+  width: 16px;
+}
+
 .notification-preferences {
   input[type="checkbox"] {
     margin-right: 0;

src/notification-preferences/NotificationPreferences.jsx

@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Link, useParams } from 'react-router-dom';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Container, Icon, Spinner } from '@edx/paragon';
-import { ArrowBack } from '@edx/paragon/icons';
+import { ArrowBack, Launch } from '@edx/paragon/icons';
 import {
   selectCourseListStatus,
   selectCourse,
@@ -56,9 +56,20 @@ const NotificationPreferences = () => {
 
   return (
     <Container size="sm" className="notification-preferences">
-      <h2 className="notification-heading mt-6 mb-5.5">
+      <h2 className="notification-heading mt-6 mb-4.5">
         {intl.formatMessage(messages.notificationHeading)}
       </h2>
+      <div className="mb-6 text-gray-700">
+        Notifications for certain activities are enabled by default, {' '}
+        <a
+          className="w-100"
+          target="_blank"
+          href="https://edx.readthedocs.io/projects/open-edx-learner-guide/en/latest/sfd_notifications/managing_notifications.html"
+          rel="noreferrer"
+        >
+          as detailed here <Icon className="d-inline-block notification-launch-icon" src={Launch} />
+        </a>
+      </div>
       <div className="h-100">
         <div className="d-flex mb-5">
           <Link to="/notifications">