From a3209058d1ccaed873020081b4f667a656c60e4e Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Thu, 22 Aug 2024 08:49:10 +0000
Subject: [PATCH 1/3] fix(deps): update dependency bootstrap to v5

---
 package.json |  2 +-
 yarn.lock    | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index abfdaf343..a2e3bb89d 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "autoprefixer": "^9.7.3",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.5",
-    "bootstrap": "^4.4.1",
+    "bootstrap": "^5.0.0",
     "casual-browserify": "^1.5.19-2",
     "chai": "^4.2.0",
     "chai-as-promised": "^7.1.1",
diff --git a/yarn.lock b/yarn.lock
index e6646b8b5..3331b55de 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3580,13 +3580,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bootstrap@npm:^4.4.1":
-  version: 4.6.2
-  resolution: "bootstrap@npm:4.6.2"
+"bootstrap@npm:^5.0.0":
+  version: 5.3.3
+  resolution: "bootstrap@npm:5.3.3"
   peerDependencies:
-    jquery: 1.9.1 - 3
-    popper.js: ^1.16.1
-  checksum: 3f4e7768ff7d618c49d4bf4f02aa54a9bfb679d4eecb0f3854fa4af1a17b9114b147009c435946432cdd1572efffc71d88ec385c55943a12fa66253cde0876b0
+    "@popperjs/core": ^2.11.8
+  checksum: 537b68db30150075614310e9ebdf1be9b4affdf89ca226d59f4352e82a368b203af13ed0ce5ccfa4e06f141ecd233f7432ca3817e9c1a39863a05fbe13c73c4b
   languageName: node
   linkType: hard
 
@@ -9839,7 +9838,7 @@ __metadata:
     autoprefixer: ^9.7.3
     babel-eslint: ^10.0.1
     babel-loader: ^8.0.5
-    bootstrap: ^4.4.1
+    bootstrap: ^5.0.0
     casual-browserify: ^1.5.19-2
     chai: ^4.2.0
     chai-as-promised: ^7.1.1

From f9375e7531f991bbb226b818d1b63e10d0f6ada4 Mon Sep 17 00:00:00 2001
From: Asad Ali <asad.ali@arbisoft.com>
Date: Thu, 22 Aug 2024 17:33:16 +0500
Subject: [PATCH 2/3] add popperjs/core

---
 package.json | 1 +
 yarn.lock    | 8 ++++++++
 2 files changed, 9 insertions(+)

diff --git a/package.json b/package.json
index a2e3bb89d..658bb80a2 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "@fancyapps/fancybox": "^3.5.7",
     "@material/layout-grid": "^0.41.0",
     "@material/top-app-bar": "^1.1.1",
+    "@popperjs/core": "^2.11.8",
     "@sentry/browser": "^5.5.0",
     "@trust/webcrypto": "^0.9.2",
     "autoprefixer": "^9.7.3",
diff --git a/yarn.lock b/yarn.lock
index 3331b55de..e2373ca3b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2156,6 +2156,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@popperjs/core@npm:^2.11.8":
+  version: 2.11.8
+  resolution: "@popperjs/core@npm:2.11.8"
+  checksum: e5c69fdebf52a4012f6a1f14817ca8e9599cb1be73dd1387e1785e2ed5e5f0862ff817f420a87c7fc532add1f88a12e25aeb010ffcbdc98eace3d55ce2139cf0
+  languageName: node
+  linkType: hard
+
 "@sentry/browser@npm:^5.5.0":
   version: 5.30.0
   resolution: "@sentry/browser@npm:5.30.0"
@@ -9833,6 +9840,7 @@ __metadata:
     "@fancyapps/fancybox": ^3.5.7
     "@material/layout-grid": ^0.41.0
     "@material/top-app-bar": ^1.1.1
+    "@popperjs/core": ^2.11.8
     "@sentry/browser": ^5.5.0
     "@trust/webcrypto": ^0.9.2
     autoprefixer: ^9.7.3

From fdaa1d0ecc28835d82e381bdad77a19cb9429769 Mon Sep 17 00:00:00 2001
From: Asad Ali <asad.ali@arbisoft.com>
Date: Fri, 23 Aug 2024 17:01:50 +0500
Subject: [PATCH 3/3] fix: fix dropdowns

