From ee876b5c8457cd72ee7b5fff6077b0e60fe039b5 Mon Sep 17 00:00:00 2001
From: SundasNoreen <sundas.noreen@arbisoft.com>
Date: Tue, 5 Sep 2023 23:05:55 +0500
Subject: [PATCH] refactor: added paragon class

---
 src/index.scss                                | 10 ++++++----
 .../NotificationPreferences.jsx               | 20 ++++++++++---------
 src/notification-preferences/messages.js      | 10 ++++++++++
 3 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/index.scss b/src/index.scss
index 92dcdb7..e6ff6a2 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -78,10 +78,12 @@ $fa-font-path: "~font-awesome/fonts";
   line-height: 28px;
 }
 
-.notification-launch-icon {
-  vertical-align: middle;
-  height: 16px;
-  width: 16px;
+.text-decoration-underline {
+  text-decoration: underline;
+}
+
+.pgn__hyperlink__external-icon{
+  margin-left: 4px;
 }
 
 .notification-preferences {
diff --git a/src/notification-preferences/NotificationPreferences.jsx b/src/notification-preferences/NotificationPreferences.jsx
index 637c271..b5d8e3d 100644
--- a/src/notification-preferences/NotificationPreferences.jsx
+++ b/src/notification-preferences/NotificationPreferences.jsx
@@ -2,8 +2,10 @@ import React, { useEffect, useMemo } from 'react';
 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, Launch } from '@edx/paragon/icons';
+import {
+  Container, Icon, Spinner, Hyperlink,
+} from '@edx/paragon';
+import { ArrowBack } from '@edx/paragon/icons';
 import {
   selectCourseListStatus,
   selectCourse,
@@ -60,15 +62,15 @@ const NotificationPreferences = () => {
         {intl.formatMessage(messages.notificationHeading)}
       </h2>
       <div className="mb-6 text-gray-700">
-        Notifications for certain activities are enabled by default, {' '}
-        <a
-          className="w-100"
+        {intl.formatMessage(messages.notificationPreferenceGuideBody)}
+        <Hyperlink
+          destination="https://edx.readthedocs.io/projects/open-edx-learner-guide/en/latest/sfd_notifications/managing_notifications.html"
           target="_blank"
-          href="https://edx.readthedocs.io/projects/open-edx-learner-guide/en/latest/sfd_notifications/managing_notifications.html"
-          rel="noreferrer"
+          rel="noopener noreferrer"
+          className="text-decoration-underline"
         >
-          as detailed here <Icon className="d-inline-block notification-launch-icon" src={Launch} />
-        </a>
+          {intl.formatMessage(messages.notificationPreferenceGuideLink)}
+        </Hyperlink>
       </div>
       <div className="h-100">
         <div className="d-flex mb-5">
diff --git a/src/notification-preferences/messages.js b/src/notification-preferences/messages.js
index e783844..62b9f67 100644
--- a/src/notification-preferences/messages.js
+++ b/src/notification-preferences/messages.js
@@ -53,4 +53,14 @@ export const messages = defineMessages({
     defaultMessage: 'Load more courses',
     description: 'Load more button to load more courses',
   },
+  notificationPreferenceGuideLink: {
+    id: 'notification.preference.guide.link',
+    defaultMessage: 'as detailed here',
+    description: 'Link of the notification preference for learner guide',
+  },
+  notificationPreferenceGuideBody: {
+    id: 'notification.preference.guide.body',
+    defaultMessage: 'Notifications for certain activities are enabled by default, ',
+    description: 'Body of the notification preferences for learner guide',
+  },
 });