Improve modal component, add InfoModal

- Use as a generic

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';

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>
+  );
+};

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,