Use ‘modal-lg’ for LTI modals. Update Paragon. (#193)

The new version of Paragon includes a “dialogClassName” property on Modal which lets us set the modal width to ‘modal-lg’ or ‘modal-sm’ - we’re using the former here.

package-lock.json

@@ -1443,9 +1443,9 @@
       }
     },
     "@edx/paragon": {
-      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-10.0.1.tgz",
-      "integrity": "sha512-rUQvGYVFDCTn9Vd5jk1zTOTzQK04TCKultizipRA1OmYJongMjUYUUTpX4A6KmYNvwkOY7GHQ1Ewd2W4nXj49g==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-10.1.0.tgz",
+      "integrity": "sha512-qraC7V7yNW/+jKdgJd2qf67yGJr5jlEEUtRr95TOkicNNVTbjA4P9LtR65XOKjanXXCJsz3XomkOHKHQh89b9w==",
       "requires": {
         "@fortawesome/fontawesome-svg-core": "^1.2.21",
         "@fortawesome/free-solid-svg-icons": "^5.10.1",

package.json

@@ -38,7 +38,7 @@
     "@edx/frontend-component-header": "2.0.5",
     "@edx/frontend-enterprise": "4.2.2",
     "@edx/frontend-platform": "1.5.2",
-    "@edx/paragon": "10.0.1",
+    "@edx/paragon": "10.1.0",
     "@fortawesome/fontawesome-svg-core": "1.2.30",
     "@fortawesome/free-brands-svg-icons": "5.13.1",
     "@fortawesome/free-regular-svg-icons": "5.13.1",

src/courseware/course/sequence/Unit.jsx

@@ -154,6 +154,7 @@ function Unit({
           title={modalOptions.title}
           onClose={() => { setModalOptions({ open: false }); }}
           open
+          dialogClassName="modal-lg"
         />
       )}
       <div className="unit-iframe-wrapper">

src/index.scss

@@ -317,21 +317,6 @@ $primary: #1176B2;
   }
 }
 
-.modal {
-  max-width: 100%;
-  height: 100vh;
-  .modal-dialog {
-    max-width: 100%;
-  }
-  .modal-body {
-    width: 100%;
-
-    iframe {
-      width: 100%;
-      min-height:100vh;
-    }
-  }
-}
 // Import component-specific sass files
 @import 'courseware/course/celebration/CelebrationModal.scss';
 @import 'courseware/course/content-tools/calculator/calculator.scss';