fix: modal popup should be grouped with toggle button

edx · Jan 24, 2024 · 74139b8 · 74139b8
1 parent f706d72
commit 74139b8
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 40 deletions.
diff --git a/src/components/ToggleXpertButton/index.jsx b/src/components/ToggleXpertButton/index.jsx
@@ -72,47 +72,48 @@ const ToggleXpert = ({
     && (localStorage.getItem('completedLearningAssistantTour') || !isModalOpen)
   );
 
+  const chatMargin = contentToolsEnabled ? 'mb-5' : 'mb-3';
+
   return (
     (!isOpen && (
-    <>
-      <div
-        className="position-fixed learning-assistant-popup-modal"
-      >
-        <ModalPopup
-          hasArrow
-          placement="left"
-          positionRef={target}
-          isOpen={isModalOpen && !localStorage.getItem('completedLearningAssistantTour')}
-          onClose={handleModalClose}
-        >
-          <div
-            className="bg-white p-3 rounded shadow border"
-            style={{ textAlign: 'start' }}
-          >
-            <p data-testid="modal-message">
-              Xpert is a new part of your learning experience.<br />
-              You can ask questions and get tutoring help during your course.
-            </p>
-            <div className="d-flex justify-content-start" style={{ gap: '10px' }}>
-              <ModalCloseButton variant="outline-primary" data-testid="close-button">Close</ModalCloseButton>
-              <Button
-                variant="primary"
-                className="mie-2"
-                onClick={handleClick}
-                data-testid="check-button"
-              >
-                Check it out
-              </Button>
-            </div>
-          </div>
-        </ModalPopup>
-      </div>
       <div
         className={
           `toggle position-fixed closed d-flex flex-column justify-content-end align-items-end mx-3 border-0 
-          ${contentToolsEnabled ? 'chat-content-tools-margin' : ''}`
+           ${chatMargin}`
         }
       >
+        <div
+          className="position-fixed learning-assistant-popup-modal mb-7"
+        >
+          <ModalPopup
+            hasArrow
+            placement="left"
+            positionRef={target}
+            isOpen={isModalOpen && !localStorage.getItem('completedLearningAssistantTour')}
+            onClose={handleModalClose}
+          >
+            <div
+              className={`bg-white p-3 rounded shadow border ${chatMargin}`}
+              style={{ textAlign: 'start' }}
+            >
+              <p data-testid="modal-message">
+                Xpert is a new part of your learning experience.<br />
+                You can ask questions and get tutoring help during your course.
+              </p>
+              <div className="d-flex justify-content-start" style={{ gap: '10px' }}>
+                <ModalCloseButton variant="outline-primary" data-testid="close-button">Close</ModalCloseButton>
+                <Button
+                  variant="primary"
+                  className="mie-2"
+                  onClick={handleClick}
+                  data-testid="check-button"
+                >
+                  Check it out
+                </Button>
+              </div>
+            </div>
+          </ModalPopup>
+        </div>
         { shouldDisplayCTA && (
           <div
             className="d-flex justify-content-end flex-row "
@@ -153,7 +154,6 @@ const ToggleXpert = ({
           <XpertLogo />
         </Button>
       </div>
-    </>
     ))
   );
 };

diff --git a/src/components/ToggleXpertButton/index.scss b/src/components/ToggleXpertButton/index.scss
@@ -44,11 +44,6 @@
     height: 1.5rem !important;
 }
 
-// this class is used to shift the display of the toggle to account for the display of content tools
-.chat-content-tools-margin {
-    margin-bottom: 2rem;
-}
-
 .learning-assistant-popup-modal {
     width: 100%;
 }