feat: remove other channels then web preferences

src/index.scss

@@ -69,20 +69,26 @@ $fa-font-path: "~font-awesome/fonts";
   font-size: 32px;
 }
 
-.notification-course-title {
-  line-height: 28px;
-  font-weight: 700;
-  font-size: 18px;
-}
-
 .px-2\.25 {
   padding-left: 0.625rem;
 }
 
-.notification-help-text {
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 28px;
-  height: 28px;
-  color: #707070;
+.notification-preferences {
+  input[type="checkbox"] {
+    margin-right: 0;
+  }
+
+  .header-label {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 28px;
+    height: 28px;
+    color: #707070;
+  }
+
+  .notification-course-title {
+    line-height: 28px;
+    font-weight: 700;
+    font-size: 18px;
+  }
 }

src/notification-preferences/NotificationPreferenceApp.jsx

@@ -55,12 +55,10 @@ const NotificationPreferenceApp = ({ appId }) => {
         <hr />
       </Collapsible.Trigger>
       <Collapsible.Body>
-        <div className="d-flex flex-row notification-help-text">
-          <span className="col-8 px-0">{intl.formatMessage(messages.notificationHelpType)}</span>
+        <div className="d-flex flex-row header-label">
+          <span className="col-8 px-0">{intl.formatMessage(messages.typeLabel)}</span>
           <span className="d-flex col-4 px-0">
-            <span className="ml-0 mr-auto">{intl.formatMessage(messages.notificationHelpWeb)}</span>
-            <span className="mx-auto">{intl.formatMessage(messages.notificationHelpEmail)}</span>
-            <span className="ml-auto mr-0 pr-2.5">{intl.formatMessage(messages.notificationHelpPush)}</span>
+            <span className="ml-auto">{intl.formatMessage(messages.webLabel)}</span>
           </span>
         </div>
         <div className="mt-3 pb-5">

src/notification-preferences/NotificationPreferenceRow.jsx

@@ -41,45 +41,41 @@ const NotificationPreferenceRow = ({ appId, preferenceName }) => {
     <div className="d-flex flex-row mb-3" data-testid="notification-preference">
       <span className="d-flex align-items-center col-8 px-0">
         {intl.formatMessage(messages.notificationTitle, { text: preferenceName })}
-        {
-          preference.info !== '' && (
-            <OverlayTrigger
-              id={tooltipId}
-              className="d-inline"
-              placement="top"
-              overlay={(
-                <Tooltip id={tooltipId}>
-                  {preference.info}
-                </Tooltip>
-              )}
-            >
-              <span className="ml-2">
-                <Icon src={InfoOutline} />
-              </span>
-            </OverlayTrigger>
-          )
-        }
+        {preference.info !== '' && (
+          <OverlayTrigger
+            id={tooltipId}
+            className="d-inline"
+            placement="top"
+            overlay={(
+              <Tooltip id={tooltipId}>
+                {preference.info}
+              </Tooltip>
+                )}
+          >
+            <span className="ml-2">
+              <Icon src={InfoOutline} />
+            </span>
+          </OverlayTrigger>
+        )}
       </span>
       <span className="d-flex col-4 px-0">
-        {
-          ['web', 'email', 'push'].map((channel) => (
-            <span
-              id={`${preferenceName}-${channel}`}
-              className={classNames(
-                { 'ml-0 mr-auto': channel === 'web' },
-                { 'mx-auto': channel === 'email' },
-                { 'ml-auto mr-0': channel === 'push' },
-              )}
-            >
-              <ToggleSwitch
-                name={channel}
-                value={preference[channel]}
-                onChange={onToggle}
-                disabled={nonEditable.includes(channel)}
-              />
-            </span>
-          ))
-        }
+        {['web'].map((channel) => (
+          <span
+            id={`${preferenceName}-${channel}`}
+            className={classNames(
+              { 'ml-auto': channel === 'web' },
+              { 'mx-auto': channel === 'email' },
+              { 'ml-auto mr-0': channel === 'push' },
+            )}
+          >
+            <ToggleSwitch
+              name={channel}
+              value={preference[channel]}
+              onChange={onToggle}
+              disabled={nonEditable.includes(channel)}
+            />
+          </span>
+        ))}
       </span>
     </div>
   );

src/notification-preferences/NotificationPreferences.jsx

@@ -56,14 +56,14 @@ const NotificationPreferences = () => {
   }
 
   return (
-    <Container size="md">
+    <Container size="md" className="notification-preferences">
       <h2 className="notification-heading mt-6 mb-5.5">
         {intl.formatMessage(messages.notificationHeading)}
       </h2>
       <div className="h-100">
         <div className="d-flex mb-4">
           <Link to="/notifications">
-            <Icon className="d-inline-block align-bottom ml-1" src={ArrowBack} />
+            <Icon className="d-inline-block align-bottom" src={ArrowBack} />
           </Link>
           <span className="notification-course-title ml-auto mr-auto">
             {course?.name}

src/notification-preferences/messages.js

@@ -33,13 +33,13 @@ export const messages = defineMessages({
     }`,
     description: 'Display text for Notification Types',
   },
-  notificationHelpType: {
-    id: 'notification.preference.help.type',
+  typeLabel: {
+    id: 'notification.preference.type.label',
     defaultMessage: 'Type',
     description: 'Display text for type',
   },
-  notificationHelpWeb: {
-    id: 'notification.preference.help.web',
+  webLabel: {
+    id: 'notification.preference.web,label',
     defaultMessage: 'Web',
     description: 'Display text for web',
   },