---
 static/js/components/CatalogMenu.js | 11 +++++++----
 static/js/components/UserMenu.js    | 11 +++++++----
 static/js/entry/django.js           |  1 +
 static/scss/layout.scss             |  2 +-
 static/scss/user-menu.scss          |  9 +++++++++
 5 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/static/js/components/CatalogMenu.js b/static/js/components/CatalogMenu.js
index 53bfa5f20..d44ab0fea 100644
--- a/static/js/components/CatalogMenu.js
+++ b/static/js/components/CatalogMenu.js
@@ -11,17 +11,20 @@ type Props = {
 const CatalogMenu = ({ courseTopics }: Props) => {
   return (
     <div className="catalog-menu dropdown">
-      <div
+      <a
         className="col-2 dropdown-toggle"
         id="dropdownMenuButton"
         data-toggle="dropdown"
         aria-haspopup="true"
         aria-expanded="false"
         aria-label="courses"
+        href="#"
+        role="button"
+        data-bs-toggle="dropdown"
       >
         Courses
-      </div>
-      <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
+      </a>
+      <ul className="dropdown-menu" aria-labelledby="dropdownMenuButton">
         <a
           className="dropdown-item bold"
           href="/catalog/"
@@ -49,7 +52,7 @@ const CatalogMenu = ({ courseTopics }: Props) => {
         >
           Programs
         </a>
-      </div>
+      </ul>
     </div>
   );
 };
diff --git a/static/js/components/UserMenu.js b/static/js/components/UserMenu.js
index 87c300d8b..1aad8c2a5 100644
--- a/static/js/components/UserMenu.js
+++ b/static/js/components/UserMenu.js
@@ -15,12 +15,15 @@ type Props = {
 const UserMenu = ({ currentUser }: Props) => {
   return (
     <div className="user-menu dropdown">
-      <div
+      <a
         className="col-2 dropdown-toggle"
         id="dropdownMenuButton"
         data-toggle="dropdown"
         aria-haspopup="true"
         aria-expanded="false"
+        href="#"
+        role="button"
+        data-bs-toggle="dropdown"
       >
         <img
           /* Use default profile avatar for now */
@@ -30,8 +33,8 @@ const UserMenu = ({ currentUser }: Props) => {
           width={34}
           height={34}
         />
-      </div>
-      <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
+      </a>
+      <ul className="dropdown-menu" aria-labelledby="dropdownMenuButton">
         <MixedLink
           className="dropdown-item"
           dest={routes.profile.view}
@@ -63,7 +66,7 @@ const UserMenu = ({ currentUser }: Props) => {
           <div className="dropdown-icon icon-logout" />
           Sign Out
         </a>
-      </div>
+      </ul>
     </div>
   );
 };
diff --git a/static/js/entry/django.js b/static/js/entry/django.js
index ba6a79d0d..83be36f5f 100644
--- a/static/js/entry/django.js
+++ b/static/js/entry/django.js
@@ -2,6 +2,7 @@
 import "jquery";
 import "bootstrap";
 import "popper.js";
+import "@popperjs/core";
 import "slick-carousel";
 import "hls.js";
 import "@fancyapps/fancybox";
diff --git a/static/scss/layout.scss b/static/scss/layout.scss
index 5cdb6a957..92df4130d 100644
--- a/static/scss/layout.scss
+++ b/static/scss/layout.scss
@@ -3,7 +3,7 @@
 @import "node_modules/@material/top-app-bar/dist/mdc.top-app-bar";
 @import "node_modules/react-picky/dist/picky";
 @import "node_modules/react-day-picker/lib/style";
-@import "node_modules/bootstrap/scss/bootstrap";
+@import "~bootstrap/scss/bootstrap";
 @import "auth";
 @import "common";
 @import "top-app-bar";
diff --git a/static/scss/user-menu.scss b/static/scss/user-menu.scss
index 22ce3fff9..bc71318d5 100644
--- a/static/scss/user-menu.scss
+++ b/static/scss/user-menu.scss
@@ -59,6 +59,15 @@
 
     &:hover {
       cursor: pointer;
+      color: black;
+    }
+  }
+
+  .dropdown-menu {
+    left: unset;
+
+    .dropdown-item:hover {
+      background-color: #e9ecef;
     }
   }
 }