style: update the notification preferences page style according to figma

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>

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>
   );
 };

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>