From e8f754c10b66fffc99fd505ab031c2edea4156d3 Mon Sep 17 00:00:00 2001
From: Awais Ansari <awais.ansari63@gmail.com>
Date: Thu, 3 Aug 2023 18:01:13 +0500
Subject: [PATCH] style: update the notification preferences page style
 according to figma

---
 .../NotificationPreferenceApp.jsx                 | 10 +++++-----
 .../NotificationPreferenceRow.jsx                 | 15 ++++++++-------
 .../NotificationPreferences.jsx                   |  6 +++---
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/notification-preferences/NotificationPreferenceApp.jsx b/src/notification-preferences/NotificationPreferenceApp.jsx
index 0b5d1e6..389ccf2 100644
--- a/src/notification-preferences/NotificationPreferenceApp.jsx
+++ b/src/notification-preferences/NotificationPreferenceApp.jsx
@@ -40,11 +40,11 @@ const NotificationPreferenceApp = ({ appId }) => {
   return (
     <Collapsible.Advanced open={appToggle} data-testid="notification-app">
       <Collapsible.Trigger>
-        <div className="d-flex">
-          <span className="ml-0 mr-auto">
+        <div className="d-flex align-items-center">
+          <span className="mr-auto">
             {intl.formatMessage(messages.notificationAppTitle, { key: appId })}
           </span>
-          <span id={`${appId}-app-toggle`} className="ml-auto mr-0">
+          <span className="d-flex" id={`${appId}-app-toggle`}>
             <ToggleSwitch
               name={appId}
               value={appToggle}
@@ -52,7 +52,7 @@ const NotificationPreferenceApp = ({ appId }) => {
             />
           </span>
         </div>
-        <hr />
+        <hr className="border-light-400 my-3" />
       </Collapsible.Trigger>
       <Collapsible.Body>
         <div className="d-flex flex-row header-label">
@@ -61,7 +61,7 @@ const NotificationPreferenceApp = ({ appId }) => {
             <span className="ml-auto">{intl.formatMessage(messages.webLabel)}</span>
           </span>
         </div>
-        <div className="mt-3 pb-5">
+        <div className="my-3">
           { preferences }
         </div>
       </Collapsible.Body>
diff --git a/src/notification-preferences/NotificationPreferenceRow.jsx b/src/notification-preferences/NotificationPreferenceRow.jsx
index c76192c..e5f9055 100644
--- a/src/notification-preferences/NotificationPreferenceRow.jsx
+++ b/src/notification-preferences/NotificationPreferenceRow.jsx
@@ -38,8 +38,8 @@ const NotificationPreferenceRow = ({ appId, preferenceName }) => {
 
   const tooltipId = `${preferenceName}-tooltip`;
   return (
-    <div className="d-flex flex-row mb-3" data-testid="notification-preference">
-      <span className="d-flex align-items-center col-8 px-0">
+    <div className="d-flex mb-3" data-testid="notification-preference">
+      <div className="d-flex align-items-center mr-auto">
         {intl.formatMessage(messages.notificationTitle, { text: preferenceName })}
         {preference.info !== '' && (
           <OverlayTrigger
@@ -57,12 +57,13 @@ const NotificationPreferenceRow = ({ appId, preferenceName }) => {
             </span>
           </OverlayTrigger>
         )}
-      </span>
-      <span className="d-flex col-4 px-0">
+      </div>
+      <div className="d-flex align-items-center">
         {['web'].map((channel) => (
-          <span
+          <div
             id={`${preferenceName}-${channel}`}
             className={classNames(
+              'd-flex',
               { 'ml-auto': channel === 'web' },
               { 'mx-auto': channel === 'email' },
               { 'ml-auto mr-0': channel === 'push' },
@@ -74,9 +75,9 @@ const NotificationPreferenceRow = ({ appId, preferenceName }) => {
               onChange={onToggle}
               disabled={nonEditable.includes(channel)}
             />
-          </span>
+          </div>
         ))}
-      </span>
+      </div>
     </div>
   );
 };
diff --git a/src/notification-preferences/NotificationPreferences.jsx b/src/notification-preferences/NotificationPreferences.jsx
index 28b9f9d..c558fdc 100644
--- a/src/notification-preferences/NotificationPreferences.jsx
+++ b/src/notification-preferences/NotificationPreferences.jsx
@@ -61,11 +61,11 @@ const NotificationPreferences = () => {
         {intl.formatMessage(messages.notificationHeading)}
       </h2>
       <div className="h-100">
-        <div className="d-flex mb-4">
+        <div className="d-flex mb-5">
           <Link to="/notifications">
-            <Icon className="d-inline-block align-bottom" src={ArrowBack} />
+            <Icon className="text-primary-500" src={ArrowBack} />
           </Link>
-          <span className="notification-course-title ml-auto mr-auto">
+          <span className="notification-course-title ml-auto mr-auto text-primary-500">
             {course?.name}
           </span>
         </div>