modal and openers

src/components/FileBrowser.tsx

@@ -10,7 +10,7 @@ const FileBrowser: React.FC = () => {
 	const [openFileId, setOpenFileId] = useState("")
 	const [showFile, setShowFile] = useState(false)
 
-	const { data } = useOpenDirQuery({
+	const { data, loading } = useOpenDirQuery({
 		variables:{
 			path
 		}
@@ -22,6 +22,9 @@ const FileBrowser: React.FC = () => {
 				setPath(newPath)
 			}}/>
 			<div>
+				{loading && 
+					<div className="loading loading-lg"></div> // TODO: center
+				}
 				<table className="table table-striped table-hover">
 					<thead>
 						<tr>

src/components/FileOpen.tsx

@@ -3,6 +3,8 @@ import PropTypes from "prop-types"
 import { useGetFileQuery } from "../generated/graphql"
 import ImageOpener from "./ImageOpener"
 import TextOpener from "./TextOpener"
+import Modal from "./Modal"
+import { useState } from "react"
 
 interface Props {
     id: string
@@ -49,14 +51,11 @@ const FileOpen: React.FC<Props> = (props) => {
 	}
 
 	return (
-		<div className={`modal modal-sm ${props.show ? "active":""}`}>
-			<a className="modal-overlay" onClick={()=>{
-				props.onCloseClick?.()
-			}}>❌</a>
-			<div className="modal-container">
-				{opener}
-			</div>
-		</div>
+		<Modal onCloseClick={()=>{
+			props.onCloseClick?.()
+		}} show={props.show} >
+			{opener}
+		</Modal>
 	)
 }
 

src/components/ImageOpener.tsx

@@ -11,7 +11,7 @@ interface Props {
 const ImageOpener: React.FC<Props> = (props) => {
 	return (
 		<div className={style.imageOpener}>
-			<img className="img-responsive img-fit-cover" src={genDownloadLink(props.file.id)}/>
+			<img className={`img-responsive img-fit-contain ${style.imageOpenerImage}`} src={genDownloadLink(props.file.id)}/>
 		</div>
 	)
 }

src/components/Modal.tsx

@@ -0,0 +1,21 @@
+import React from "react"
+import style from "./../style/Modal.module.scss"
+
+interface Props {
+	show: boolean
+	onCloseClick?: ()=>void
+}
+
+const Modal: React.FC<Props> = (props) => {
+	return (
+		<div className={`${style.overlay} ${!props.show && style.hidden}`} onClick={()=>{
+			props.onCloseClick?.()
+		}}>
+			<div className={style.body}>
+				{props.children}
+			</div>
+		</div>
+	)
+}
+
+export default Modal