From ecffd9e9feff314e1c71722648ff532623ce7581 Mon Sep 17 00:00:00 2001
From: Niklas <niklas@kapelle.org>
Date: Tue, 17 Aug 2021 15:39:45 +0200
Subject: [PATCH] replaced all css w/ tailwind css

---
 src/App.module.scss                   |  5 -----
 src/components/Breadcrum.tsx          | 20 +++++++++++---------
 src/components/DragAndDrop.tsx        |  8 ++++----
 src/components/FileBrowser.tsx        | 14 +++++++-------
 src/components/FileBrowserElement.tsx |  1 +
 src/components/FileUploadButton.tsx   |  2 +-
 src/components/ImageOpener.tsx        |  3 +--
 src/components/Modal.tsx              | 13 ++++++++-----
 src/style/DragAndDrop.module.scss     | 21 ---------------------
 src/style/Modal.module.scss           | 27 ---------------------------
 10 files changed, 33 insertions(+), 81 deletions(-)
 delete mode 100644 src/App.module.scss
 delete mode 100644 src/style/DragAndDrop.module.scss
 delete mode 100644 src/style/Modal.module.scss

diff --git a/src/App.module.scss b/src/App.module.scss
deleted file mode 100644
index 7a57211..0000000
--- a/src/App.module.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.imageOpenerImage{
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-}
\ No newline at end of file
diff --git a/src/components/Breadcrum.tsx b/src/components/Breadcrum.tsx
index e47fed9..e562d11 100644
--- a/src/components/Breadcrum.tsx
+++ b/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">
-			<li className="breadcrumb-item">
+		<ul>
+			<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={()=>{
-						if (i != arr.length - 1){
-							props.onDirClick?.("/"+arr.slice(0,i-1).join("/"))
-						}
-					}}>{e}</a>
-				</li>))}
+				<>
+					<li className="inline mx-1">/</li>
+					<li key={e} className="inline mx-1">
+						<a onClick={()=>{
+							if (i != arr.length - 1){
+								props.onDirClick?.("/"+arr.slice(0,i-1).join("/"))
+							}
+						}}>{e}</a>
+					</li></>))}
 		</ul>
 	)
 }
diff --git a/src/components/DragAndDrop.tsx b/src/components/DragAndDrop.tsx
index 5b66d7d..c2f03d9 100644
--- a/src/components/DragAndDrop.tsx
+++ b/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>
 	)
diff --git a/src/components/FileBrowser.tsx b/src/components/FileBrowser.tsx
index 40e51c2..a882bf1 100644
--- a/src/components/FileBrowser.tsx
+++ b/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">
-						<thead>
+					<table className="w-full">
+						<thead className="border-b-2">
 							<tr>
-								<th>Name</th>
-								<th>Last Modified</th>
-								<th>Size</th>
+								<th className="text-left">Name</th>
+								<th className="text-left">Last Modified</th>
+								<th className="text-left">Size</th>
 							</tr>
 						</thead>
-						<tbody>
+						<tbody className="divide-y">
 
 							{ data?.directorys.map(v => (<FileBrowserElement
 								key={v?.id}
diff --git a/src/components/FileBrowserElement.tsx b/src/components/FileBrowserElement.tsx
index e8a8b59..b22ba58 100644
--- a/src/components/FileBrowserElement.tsx
+++ b/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)
diff --git a/src/components/FileUploadButton.tsx b/src/components/FileUploadButton.tsx
index 3df15b7..45aa7d9 100644
--- a/src/components/FileUploadButton.tsx
+++ b/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)
 				}
diff --git a/src/components/ImageOpener.tsx b/src/components/ImageOpener.tsx
index 38bdb4d..9541193 100644
--- a/src/components/ImageOpener.tsx
+++ b/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)}/>
 	)
 }
 
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index acec668..bd2c366 100644
--- a/src/components/Modal.tsx
+++ b/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={()=>{
-			props.onCloseClick?.()
-		}}>
-			<div className={style.body} onClick={(e)=>{
+		<div 
+			className={`${!props.show?"hidden":"" } 
+			fixed z-10 left-0 top-0 w-full h-full 
+			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}
diff --git a/src/style/DragAndDrop.module.scss b/src/style/DragAndDrop.module.scss
deleted file mode 100644
index 5c32f1d..0000000
--- a/src/style/DragAndDrop.module.scss
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/src/style/Modal.module.scss b/src/style/Modal.module.scss
deleted file mode 100644
index 0cf2da2..0000000
--- a/src/style/Modal.module.scss
+++ /dev/null
@@ -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;
-}
\ No newline at end of file