modal and openers

src/App.module.scss

@@ -1,3 +1,9 @@
 .imageOpener{
-    width: 90%;
+
+}
+
+.imageOpenerImage{
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
 }

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":""}`}>
+		<Modal onCloseClick={()=>{
-			<a className="modal-overlay" onClick={()=>{
+			props.onCloseClick?.()
-				props.onCloseClick?.()
+		}} show={props.show} >
-			}}>❌</a>
+			{opener}
-			<div className="modal-container">
+		</Modal>
-				{opener}
-			</div>
-		</div>
 	)
 }
 

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

src/index.scss

@@ -0,0 +1,2 @@
+
+@import "node_modules/spectre.css/src/spectre";

src/index.tsx

@@ -3,7 +3,6 @@ import ReactDOM from "react-dom"
 import "./index.scss"
 import App from "./App"
 import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client"
-import "spectre.css"
 
 const client = new ApolloClient({
 	uri: "/graphql",

src/style/Modal.module.scss

@@ -0,0 +1,21 @@
+.overlay{
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%; 
+    height: 100%;
+    background-color: rgba(0,0,0,0.4);
+}
+
+.body{
+    background-color: #fefefe;
+    margin: 15% auto; /* 15% from the top and centered */
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%; /* Could be more or less, depending on screen size */
+}
+
+.hidden{
+    display: none;
+}