refactor: refactored code

openedx · Mar 18, 2024 · cb111e6 · cb111e6
1 parent 98fc826
commit cb111e6
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 35 deletions.
diff --git a/src/index.scss b/src/index.scss
@@ -95,9 +95,9 @@ $fa-font-path: "~font-awesome/fonts";
   height: 28px !important;
 }
 
-.vertical-line{
-  position: absolute;
-}
+  .vertical-line{
+    position: absolute;
+    }
 
 .font-weight-500{
   font-weight: 500;
@@ -107,6 +107,10 @@ $fa-font-path: "~font-awesome/fonts";
   margin-left: -7px !important;
 }
 
+.preference{
+  white-space: pre-wrap;
+}
+
 .margin-left-2px{
   margin-left: 2px !important;
 }
@@ -130,3 +134,21 @@ $fa-font-path: "~font-awesome/fonts";
     transform: rotate(270deg) !important;
   }
 }
+
+@media screen and (max-width: 425px) {
+  .preference {
+    font-size: 12px !important;
+  }
+  .pgn__icon{
+    height:16px;
+    width:16px;
+  }
+  .pgn__form-checkbox {
+    width:30px;
+    height:18px;
+  }
+  .pgn-transition-replace-group{
+    overflow-x: scroll;
+  }
+}
+
diff --git a/src/notification-preferences/NotificationPreferenceApp.jsx b/src/notification-preferences/NotificationPreferenceApp.jsx
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Collapsible, NavItem } from '@openedx/paragon';
+import classNames from 'classnames';
 import messages from './messages';
 import ToggleSwitch from './ToggleSwitch';
 import {
@@ -30,12 +31,12 @@ const NotificationPreferenceApp = ({ appId }) => {
   const verticalLinesRef = useRef(null);
 
   useEffect(() => {
-    const verticalLines = verticalLinesRef.current.querySelectorAll('.vertical-line');
-    let margin = verticalLinesRef.current.offsetWidth / 4.35;
+    const verticalLines = verticalLinesRef?.current?.querySelectorAll('.vertical-line');
+    let margin = 1;
 
-    verticalLines.forEach(line => {
+    verticalLines?.forEach(line => {
       // eslint-disable-next-line no-param-reassign
-      line.style.marginLeft = `${margin}px`;
+      line.style.marginLeft = `${margin * 92}px`;
       margin += margin;
     });
   }, [appId]);
@@ -69,7 +70,7 @@ const NotificationPreferenceApp = ({ appId }) => {
   }
 
   return (
-    <Collapsible.Advanced open={appToggle} data-testid={`${appId}-app`} className="mb-5">
+    <Collapsible.Advanced open={appToggle} data-testid={`${appId}-app`} className={classNames({ 'mb-5': appToggle })}>
       <Collapsible.Trigger>
         <div className="d-flex align-items-center">
           <span className="mr-auto">
@@ -89,7 +90,7 @@ const NotificationPreferenceApp = ({ appId }) => {
       <Collapsible.Body className="position-relative">
         <div className="d-flex flex-row align-items-center header-label">
           <span className="col-5 px-0">{intl.formatMessage(messages.typeLabel)}</span>
-          <span className="d-flex flex-grow-1 px-0 " ref={verticalLinesRef} key={appId}>
+          <span className="d-flex flex-grow-1 px-0" ref={verticalLinesRef} key={appId}>
             {Object.values(NOTIFICATION_CHANNELS).map((channel) => (
               <>
                 <NavItem

diff --git a/src/notification-preferences/NotificationPreferenceRow.jsx b/src/notification-preferences/NotificationPreferenceRow.jsx
@@ -51,7 +51,7 @@ const NotificationPreferenceRow = ({ appId, preferenceName }) => {
   const tooltipId = `${preferenceName}-tooltip`;
   return (
     <div className="d-flex mb-3.5 height-28px" data-testid="notification-preference">
-      <div className="d-flex align-items-center col-5 px-0">
+      <div className="d-flex align-items-center preference col-5 px-0">
         {intl.formatMessage(messages.notificationTitle, { text: preferenceName })}
         {preference.info !== '' && (
           <OverlayTrigger
@@ -70,7 +70,7 @@ const NotificationPreferenceRow = ({ appId, preferenceName }) => {
           </OverlayTrigger>
         )}
       </div>
-      <div className="d-flex flex-row  align-items-center padding-left-1px">
+      <div className="d-flex flex-row  align-items-center">
         {Object.values(NOTIFICATION_CHANNELS).map((channel) => (
           <div
             id={`${preferenceName}-${channel}`}
@@ -109,31 +109,30 @@ const NotificationPreferenceRow = ({ appId, preferenceName }) => {
                     Daily
                   </Button>
                 </div>
-                <div className="actions-dropdown">
-                  <ModalPopup
-                    onClose={close}
-                    positionRef={target}
-                    isOpen={isOpen}
+
+                <ModalPopup
+                  onClose={close}
+                  positionRef={target}
+                  isOpen={isOpen}
+                >
+                  <div
+                    className="bg-white shadow d-flex flex-column margin-left-2px"
+                    data-testid="comment-sort-dropdown-modal-popup"
                   >
-                    <div
-                      className="bg-white p-1 shadow d-flex flex-column"
-                      data-testid="comment-sort-dropdown-modal-popup"
-                    >
-                      {Object.values(EMAIL_CADENCE).map((cadence) => (
-                        <Dropdown.Item
-                          name="email_cadence"
-                          className="d-flex justify-content-start py-1.5 mb-1 margin-left-2px"
-                          as={Button}
-                          variant="tertiary"
-                          size="inline"
-                          onClick={onToggle}
-                        >
-                          {intl.formatMessage(messages.emailCadence, { text: cadence })}
-                        </Dropdown.Item>
-                      ))}
-                    </div>
-                  </ModalPopup>
-                </div>
+                    {Object.values(EMAIL_CADENCE).map((cadence) => (
+                      <Dropdown.Item
+                        name="email_cadence"
+                        className="d-flex justify-content-start py-1.5"
+                        as={Button}
+                        variant="primary"
+                        size="inline"
+                        onClick={onToggle}
+                      >
+                        {intl.formatMessage(messages.emailCadence, { text: cadence })}
+                      </Dropdown.Item>
+                    ))}
+                  </div>
+                </ModalPopup>
               </>
             )}
           </div>