replaced all css w/ tailwind css

src/App.module.scss

@@ -1,5 +0,0 @@
-.imageOpenerImage{
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-}

src/components/Breadcrum.tsx

@@ -10,8 +10,8 @@ const Breadcrum: React.FC<Props> = (props) => {
 	const parts = props.path.split("/").filter(e=>e.length > 0)
 
 	return (
-		<ul className="breadcrumb">
+		<ul>
-			<li className="breadcrumb-item">
+			<li className="inline mr-1">
 				<a onClick={()=>{
 					props.onDirClick?.("/")
 				}}>
@@ -19,13 +19,15 @@ const Breadcrum: React.FC<Props> = (props) => {
 				</a>
 			</li>
 			{parts.map((e,i,arr)=>(
-				<li key={e} className="breadcrumb-item">
+				<>
-					<a onClick={()=>{
+					<li className="inline mx-1">/</li>
-						if (i != arr.length - 1){
+					<li key={e} className="inline mx-1">
-							props.onDirClick?.("/"+arr.slice(0,i-1).join("/"))
+						<a onClick={()=>{
-						}
+							if (i != arr.length - 1){
-					}}>{e}</a>
+								props.onDirClick?.("/"+arr.slice(0,i-1).join("/"))
-				</li>))}
+							}
+						}}>{e}</a>
+					</li></>))}
 		</ul>
 	)
 }

src/components/DragAndDrop.tsx

@@ -1,7 +1,6 @@
 import React from "react"
 import { useState } from "react"
 import { useEffect } from "react"
-import style from "./../style/DragAndDrop.module.scss"
 
 interface Props {
 	onDrop?: ()=>void
@@ -52,7 +51,6 @@ const DragAndDrop: React.FC<Props> = (props) => {
 
 	useEffect(()=>{
 		if(dropRef.current){
-			console.debug("Add drag event listner")
 			dropRef.current.addEventListener("dragenter",handleDragEnter)
 			dropRef.current.addEventListener("dragleave",handleDragLeave)
 			dropRef.current.addEventListener("dragover",handleDragOver)
@@ -60,7 +58,6 @@ const DragAndDrop: React.FC<Props> = (props) => {
 
 			return ()=>{
 				if (dropRef.current){
-					console.debug("Remove drag event listner")
 					dropRef.current.removeEventListener("dragenter",handleDragEnter)
 					dropRef.current.removeEventListener("dragleave",handleDragLeave)
 					dropRef.current.removeEventListener("dragover",handleDragOver)
@@ -71,7 +68,10 @@ const DragAndDrop: React.FC<Props> = (props) => {
 	},[])
 
 	return (
-		<div ref={dropRef} className={`${style.dragAndDrop} ${hover? style.active:""}`}>
+		<div ref={dropRef} 
+			className={`fixed top-0 left-0 w-full h-full z-10
+				${hover? "border-dashed border-gray-600 border-4":""}`}
+		>
 			{props.children}
 		</div>
 	)

src/components/FileBrowser.tsx

@@ -119,17 +119,17 @@ const FileBrowser: React.FC = () => {
 				}}/>
 				<div>
 					{loading && 
-						<div className="loading loading-lg"></div> // TODO: center
+						<div>Loading...</div> // TODO: center
 					}
-					<table className="table table-striped table-hover">
+					<table className="w-full">
-						<thead>
+						<thead className="border-b-2">
 							<tr>
-								<th>Name</th>
+								<th className="text-left">Name</th>
-								<th>Last Modified</th>
+								<th className="text-left">Last Modified</th>
-								<th>Size</th>
+								<th className="text-left">Size</th>
 							</tr>
 						</thead>
-						<tbody>
+						<tbody className="divide-y">
 
 							{ data?.directorys.map(v => (<FileBrowserElement
 								key={v?.id}

src/components/FileBrowserElement.tsx

@@ -14,6 +14,7 @@ interface Props {
 const FileBrowserElement: React.FC<Props> = (props) => {
 	return (
 		<tr 
+			className="hover:bg-gray-100 text-lg"
 			onClick={()=>{
 				if(props.file){
 					props.onClick?.(props.file)

src/components/FileUploadButton.tsx

@@ -14,7 +14,7 @@ const FileUploadButton: React.FC<Props> = (props) => {
 			<button onClick={()=>inputRef.current?.click()} >
                 Upload files
 			</button>
-			<input type="file" multiple style={{display:"none"}} ref={inputRef} onInput={()=>{
+			<input type="file" multiple className="hidden" ref={inputRef} onInput={()=>{
 				if (inputRef.current && inputRef.current.files){
 					props.onUpload?.(inputRef.current.files)
 				}

src/components/ImageOpener.tsx

@@ -1,12 +1,11 @@
 import React from "react"
 import PropTypes from "prop-types"
 import genDownloadLink from "../functions/genDownloadLink"
-import style from "./../App.module.scss"
 import { FileOpenerProps } from "../types/FileOpenerProps"
 
 const ImageOpener: React.FC<FileOpenerProps> = (props) => {
 	return (
-		<img className={`img-responsive img-fit-cover ${style.imageOpenerImage}`} src={genDownloadLink(props.file.id)}/>
+		<img src={genDownloadLink(props.file.id)}/>
 	)
 }
 

src/components/Modal.tsx

@@ -1,5 +1,4 @@
 import React from "react"
-import style from "./../style/Modal.module.scss"
 
 interface Props {
 	show: boolean
@@ -8,10 +7,14 @@ interface Props {
 
 const Modal: React.FC<Props> = (props) => {
 	return (
-		<div className={`${style.overlay} ${!props.show && style.hidden}`} onClick={()=>{
+		<div 
-			props.onCloseClick?.()
+			className={`${!props.show?"hidden":"" } 
-		}}>
+			fixed z-10 left-0 top-0 w-full h-full 
-			<div className={style.body} onClick={(e)=>{
+			flex justify-center items-center bg-white bg-opacity-80`}
+			onClick={()=>{
+				props.onCloseClick?.()
+			}}>
+			<div className="bg-white mx-auto p-5 border-2 w-10/12 overflow-hidden max-h-full" onClick={(e)=>{
 				e.stopPropagation()
 			}}>
 				{props.children}

src/style/DragAndDrop.module.scss

@@ -1,21 +0,0 @@
-.active{
-    border: dashed grey 4px;
-    background-color: rgba(255,255,255,.8);
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 2;
-}
-
-.dragAndDrop{
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    z-index: 2;
-}

src/style/Modal.module.scss

@@ -1,27 +0,0 @@
-.overlay{
-    position: fixed;
-    z-index: 1;
-    left: 0;
-    top: 0;
-    width: 100%; 
-    height: 100%;
-    background-color: rgba(0,0,0,0.4);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.body{
-    background-color: #fefefe;
-    margin-left: auto;
-    margin-right: auto;
-    padding: 20px;
-    border: 1px solid #888;
-    width: 80%;
-    max-height: 99%;
-    overflow: hidden;
-}
-
-.hidden{
-    display: none;
-}