From 16218252f14168e7febfe8cae4fe5391fb7735fd Mon Sep 17 00:00:00 2001
From: SundasNoreen <sundas.noreen@arbisoft.com>
Date: Tue, 5 Sep 2023 13:39:46 +0500
Subject: [PATCH] feat: Added link to documentation on preferences UI

---
 src/index.scss                                    | 11 +++++++++++
 .../NotificationPreferences.jsx                   | 15 +++++++++++++--
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/index.scss b/src/index.scss
index 09f319e..92dcdb7 100755
--- a/src/index.scss
+++ b/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;
diff --git a/src/notification-preferences/NotificationPreferences.jsx b/src/notification-preferences/NotificationPreferences.jsx
index 5894a03..637c271 100644
--- a/src/notification-preferences/NotificationPreferences.jsx
+++ b/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">