From 339232151ca0d7a58fc245a78adb653e521d7579 Mon Sep 17 00:00:00 2001
From: Chris Pappas <christopappas@users.noreply.github.com>
Date: Mon, 6 Dec 2021 15:40:33 -0500
Subject: [PATCH] * fix: updating paragon version to get ModalPopup component
 error fix (#654)

* fix: updating paragon version to get ModalPopup component error fix

* docs: tweaking readme for clarity

* fix: revoke modal popup button styling
---
 README.md                                     |  6 ++++--
 package-lock.json                             | 21 ++++++++++++++++---
 package.json                                  |  2 +-
 .../LicenseManagementTableBulkActions.jsx     |  2 +-
 4 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index e04ea771ba..094c4ba3ed 100644
--- a/README.md
+++ b/README.md
@@ -21,14 +21,16 @@ $ git clone git@github.com:edx/frontend-app-admin-portal.git
 $ cd frontend-app-admin-portal
 $ nvm use (if using nvm) OR install and switch to version of node/npm as per the .nvmrc file to avoid issues during npm install or npm start (and to use the same version of node/npm as used by team plus CI builds)
 $ npm install
-$ npm start
+$ npm start # or "npm run start:with-theme" if you want edX branding
 ```
 
+The application is now running and can be accessed in a web browser at http://localhost:1991/
+
+
 #### Themes
 
 By default, the core Paragon theme is installed and used with the `npm start` command. If you'd like to use the @edx/brand-edx.org theme, use the `npm run start:with-theme` command.
 
-The application is now running and can be accessed in a web browser at http://localhost:1991/
 
 #### Sign-in and access
 
diff --git a/package-lock.json b/package-lock.json
index 23142b9afb..2dac1491bf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1655,9 +1655,9 @@
       }
     },
     "@edx/paragon": {
-      "version": "16.20.0",
-      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-16.20.0.tgz",
-      "integrity": "sha512-bde4SQ7Ek6/JiKpmzlgHKDZmtQqSSP31O6A3pSvwtDFBvInTwXq27hYFBqyUGE1E5vKRYCUcwKpFhDlbp6lVuA==",
+      "version": "16.20.1",
+      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-16.20.1.tgz",
+      "integrity": "sha512-WE5NGtLosQLvwaKdgutPrKtlt5xtfpBL6QEmKnMSN7txJmMv4ENMVrKitxvlJlx+iXjtWUMgIrxk4BL3in/HDw==",
       "requires": {
         "@fortawesome/fontawesome-svg-core": "^1.2.30",
         "@fortawesome/free-solid-svg-icons": "^5.14.0",
@@ -15104,6 +15104,14 @@
         "warning": "^4.0.3"
       },
       "dependencies": {
+        "@babel/runtime": {
+          "version": "7.16.3",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.3.tgz",
+          "integrity": "sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
         "classnames": {
           "version": "2.3.1",
           "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
@@ -15395,6 +15403,13 @@
         "tslib": "^2.3.1",
         "use-callback-ref": "^1.2.5",
         "use-sidecar": "^1.0.5"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+        }
       }
     },
     "react-helmet": {
diff --git a/package.json b/package.json
index ccb7fc3c88..4c8995131b 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "@edx/frontend-enterprise-logistration": "0.1.11",
     "@edx/frontend-enterprise-utils": "1.1.1",
     "@edx/frontend-platform": "1.11.0",
-    "@edx/paragon": "^16.16.0",
+    "@edx/paragon": "^16.20.1",
     "@fortawesome/fontawesome-svg-core": "1.2.35",
     "@fortawesome/free-brands-svg-icons": "5.15.3",
     "@fortawesome/free-regular-svg-icons": "5.15.3",
diff --git a/src/components/subscriptions/licenses/LicenseManagementTable/LicenseManagementTableBulkActions.jsx b/src/components/subscriptions/licenses/LicenseManagementTable/LicenseManagementTableBulkActions.jsx
index 94ddee376c..40d6855d01 100644
--- a/src/components/subscriptions/licenses/LicenseManagementTable/LicenseManagementTableBulkActions.jsx
+++ b/src/components/subscriptions/licenses/LicenseManagementTable/LicenseManagementTableBulkActions.jsx
@@ -193,7 +193,7 @@ const LicenseManagementTableBulkActions = ({
           <Icon src={MoreVert} />
         </Button>
         <ModalPopup positionRef={target} isOpen={isOpen} onClose={close}>
-          <div>
+          <div className="bg-white p-2 rounded shadow">
             <Button
               variant="outline-danger"
               iconBefore={RemoveCircle}