From cde92f653e2dc7f9beffcafd5dfff08a3d5359cb Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Mon, 17 Jan 2022 05:20:35 -0800
Subject: [PATCH] Improve modal component, add InfoModal - Use as a generic

---
 src/App.tsx                        |  2 +-
 src/components/modal/PageModal.tsx | 19 ++++++++++++++++---
 src/styles/App.global.css          | 20 ++++++++++++++++++++
 3 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 5f71c01..4465527 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -20,7 +20,7 @@ import ArtistList from './components/library/ArtistList';
 import GenreList from './components/library/GenreList';
 import { MockFooter } from './components/settings/styled';
 import { useAppSelector } from './redux/hooks';
-import PageModal from './components/modal/PageModal';
+import { PageModal } from './components/modal/PageModal';
 import NowPlayingMiniView from './components/player/NowPlayingMiniView';
 import { GlobalContextMenu } from './components/shared/ContextMenu';
 import SearchView from './components/search/SearchView';
diff --git a/src/components/modal/PageModal.tsx b/src/components/modal/PageModal.tsx
index ae4fbc7..9cccc80 100644
--- a/src/components/modal/PageModal.tsx
+++ b/src/components/modal/PageModal.tsx
@@ -8,11 +8,16 @@ import ArtistView from '../library/ArtistView';
 import AlbumView from '../library/AlbumView';
 import PlaylistView from '../playlist/PlaylistView';
 
-const StyledModal = styled(Modal)`
+const StyledModal = styled(Modal)<{ width?: string }>`
   color: ${(props) => `${props.theme.colors.layout.page.color} !important`};
 
+  .rs-modal-dialog {
+    width: ${(props) => props.width};
+  }
+
   .rs-modal-body {
     margin-top: 0px;
+    padding-bottom: 0px;
   }
 
   .rs-modal-content {
@@ -24,15 +29,17 @@ const StyledModal = styled(Modal)`
   }
 `;
 
-const PageModal = () => {
+export const PageModal = () => {
   const dispatch = useAppDispatch();
   const misc = useAppSelector((state) => state.misc);
 
   return (
     <StyledModal
+      width="750px"
       show={misc.modal.show}
       onHide={() => dispatch(hideModal())}
       onExit={() => dispatch(hideModal())}
+      overflow
       full
     >
       <Modal.Header onClick={() => dispatch(setContextMenu({ show: false }))}>
@@ -62,4 +69,10 @@ const PageModal = () => {
   );
 };
 
-export default PageModal;
+export const InfoModal = ({ show, handleHide, width, children }: any) => {
+  return (
+    <StyledModal width={width} show={show} full overflow onHide={handleHide} onExit={handleHide}>
+      <Modal.Body>{children}</Modal.Body>
+    </StyledModal>
+  );
+};
diff --git a/src/styles/App.global.css b/src/styles/App.global.css
index 0e39360..9564ab6 100644
--- a/src/styles/App.global.css
+++ b/src/styles/App.global.css
@@ -25,6 +25,26 @@ body {
   z-index: 1;
 }
 
+.rs-modal-wrapper {
+  display: flex;
+  overflow-y: hidden !important;
+}
+
+.rs-modal-backdrop.fade {
+  transition: none !important;
+}
+
+.rs-modal-backdrop.out {
+  transition: none !important;
+}
+
+.rs-modal {
+  transition: none !important;
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+}
+
 .rs-table-cell-content > div::selection,
 .rs-table-cell-content > div > div::selection,
 .rs-table-cell-content > div > span > img::selection,