Fixed a bug made by Mo, added styling to all codeWrapper divs for a cohesive look.

Co-authored-by: Justin Baik <bij3377@gmail.com>
Co-authored-by: Max Weisenberger <germanbluemax@gmail.com>
Co-authored-by: Mo Hmaidi <mhmaidi789@gmail.com>
Co-authored-by: Dieu Huynh <dieuhhuynh@gmail.com>

Author: 4 people

src/components/Modals/ExportFileModal.module.scss

@@ -224,9 +224,11 @@
   flex: 1;
   flex-direction: column;
 }
+
 #endPointGuide {
   margin: 8px;
 }
+
 #configGuide {
   display: flex;
   flex: 1;
@@ -235,17 +237,23 @@
 }
 
 pre {
+  white-space: pre-wrap;
   display: flex;
   flex: 1;
   flex-direction: column;
   padding: 12px 15px;
   margin-top: -4px;
   margin-bottom: 8px;
   overflow: auto;
-  width: 97.5%;
+  // width: 97.5%;
   font-size: 85%;
   line-height: 1.45;
   background-color: #0a1f40;
   color: white;
   // border-radius: 6px;
 }
+
+// #codeWrapper {
+//   width: 50%;
+//   color: #fff;
+// }

src/components/Modals/Modal.jsx

@@ -257,9 +257,9 @@ const Modal = ({
                   2. Install dependencies and Jest.
                 </AccordionSummary>
                 <AccordionDetails id={styles.accordionDetails}>
-                  <div>
+                  <div id={styles.accordionDiv}>
                     <pre>
-                      <div className="code-wrapper">
+                      <div className="code-wrapper" id={styles.codeWrapper}>
                         <code>
                           {script.install}
                         </code>