Fix react-bootstrap import style

Getting some errors with ts-jest and the import style for tyhese components.
Unfortunately this import style prevents tree-shaking I think, so should be reviewed once we have figured out our typescript setup with TS5 in #3240

Author: MonkeyDo

frontend/js/src/cb-review/CBReviewModal.tsx

@@ -9,7 +9,7 @@ import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import NiceModal, { useModal, bootstrapDialog } from "@ebay/nice-modal-react";
-import Modal from "react-bootstrap/Modal";
+import { Modal } from "react-bootstrap";
 import { kebabCase, lowerCase } from "lodash";
 import { Link, useNavigate } from "react-router-dom";
 import GlobalAppContext from "../utils/GlobalAppContext";

frontend/js/src/common/flairs/FlairsExplanationModal.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { get as _get } from "lodash";
 import NiceModal, { useModal, bootstrapDialog } from "@ebay/nice-modal-react";
-import Modal from "react-bootstrap/Modal";
+import { Modal } from "react-bootstrap";
 import { Link, useNavigate } from "react-router-dom";
 
 export default NiceModal.create(() => {

frontend/js/src/common/listens/AddToPlaylist.tsx

@@ -8,7 +8,7 @@ import {
 import { toast } from "react-toastify";
 import { Link } from "react-router-dom";
 import NiceModal, { useModal, bootstrapDialog } from "@ebay/nice-modal-react";
-import Modal from "react-bootstrap/Modal";
+import { Modal } from "react-bootstrap";
 import { ToastMsg } from "../../notifications/Notifications";
 import { PLAYLIST_URI_PREFIX, listenToJSPFTrack } from "../../playlists/utils";
 import GlobalAppContext from "../../utils/GlobalAppContext";

frontend/js/src/common/listens/ListenPayloadModal.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { get as _get } from "lodash";
 import NiceModal, { useModal, bootstrapDialog } from "@ebay/nice-modal-react";
-import Modal from "react-bootstrap/Modal";
+import { Modal } from "react-bootstrap";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCopy } from "@fortawesome/free-solid-svg-icons";
 import hljs from "highlight.js/lib/core";

frontend/js/src/common/listens/MBIDMappingModal.tsx

@@ -1,5 +1,5 @@
 import NiceModal, { useModal, bootstrapDialog } from "@ebay/nice-modal-react";
-import Modal from "react-bootstrap/Modal";
+import { Modal } from "react-bootstrap";
 import { faTimesCircle } from "@fortawesome/free-regular-svg-icons";
 import {
   faExchangeAlt,

frontend/js/src/common/stats/StatsExplanationsModal.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { get as _get } from "lodash";
 import NiceModal, { useModal, bootstrapDialog } from "@ebay/nice-modal-react";
-import Modal from "react-bootstrap/Modal";
+import { Modal } from "react-bootstrap";
 
 export default NiceModal.create(() => {
   const modal = useModal();

frontend/js/src/components/ConfirmationModal.tsx

@@ -1,5 +1,5 @@
 import NiceModal, { useModal, bootstrapDialog } from "@ebay/nice-modal-react";
-import Modal from "react-bootstrap/Modal";
+import { Modal } from "react-bootstrap";
 import * as React from "react";
 
 type ConfirmationModalProps = {

frontend/js/src/components/SyndicationFeedModal.tsx

@@ -1,5 +1,5 @@
 import NiceModal, { useModal, bootstrapDialog } from "@ebay/nice-modal-react";
-import Modal from "react-bootstrap/Modal";
+import { Modal } from "react-bootstrap";
 import * as React from "react";
 import { useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

frontend/js/src/personal-recommendations/PersonalRecommendationsModal.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { uniq, includes, toLower } from "lodash";
 import NiceModal, { useModal, bootstrapDialog } from "@ebay/nice-modal-react";
-import Modal from "react-bootstrap/Modal";
+import { Modal } from "react-bootstrap";
 import { toast } from "react-toastify";
 import GlobalAppContext from "../utils/GlobalAppContext";
 import NamePill from "./NamePill";

frontend/js/src/pins/PinRecordingModal.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { get as _get } from "lodash";
 import NiceModal, { useModal, bootstrapDialog } from "@ebay/nice-modal-react";
-import Modal from "react-bootstrap/Modal";
+import { Modal } from "react-bootstrap";
 import { toast } from "react-toastify";
 import GlobalAppContext from "../utils/GlobalAppContext";
 import {

frontend/js/src/playlists/components/CreateOrEditPlaylistModal.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import NiceModal, { useModal, bootstrapDialog } from "@ebay/nice-modal-react";
-import Modal from "react-bootstrap/Modal";
+import { Modal } from "react-bootstrap";
 import { toast } from "react-toastify";
 import { omit, isEqual } from "lodash";
 import { Link } from "react-router-dom";

frontend/js/src/playlists/components/DeletePlaylistConfirmationModal.tsx

@@ -1,5 +1,5 @@
 import NiceModal, { useModal, bootstrapDialog } from "@ebay/nice-modal-react";
-import Modal from "react-bootstrap/Modal";
+import { Modal } from "react-bootstrap";
 import * as React from "react";
 import { toast } from "react-toastify";
 import { ToastMsg } from "../../notifications/Notifications";

frontend/js/src/report-user/ReportUserModal.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import NiceModal, { useModal, bootstrapDialog } from "@ebay/nice-modal-react";
-import Modal from "react-bootstrap/Modal";
+import { Modal } from "react-bootstrap";
 import { toast } from "react-toastify";
 import { Link } from "react-router-dom";
 import GlobalAppContext from "../utils/GlobalAppContext";

frontend/js/src/settings/link-listens/MultiTrackMBIDMappingModal.tsx

@@ -1,5 +1,5 @@
 import NiceModal, { useModal, bootstrapDialog } from "@ebay/nice-modal-react";
-import Modal from "react-bootstrap/Modal";
+import { Modal } from "react-bootstrap";
 import {
   faArrowRightLong,
   faInfoCircle,

frontend/js/src/user-feed/ThanksModal.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import NiceModal, { useModal, bootstrapDialog } from "@ebay/nice-modal-react";
-import Modal from "react-bootstrap/Modal";
+import { Modal } from "react-bootstrap";
 import { toast } from "react-toastify";
 import { startCase } from "lodash";
 import GlobalAppContext from "../utils/GlobalAppContext";

frontend/js/src/user/components/AddListenModal.tsx

@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { faCalendar } from "@fortawesome/free-regular-svg-icons";
 import NiceModal, { useModal, bootstrapDialog } from "@ebay/nice-modal-react";
-import Modal from "react-bootstrap/Modal";
+import { Modal } from "react-bootstrap";
 import { toast } from "react-toastify";
 import { Link } from "react-router-dom";
 import { add } from "date-fns";

frontend/js/src/user/playlists/components/ImportAppleMusicPlaylistModal.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import NiceModal, { useModal, bootstrapDialog } from "@ebay/nice-modal-react";
-import Modal from "react-bootstrap/Modal";
+import { Modal } from "react-bootstrap";
 import { toast } from "react-toastify";
 import { Link } from "react-router-dom";
 import GlobalAppContext from "../../../utils/GlobalAppContext";

frontend/js/src/user/playlists/components/ImportJSPFPlaylistModal.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import NiceModal, { useModal, bootstrapDialog } from "@ebay/nice-modal-react";
-import Modal from "react-bootstrap/Modal";
+import { Modal } from "react-bootstrap";
 import { toast } from "react-toastify";
 
 import { Link } from "react-router-dom";

frontend/js/src/user/playlists/components/ImportSpotifyPlaylistModal.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import NiceModal, { useModal, bootstrapDialog } from "@ebay/nice-modal-react";
-import Modal from "react-bootstrap/Modal";
+import { Modal } from "react-bootstrap";
 import { toast } from "react-toastify";
 import GlobalAppContext from "../../../utils/GlobalAppContext";
 import { ToastMsg } from "../../../notifications/Notifications";