added react icons

craco.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+	style: {
+		postcss: {
+			plugins: [
+				require("tailwindcss"),
+				require("autoprefixer"),
+			],
+		},
+	},
+}

package.json

@@ -17,15 +17,15 @@
     "react": "^17.0.2",
     "react-contexify": "^5.0.0",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.2.0",
     "react-scripts": "4.0.3",
-    "spectre.css": "^0.5.9",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "craco start",
-    "build": "react-scripts build",
+    "build": "craco build",
-    "test": "react-scripts test",
+    "test": "craco test",
     "eject": "react-scripts eject",
     "graphql:gen": "graphql-codegen --config codegen.yml",
     "graphql:download": "apollo schema:download --endpoint=http://localhost:8080/graphql src/generated/schema.json"
@@ -49,6 +49,7 @@
     ]
   },
   "devDependencies": {
+    "@craco/craco": "^6.2.0",
     "@graphql-codegen/cli": "1.21.7",
     "@graphql-codegen/introspection": "1.18.2",
     "@graphql-codegen/typescript": "^1.23.0",
@@ -57,8 +58,11 @@
     "@typescript-eslint/eslint-plugin": "^4.28.4",
     "@typescript-eslint/parser": "^4.28.4",
     "apollo": "^2.33.4",
+    "autoprefixer": "^9",
     "eslint": "^7.31.0",
-    "eslint-plugin-react": "^7.24.0"
+    "eslint-plugin-react": "^7.24.0",
+    "postcss": "^7",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
   },
   "proxy": "http://localhost:8080"
 }

src/App.module.scss

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

src/assets/breadcrum.svg

@@ -0,0 +1,11 @@
+<svg
+    class="h-5 w-auto text-gray-400"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+>
+    <path
+        fillRule="evenodd"
+        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+        clipRule="evenodd"
+    ></path>
+</svg>

src/components/Breadcrum.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import PropTypes from "prop-types"
+import  { ReactComponent as BreadcrumImage } from "./../assets/breadcrum.svg"
 
 interface Props{
     path: string
@@ -10,23 +11,31 @@ const Breadcrum: React.FC<Props> = (props) => {
 	const parts = props.path.split("/").filter(e=>e.length > 0)
 
 	return (
-		<ul className="breadcrumb">
+		<ul className="flex text-gray-500 text-lg">
-			<li className="breadcrumb-item">
+			<li className="inline-flex items-center">
 				<a onClick={()=>{
 					props.onDirClick?.("/")
 				}}>
-                    Root
+					Root
 				</a>
 			</li>
-			{parts.map((e,i,arr)=>(
+			{parts.map((e,i,arr)=>{
-				<li key={e} className="breadcrumb-item">
+				const last = i == arr.length - 1
-					<a onClick={()=>{
+				return <div key={e} className="inline-flex items-center">
-						if (i != arr.length - 1){
+					<BreadcrumImage />
-							props.onDirClick?.("/"+arr.slice(0,i-1).join("/"))
+					<li>
-						}
+						<a 
-					}}>{e}</a>
+							className={`${last?"text-blue-500":""}`}
-				</li>))}
+							onClick={()=>{
+								if (!last){
+									props.onDirClick?.("/"+arr.slice(0,i-1).join("/"))
+								}
+							}}>{e}</a>
+					</li>
+				</div>
+			})}
 		</ul>
+
 	)
 }
 

src/components/CreateDirButton.tsx

@@ -0,0 +1,65 @@
+import React, { useRef } from "react"
+import { useEffect } from "react"
+import { useState } from "react"
+import { MdCreateNewFolder } from "react-icons/md"
+
+interface Props {
+    onPressed?: (dirName: string)=>void
+}
+
+const CreateDirButton: React.FC<Props> = (props) => {
+    
+	const [name,setName] = useState("")
+	const [show,setShow] = useState(false)
+	const input = useRef<HTMLInputElement>(null)
+
+	useEffect(()=>{
+		if(show){
+			input.current?.focus()
+		}
+	},[show])
+
+	return (
+		<div>
+			<button
+				onClick={()=>{
+					setShow(!show)
+
+				}}
+			>
+				<MdCreateNewFolder size="40"/>
+			</button>
+			<div className={`${!show?"hidden":""} flex`}>
+				<form 
+					onSubmit={(e)=>{
+						e.preventDefault()
+						props.onPressed?.(name)
+						setName("")
+						setShow(false)
+					}}>
+					<input
+						type="text"
+						onChange={(e)=>setName(e.target.value)}
+						value={name}
+						ref={input}
+						onBlur={()=>{
+							setShow(false)
+							setName("")
+						}}
+					/>
+					{/* <button 
+						onClick={()=>{
+							props.onPressed?.(name)
+							setName("")
+							setShow(false)
+						}}
+					>
+						Create
+					</button> */}
+				</form>
+			</div>
+		</div>
+	)
+}
+
+export default CreateDirButton

src/components/DirectoryElement.tsx

@@ -1,6 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { Directory } from "../generated/graphql"
+import { MdFolderOpen } from "react-icons/md"
 
 interface Props {
     dir: Directory
@@ -10,7 +11,7 @@ const DirectoryElement: React.FC<Props> = (props) => {
 	return (
 		<>
 			<td>
-				📂 {props.dir.name}
+				<MdFolderOpen className="inline"/> {props.dir.name}
 			</td>
 			<td>
 			</td>

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

@@ -2,8 +2,9 @@ import React from "react"
 import { useState } from "react"
 import { useContextMenu } from "react-contexify"
 import uploadFile from "../functions/uploadFile"
-import { useDeleteFileMutation, useOpenDirQuery } from "../generated/graphql"
+import { useCopyMutation, useCreateDirMutation, useDeleteFileMutation, useMoveMutation, useOpenDirQuery } from "../generated/graphql"
 import Breadcrum from "./Breadcrum"
+import CreateDirButton from "./CreateDirButton"
 import DragAndDrop from "./DragAndDrop"
 import FileBrowserContextMenu, { Action, CONTEXT_MENU_DIR, CONTEXT_MENU_FILE } from "./FileBrowserContextMenu"
 import FileBrowserElement from "./FileBrowserElement"
@@ -15,7 +16,13 @@ const FileBrowser: React.FC = () => {
 	const [openFileId, setOpenFileId] = useState("")
 	const [showFile, setShowFile] = useState(false)
 
+	const [srcID,setSrcID] = useState("")
+	const [pasteAction,setPasteAction] = useState<Action>()
+
 	const [deleteMutation] = useDeleteFileMutation()
+	const [copyMutation] = useCopyMutation()
+	const [moveMutation] = useMoveMutation()
+	const [createDirMutation] = useCreateDirMutation()
 
 	const { show: showFileContext } = useContextMenu({
 		id: CONTEXT_MENU_FILE,
@@ -25,7 +32,7 @@ const FileBrowser: React.FC = () => {
 		id: CONTEXT_MENU_DIR,
 	})
 
-	const { data, loading } = useOpenDirQuery({
+	const { data, loading, refetch: refetchDir } = useOpenDirQuery({
 		variables:{
 			path
 		}
@@ -39,6 +46,7 @@ const FileBrowser: React.FC = () => {
 		}
 
 		await Promise.all(wait)
+		refetchDir()
 	}
 
 	function openFileContextMenu(e: React.MouseEvent, id: string) {
@@ -59,13 +67,28 @@ const FileBrowser: React.FC = () => {
 		})
 	}
 
-	function onContextSelect(action:Action, id: string) {
+	async function onContextSelect(action:Action, id: string) {
-		console.debug(action)
 		switch (action) {
 		case Action.FileDelete:
-			deleteMutation({variables:{id}})
+			await deleteMutation({variables:{id}})
+			refetchDir()
+			break
+		case Action.FileCopy:
+		case Action.FileMove:
+			setSrcID(id)
+			setPasteAction(action)
+			break
+		case Action.FilePaste:
+			if (pasteAction === Action.FileCopy){
+				await copyMutation({variables:{src:srcID,dest:path}})
+				refetchDir()
+			}
+
+			if (pasteAction === Action.FileMove){
+				await moveMutation({variables:{src:srcID,dest:path}})
+				refetchDir()
+			}
 			break
-		
 		default:
 			break
 		}
@@ -75,31 +98,46 @@ const FileBrowser: React.FC = () => {
 		<div>
 			<FileBrowserContextMenu
 				onSelect={onContextSelect}
+				pasteActive={!!srcID}
 			/>
 			<DragAndDrop
 				handleDrop={async (files)=>{
 					await handleDrop(files)
 				}}
 			>
-				<FileUploadButton 
+				<div className="flex justify-between">
-					onUpload={(files)=>handleDrop(files)}
+					<Breadcrum path={path} onDirClick={(newPath)=>{
-				/>
+						setPath(newPath)
-				<Breadcrum path={path} onDirClick={(newPath)=>{
+					}}/>
-					setPath(newPath)
+					<div className="ml-auto">
-				}}/>
+						<CreateDirButton 
+							onPressed={async (dirName)=>{
+								await createDirMutation({variables:{path:dirName}})
+								refetchDir()
+							}}
+						/>
+					</div>
+					<div>
+						<FileUploadButton 
+							onUpload={(files)=>handleDrop(files)}
+						/>
+					</div>
+
+				</div>
+
 				<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/FileBrowserContextMenu.tsx

@@ -1,16 +1,20 @@
 import React from "react"
-import { Item, ItemParams, Menu, Separator, Submenu } from "react-contexify"
+import { Item, ItemParams, Menu, Separator } from "react-contexify"
 
 
 export const CONTEXT_MENU_FILE = "CONTEXT_MENU_FILE"
 export const CONTEXT_MENU_DIR = "CONTEXT_MENU_DIR"
 
 export enum Action {
-	FileDelete
+	FileDelete,
+	FileCopy,
+	FilePaste,
+	FileMove
 }
 
 interface Props {
     onSelect?: (action: Action, id: string)=>void
+	pasteActive?: boolean
 }
 
 const FileBrowserContextMenu: React.FC<Props> = (props) => {
@@ -25,25 +29,16 @@ const FileBrowserContextMenu: React.FC<Props> = (props) => {
 		<>
 			<Menu id={CONTEXT_MENU_FILE} animation={false}>
 				<Item onClick={onClick} data={Action.FileDelete} >Delete</Item>
-				<Item onClick={onClick} data="item2" >Item 2</Item>
+				<Item onClick={onClick} data={Action.FileCopy} >Copy</Item>
+				<Item onClick={onClick} data={Action.FileMove} >Move</Item>
 				<Separator />
-				<Item disabled>Disabled</Item>
+				<Item onClick={onClick} data={Action.FilePaste} disabled={!props.pasteActive}>Paste</Item>
-				<Separator />
-				<Submenu label="Foobar">
-					<Item onClick={onClick}  >Sub Item 1</Item>
-					<Item onClick={onClick}  >Sub Item 2</Item>
-				</Submenu>
 			</Menu>
 			<Menu id={CONTEXT_MENU_DIR} animation={false}>
 				<Item onClick={onClick}  >Item 1</Item>
 				<Item onClick={onClick}  >Item 2</Item>
 				<Separator />
-				<Item disabled>Disabled</Item>
+				<Item onClick={onClick} data={Action.FilePaste} disabled={!props.pasteActive}>Paste</Item>
-				<Separator />
-				<Submenu label="Foobar">
-					<Item onClick={onClick}  >Sub Item 1</Item>
-					<Item onClick={onClick}  >Sub Item 2</Item>
-				</Submenu>
 			</Menu>
 		</>
 	)

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/FileElement.tsx

@@ -3,6 +3,7 @@ import PropTypes from "prop-types"
 import { File } from "../generated/graphql"
 import sizeToReadable from "../functions/sizeToReadable"
 import dateFormat from "../functions/dateFomat"
+import { FaRegFileAlt } from "react-icons/fa"
 
 interface Props {
     file: File
@@ -12,7 +13,7 @@ const FileElement: React.FC<Props> = (props) => {
 	return (
 		<>
 			<td>
-				📄 {props.file.name}
+				<FaRegFileAlt className="inline" /> {props.file.name}
 			</td>
 			<td>
 				{dateFormat(props.file.lastModified)}

src/components/FileUploadButton.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import { useRef } from "react"
+import { MdFileUpload } from "react-icons/md"
 
 interface Props {
     onUpload?: (files: FileList)=>void
@@ -12,9 +13,9 @@ const FileUploadButton: React.FC<Props> = (props) => {
 	return ( 
 		<>
 			<button onClick={()=>inputRef.current?.click()} >
-                Upload files
+				<MdFileUpload size="40"/>
 			</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/functions/sizeToReadable.ts

@@ -1,6 +1,7 @@
 function sizeToReadable(size: number): string {
 	const i = Math.floor(Math.log(size) / Math.log(1024))
-	return (size / Math.pow(1024, i)).toFixed(1) + " " + ["B", "kB", "MB", "GB", "TB"][i]
+	const num = (size / Math.pow(1024, i))
+	return (num.toFixed(1).endsWith("0")?num.toFixed(0):num.toFixed(1)) + " " + ["B", "kB", "MB", "GB", "TB"][i]
 
 }
 

src/functions/uploadFile.ts

@@ -1,8 +1,4 @@
 async function uploadFile(file:File,id: string): Promise<boolean> {
-	
-	console.debug(file)
-
-
 	const res = await fetch(`/api/file?${new URLSearchParams({id:id}).toString()}`,{
 		method: "POST",
 		headers: {

src/generated/graphql.tsx

@@ -43,6 +43,7 @@ export type File = {
 export type RootMutation = {
   __typename?: "RootMutation";
   copy?: Maybe<File>;
+  createDir: Directory;
   delete?: Maybe<Scalars["String"]>;
   move?: Maybe<File>;
 };
@@ -54,6 +55,11 @@ export type RootMutationCopyArgs = {
 };
 
 
+export type RootMutationCreateDirArgs = {
+  path: Scalars["ID"];
+};
+
+
 export type RootMutationDeleteArgs = {
   id: Scalars["ID"];
 };
@@ -86,6 +92,33 @@ export type RootQueryFilesArgs = {
   path: Scalars["String"];
 };
 
+export type CopyMutationVariables = Exact<{
+  src: Scalars["ID"];
+  dest: Scalars["ID"];
+}>;
+
+
+export type CopyMutation = (
+  { __typename?: "RootMutation" }
+  & { copy?: Maybe<(
+    { __typename?: "File" }
+    & Pick<File, "id">
+  )> }
+);
+
+export type CreateDirMutationVariables = Exact<{
+  path: Scalars["ID"];
+}>;
+
+
+export type CreateDirMutation = (
+  { __typename?: "RootMutation" }
+  & { createDir: (
+    { __typename?: "Directory" }
+    & Pick<Directory, "id">
+  ) }
+);
+
 export type DeleteFileMutationVariables = Exact<{
   id: Scalars["ID"];
 }>;
@@ -109,6 +142,20 @@ export type GetFileQuery = (
   )> }
 );
 
+export type MoveMutationVariables = Exact<{
+  src: Scalars["ID"];
+  dest: Scalars["ID"];
+}>;
+
+
+export type MoveMutation = (
+  { __typename?: "RootMutation" }
+  & { move?: Maybe<(
+    { __typename?: "File" }
+    & Pick<File, "id">
+  )> }
+);
+
 export type OpenDirQueryVariables = Exact<{
   path: Scalars["String"];
 }>;
@@ -126,6 +173,73 @@ export type OpenDirQuery = (
 );
 
 
+export const CopyDocument = gql`
+    mutation copy($src: ID!, $dest: ID!) {
+  copy(src: $src, dest: $dest) {
+    id
+  }
+}
+    `
+export type CopyMutationFn = Apollo.MutationFunction<CopyMutation, CopyMutationVariables>;
+
+/**
+ * __useCopyMutation__
+ *
+ * To run a mutation, you first call `useCopyMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useCopyMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [copyMutation, { data, loading, error }] = useCopyMutation({
+ *   variables: {
+ *      src: // value for 'src'
+ *      dest: // value for 'dest'
+ *   },
+ * });
+ */
+export function useCopyMutation(baseOptions?: Apollo.MutationHookOptions<CopyMutation, CopyMutationVariables>) {
+	const options = {...defaultOptions, ...baseOptions}
+	return Apollo.useMutation<CopyMutation, CopyMutationVariables>(CopyDocument, options)
+}
+export type CopyMutationHookResult = ReturnType<typeof useCopyMutation>;
+export type CopyMutationResult = Apollo.MutationResult<CopyMutation>;
+export type CopyMutationOptions = Apollo.BaseMutationOptions<CopyMutation, CopyMutationVariables>;
+export const CreateDirDocument = gql`
+    mutation createDir($path: ID!) {
+  createDir(path: $path) {
+    id
+  }
+}
+    `
+export type CreateDirMutationFn = Apollo.MutationFunction<CreateDirMutation, CreateDirMutationVariables>;
+
+/**
+ * __useCreateDirMutation__
+ *
+ * To run a mutation, you first call `useCreateDirMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useCreateDirMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [createDirMutation, { data, loading, error }] = useCreateDirMutation({
+ *   variables: {
+ *      path: // value for 'path'
+ *   },
+ * });
+ */
+export function useCreateDirMutation(baseOptions?: Apollo.MutationHookOptions<CreateDirMutation, CreateDirMutationVariables>) {
+	const options = {...defaultOptions, ...baseOptions}
+	return Apollo.useMutation<CreateDirMutation, CreateDirMutationVariables>(CreateDirDocument, options)
+}
+export type CreateDirMutationHookResult = ReturnType<typeof useCreateDirMutation>;
+export type CreateDirMutationResult = Apollo.MutationResult<CreateDirMutation>;
+export type CreateDirMutationOptions = Apollo.BaseMutationOptions<CreateDirMutation, CreateDirMutationVariables>;
 export const DeleteFileDocument = gql`
     mutation deleteFile($id: ID!) {
   delete(id: $id)
@@ -196,6 +310,40 @@ export function useGetFileLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<Ge
 export type GetFileQueryHookResult = ReturnType<typeof useGetFileQuery>;
 export type GetFileLazyQueryHookResult = ReturnType<typeof useGetFileLazyQuery>;
 export type GetFileQueryResult = Apollo.QueryResult<GetFileQuery, GetFileQueryVariables>;
+export const MoveDocument = gql`
+    mutation move($src: ID!, $dest: ID!) {
+  move(src: $src, dest: $dest) {
+    id
+  }
+}
+    `
+export type MoveMutationFn = Apollo.MutationFunction<MoveMutation, MoveMutationVariables>;
+
+/**
+ * __useMoveMutation__
+ *
+ * To run a mutation, you first call `useMoveMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useMoveMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [moveMutation, { data, loading, error }] = useMoveMutation({
+ *   variables: {
+ *      src: // value for 'src'
+ *      dest: // value for 'dest'
+ *   },
+ * });
+ */
+export function useMoveMutation(baseOptions?: Apollo.MutationHookOptions<MoveMutation, MoveMutationVariables>) {
+	const options = {...defaultOptions, ...baseOptions}
+	return Apollo.useMutation<MoveMutation, MoveMutationVariables>(MoveDocument, options)
+}
+export type MoveMutationHookResult = ReturnType<typeof useMoveMutation>;
+export type MoveMutationResult = Apollo.MutationResult<MoveMutation>;
+export type MoveMutationOptions = Apollo.BaseMutationOptions<MoveMutation, MoveMutationVariables>;
 export const OpenDirDocument = gql`
     query openDir($path: String!) {
   files(path: $path) {

src/graphql/copy.graphql

@@ -0,0 +1,5 @@
+mutation copy($src: ID!, $dest: ID!) {
+  copy(src: $src,dest: $dest){
+    id
+  }
+}

src/graphql/createDir.graphql

@@ -0,0 +1,5 @@
+mutation createDir($path: ID!){
+  createDir(path:$path){
+    id
+  }
+}

src/graphql/move.graphql

@@ -0,0 +1,5 @@
+mutation move($src: ID!, $dest: ID!) {
+  move(src: $src,dest: $dest){
+    id
+  }
+}

src/index.scss

@@ -1,2 +1,3 @@
-
+@tailwind base;
-@import "node_modules/spectre.css/src/spectre";
+@tailwind components;
+@tailwind utilities;

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

tailwind.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+	purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
+	darkMode: false, // or 'media' or 'class'
+	theme: {
+		extend: {},
+	},
+	variants: {
+		extend: {},
+	},
+	plugins: [],
+}

yarn.lock

@@ -1330,6 +1330,16 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
+"@craco/craco@^6.2.0":
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/@craco/craco/-/craco-6.2.0.tgz#93847ae20899f5e810359443f2055bcf2b1a584e"
+  integrity sha512-kLc4GSdgR9D5JiZmSxtzbvBKcUFSJqMXImRjjYf5pacwiyAs3XfQwai7T+pExfLQNUnytgkL8jRFUJeYrkVr7g==
+  dependencies:
+    cross-spawn "^7.0.0"
+    lodash "^4.17.15"
+    semver "^7.3.2"
+    webpack-merge "^4.2.2"
+
 "@csstools/convert-colors@^1.4.0":
   version "1.4.0"
   resolved "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz"
@@ -3003,7 +3013,16 @@ acorn-jsx@^5.3.1:
   resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn-walk@^7.1.1:
+acorn-node@^1.6.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/acorn-node/-/acorn-node-1.8.2.tgz#114c95d64539e53dede23de8b9d96df7c7ae2af8"
+  integrity sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==
+  dependencies:
+    acorn "^7.0.0"
+    acorn-walk "^7.0.0"
+    xtend "^4.0.2"
+
+acorn-walk@^7.0.0, acorn-walk@^7.1.1:
   version "7.2.0"
   resolved "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz"
   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
@@ -3013,7 +3032,7 @@ acorn@^6.4.1:
   resolved "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz"
   integrity sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==
 
-acorn@^7.1.0, acorn@^7.1.1, acorn@^7.4.0:
+acorn@^7.0.0, acorn@^7.1.0, acorn@^7.1.1, acorn@^7.4.0:
   version "7.4.1"
   resolved "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
@@ -3435,6 +3454,11 @@ arg@^4.1.0:
   resolved "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz"
   integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==
 
+arg@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.0.tgz#a20e2bb5710e82950a516b3f933fee5ed478be90"
+  integrity sha512-4P8Zm2H+BRS+c/xX1LrHw0qKpEhdlZjLCgWy+d78T9vqa2Z2SiD2wMrYuWIAFy5IZUD7nnNXroRttz+0RzlrzQ==
+
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz"
@@ -3646,7 +3670,7 @@ auto-bind@~4.0.0:
   resolved "https://registry.npmjs.org/auto-bind/-/auto-bind-4.0.0.tgz"
   integrity sha512-Hdw8qdNiqdJ8LqT0iK0sVzkFbzg6fhnQqqfWhBDxcHZvU75+B+ayzTy8x+k5Ix0Y92XOhOUlx74ps+bA6BeYMQ==
 
-autoprefixer@^9.6.1:
+autoprefixer@^9, autoprefixer@^9.6.1:
   version "9.8.6"
   resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz"
   integrity sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==
@@ -4222,7 +4246,7 @@ bytes@3.0.0:
   resolved "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz"
   integrity sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=
 
-bytes@3.1.0:
+bytes@3.1.0, bytes@^3.0.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz"
   integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
@@ -4339,6 +4363,11 @@ camel-case@4.1.2, camel-case@^4.1.1, camel-case@^4.1.2:
     pascal-case "^3.1.2"
     tslib "^2.0.3"
 
+camelcase-css@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
+  integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
+
 camelcase-keys@^6.2.2:
   version "6.2.2"
   resolved "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz"
@@ -4443,6 +4472,14 @@ chalk@^4.0.0, chalk@^4.1.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+chalk@^4.1.1:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 change-case-all@1.0.14:
   version "1.0.14"
   resolved "https://registry.npmjs.org/change-case-all/-/change-case-all-1.0.14.tgz"
@@ -4817,7 +4854,7 @@ color-string@^1.6.0:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
 
-color@^3.0.0:
+color@^3.0.0, color@^3.2.0:
   version "3.2.1"
   resolved "https://registry.npmjs.org/color/-/color-3.2.1.tgz"
   integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==
@@ -4852,6 +4889,11 @@ commander@^4.1.1:
   resolved "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz"
   integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
 
+commander@^6.0.0:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
+  integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
+
 common-tags@1.8.0, common-tags@^1.5.1, common-tags@^1.8.0:
   version "1.8.0"
   resolved "https://registry.npmjs.org/common-tags/-/common-tags-1.8.0.tgz"
@@ -5255,6 +5297,11 @@ css-tree@^1.1.2:
     mdn-data "2.0.14"
     source-map "^0.6.1"
 
+css-unit-converter@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21"
+  integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==
+
 css-what@^3.2.1:
   version "3.4.2"
   resolved "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz"
@@ -5575,6 +5622,11 @@ define-property@^2.0.2:
     is-descriptor "^1.0.2"
     isobject "^3.0.1"
 
+defined@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+  integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=
+
 del@^4.1.1:
   version "4.1.1"
   resolved "https://registry.npmjs.org/del/-/del-4.1.1.tgz"
@@ -5644,6 +5696,20 @@ detect-port-alt@1.1.6:
     address "^1.0.1"
     debug "^2.6.0"
 
+detective@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.0.tgz#feb2a77e85b904ecdea459ad897cc90a99bd2a7b"
+  integrity sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==
+  dependencies:
+    acorn-node "^1.6.1"
+    defined "^1.0.0"
+    minimist "^1.1.1"
+
+didyoumean@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
+  integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
+
 diff-sequences@^26.6.2:
   version "26.6.2"
   resolved "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.6.2.tgz"
@@ -5670,6 +5736,11 @@ dir-glob@^3.0.1:
   dependencies:
     path-type "^4.0.0"
 
+dlv@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
+  integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
+
 dns-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz"
@@ -6549,7 +6620,7 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@^3.1.1:
+fast-glob@^3.1.1, fast-glob@^3.2.7:
   version "3.2.7"
   resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz"
   integrity sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==
@@ -6849,6 +6920,15 @@ from2@^2.1.0:
     inherits "^2.0.1"
     readable-stream "^2.0.0"
 
+fs-extra@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.0.0.tgz#9ff61b655dde53fb34a82df84bb214ce802e17c1"
+  integrity sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
 fs-extra@^7.0.0:
   version "7.0.1"
   resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz"
@@ -7050,6 +7130,13 @@ glob-parent@^5.1.2, glob-parent@~5.1.2:
   dependencies:
     is-glob "^4.0.1"
 
+glob-parent@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.1.tgz#42054f685eb6a44e7a7d189a96efa40a54971aa7"
+  integrity sha512-kEVjS71mQazDBHKcsq4E9u/vUzaLcw1A8EtUeydawvIWQCJM0qQ08G1H7/XTjFUulla6XQiDOG6MXSaG0HDKog==
+  dependencies:
+    is-glob "^4.0.1"
+
 glob@7.1.5:
   version "7.1.5"
   resolved "https://registry.npmjs.org/glob/-/glob-7.1.5.tgz"
@@ -7489,6 +7576,11 @@ html-minifier-terser@^5.0.1:
     relateurl "^0.2.7"
     terser "^4.6.3"
 
+html-tags@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140"
+  integrity sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==
+
 html-webpack-plugin@4.5.0:
   version "4.5.0"
   resolved "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.5.0.tgz"
@@ -7691,6 +7783,13 @@ import-cwd@^2.0.0:
   dependencies:
     import-from "^2.1.0"
 
+import-cwd@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-3.0.0.tgz#20845547718015126ea9b3676b7592fb8bd4cf92"
+  integrity sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==
+  dependencies:
+    import-from "^3.0.0"
+
 import-fresh@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz"
@@ -7707,7 +7806,7 @@ import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1:
     parent-module "^1.0.0"
     resolve-from "^4.0.0"
 
-import-from@3.0.0:
+import-from@3.0.0, import-from@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/import-from/-/import-from-3.0.0.tgz"
   integrity sha512-CiuXOFFSzkU5x/CR0+z7T91Iht4CXgfCxVOFRhh2Zyhg5wOpWvvDLQUsWl+gcN+QscYBjez8hDCt85O7RLDttQ==
@@ -9108,6 +9207,11 @@ levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+lilconfig@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.3.tgz#68f3005e921dafbd2a2afb48379986aa6d2579fd"
+  integrity sha512-EHKqr/+ZvdKCifpNrJCKxBTgk5XupZA3y/aCPY9mxfgBzmgh93Mt/WqjjQ38oMxXuvDokaKiM3lAgvSH2sjtHg==
+
 lines-and-columns@^1.1.6:
   version "1.1.6"
   resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz"
@@ -9333,6 +9437,11 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "^3.0.0"
 
+lodash.topath@^4.5.2:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/lodash.topath/-/lodash.topath-4.5.2.tgz#3616351f3bba61994a0931989660bd03254fd009"
+  integrity sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak=
+
 lodash.truncate@^4.4.2:
   version "4.4.2"
   resolved "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz"
@@ -9773,6 +9882,11 @@ mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5, mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.5"
 
+modern-normalize@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-1.1.0.tgz#da8e80140d9221426bd4f725c6e11283d34f90b7"
+  integrity sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==
+
 moment@2.29.1, moment@^2.22.1:
   version "2.29.1"
   resolved "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz"
@@ -9900,6 +10014,13 @@ no-case@^3.0.4:
     lower-case "^2.0.2"
     tslib "^2.0.3"
 
+node-emoji@^1.8.1:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.11.0.tgz#69a0150e6946e2f115e9d7ea4df7971e2628301c"
+  integrity sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==
+  dependencies:
+    lodash "^4.17.21"
+
 node-fetch@2.6.1, node-fetch@^2.6.1:
   version "2.6.1"
   resolved "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz"
@@ -10149,6 +10270,11 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
+object-hash@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.2.0.tgz#5ad518581eefc443bd763472b8ff2e9c2c0d54a5"
+  integrity sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==
+
 object-inspect@^1.10.3, object-inspect@^1.9.0:
   version "1.11.0"
   resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.11.0.tgz"
@@ -10938,6 +11064,16 @@ postcss-font-variant@^4.0.0:
   dependencies:
     postcss "^7.0.2"
 
+postcss-functions@^3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-functions/-/postcss-functions-3.0.0.tgz#0e94d01444700a481de20de4d55fb2640564250e"
+  integrity sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4=
+  dependencies:
+    glob "^7.1.2"
+    object-assign "^4.1.1"
+    postcss "^6.0.9"
+    postcss-value-parser "^3.3.0"
+
 postcss-gap-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-2.0.0.tgz"
@@ -10960,6 +11096,14 @@ postcss-initial@^3.0.0:
   dependencies:
     postcss "^7.0.2"
 
+postcss-js@^2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-2.0.3.tgz#a96f0f23ff3d08cec7dc5b11bf11c5f8077cdab9"
+  integrity sha512-zS59pAk3deu6dVHyrGqmC3oDXBdNdajk4k1RyxeVXCrcEDBUBHoIhE4QTsmhxgzXxsaqFDAkUZfmMa5f/N/79w==
+  dependencies:
+    camelcase-css "^2.0.1"
+    postcss "^7.0.18"
+
 postcss-lab-function@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-2.0.1.tgz"
@@ -10977,6 +11121,15 @@ postcss-load-config@^2.0.0:
     cosmiconfig "^5.0.0"
     import-cwd "^2.0.0"
 
+postcss-load-config@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.0.tgz#d39c47091c4aec37f50272373a6a648ef5e97829"
+  integrity sha512-ipM8Ds01ZUophjDTQYSVP70slFSYg3T0/zyfII5vzhN6V57YSxMgG5syXuwi5VtS8wSf3iL30v0uBdoIVx4Q0g==
+  dependencies:
+    import-cwd "^3.0.0"
+    lilconfig "^2.0.3"
+    yaml "^1.10.2"
+
 postcss-loader@3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/postcss-loader/-/postcss-loader-3.0.0.tgz"
@@ -11096,6 +11249,14 @@ postcss-modules-values@^3.0.0:
     icss-utils "^4.0.0"
     postcss "^7.0.6"
 
+postcss-nested@^4:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-4.2.3.tgz#c6f255b0a720549776d220d00c4b70cd244136f6"
+  integrity sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==
+  dependencies:
+    postcss "^7.0.32"
+    postcss-selector-parser "^6.0.2"
+
 postcss-nesting@^7.0.0:
   version "7.0.1"
   resolved "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-7.0.1.tgz"
@@ -11345,7 +11506,7 @@ postcss-selector-parser@^5.0.0-rc.3, postcss-selector-parser@^5.0.0-rc.4:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
+postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.6:
   version "6.0.6"
   resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz"
   integrity sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg==
@@ -11371,7 +11532,7 @@ postcss-unique-selectors@^4.0.1:
     postcss "^7.0.0"
     uniqs "^2.0.0"
 
-postcss-value-parser@^3.0.0:
+postcss-value-parser@^3.0.0, postcss-value-parser@^3.3.0:
   version "3.3.1"
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
@@ -11390,7 +11551,7 @@ postcss-values-parser@^2.0.0, postcss-values-parser@^2.0.1:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss@7.0.36, postcss@^7, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
+postcss@7.0.36, postcss@^7, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.18, postcss@^7.0.2, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
   version "7.0.36"
   resolved "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz"
   integrity sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==
@@ -11399,7 +11560,16 @@ postcss@7.0.36, postcss@^7, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, pos
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
-postcss@^8.1.0:
+postcss@^6.0.9:
+  version "6.0.23"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
+  integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
+  dependencies:
+    chalk "^2.4.1"
+    source-map "^0.6.1"
+    supports-color "^5.4.0"
+
+postcss@^8.1.0, postcss@^8.2.1:
   version "8.3.6"
   resolved "https://registry.npmjs.org/postcss/-/postcss-8.3.6.tgz"
   integrity sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A==
@@ -11451,6 +11621,11 @@ pretty-format@^26.0.0, pretty-format@^26.6.0, pretty-format@^26.6.2:
     ansi-styles "^4.0.0"
     react-is "^17.0.1"
 
+pretty-hrtime@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
+  integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz"
@@ -11585,6 +11760,16 @@ punycode@^2.1.0, punycode@^2.1.1:
   resolved "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
+purgecss@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-4.0.3.tgz#8147b429f9c09db719e05d64908ea8b672913742"
+  integrity sha512-PYOIn5ibRIP34PBU9zohUcCI09c7drPJJtTDAc0Q6QlRz2/CHQ8ywGLdE7ZhxU2VTqB7p5wkvj5Qcm05Rz3Jmw==
+  dependencies:
+    commander "^6.0.0"
+    glob "^7.0.0"
+    postcss "^8.2.1"
+    postcss-selector-parser "^6.0.2"
+
 q@^1.1.2:
   version "1.5.1"
   resolved "https://registry.npmjs.org/q/-/q-1.5.1.tgz"
@@ -11655,6 +11840,11 @@ quick-lru@^4.0.1:
   resolved "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz"
   integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
 
+quick-lru@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
+  integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
+
 raf@^3.4.1:
   version "3.4.1"
   resolved "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz"
@@ -11765,6 +11955,11 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
+react-icons@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.2.0.tgz#6dda80c8a8f338ff96a1851424d63083282630d0"
+  integrity sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ==
+
 react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@@ -11967,6 +12162,14 @@ redeyed@~2.1.0:
   dependencies:
     esprima "~4.0.0"
 
+reduce-css-calc@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz#7ef8761a28d614980dc0c982f772c93f7a99de03"
+  integrity sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==
+  dependencies:
+    css-unit-converter "^1.1.1"
+    postcss-value-parser "^3.3.0"
+
 regenerate-unicode-properties@^8.2.0:
   version "8.2.0"
   resolved "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz"
@@ -12971,11 +13174,6 @@ spdy@^4.0.2:
     select-hose "^2.0.0"
     spdy-transport "^3.0.0"
 
-spectre.css@^0.5.9:
-  version "0.5.9"
-  resolved "https://registry.yarnpkg.com/spectre.css/-/spectre.css-0.5.9.tgz#86c732d093036d9fdc0a2ba570f005e4023ae6ca"
-  integrity sha512-9jUqwZmCnvflrxFGcK+ize43TvjwDjqMwZPVubEtSIHzvinH0TBUESm1LcOJx3Ur7bdPaeOHQIjOqBl1Y5kLFw==
-
 split-on-first@^1.0.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz"
@@ -13448,6 +13646,46 @@ table@^6.0.9:
     string-width "^4.2.0"
     strip-ansi "^6.0.0"
 
+"tailwindcss@npm:@tailwindcss/postcss7-compat":
+  version "2.2.7"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/postcss7-compat/-/postcss7-compat-2.2.7.tgz#5e7e436ed0f4e0ed945d35b1f87189daa681dd1f"
+  integrity sha512-1QkWUEeLV1AoNipMCE6IlL7XYScGb+DAzaXy35ooMDvl0G8kCMHBNqGxyVAnTcK8gyJNUzkKXExkUnbjAndd/g==
+  dependencies:
+    arg "^5.0.0"
+    autoprefixer "^9"
+    bytes "^3.0.0"
+    chalk "^4.1.1"
+    chokidar "^3.5.2"
+    color "^3.2.0"
+    cosmiconfig "^7.0.0"
+    detective "^5.2.0"
+    didyoumean "^1.2.2"
+    dlv "^1.1.3"
+    fast-glob "^3.2.7"
+    fs-extra "^10.0.0"
+    glob-parent "^6.0.0"
+    html-tags "^3.1.0"
+    is-glob "^4.0.1"
+    lodash "^4.17.21"
+    lodash.topath "^4.5.2"
+    modern-normalize "^1.1.0"
+    node-emoji "^1.8.1"
+    normalize-path "^3.0.0"
+    object-hash "^2.2.0"
+    postcss "^7"
+    postcss-functions "^3"
+    postcss-js "^2"
+    postcss-load-config "^3.1.0"
+    postcss-nested "^4"
+    postcss-selector-parser "^6.0.6"
+    postcss-value-parser "^4.1.0"
+    pretty-hrtime "^1.0.3"
+    purgecss "^4.0.3"
+    quick-lru "^5.1.1"
+    reduce-css-calc "^2.1.8"
+    resolve "^1.20.0"
+    tmp "^0.2.1"
+
 tapable@^1.0.0, tapable@^1.1.3:
   version "1.1.3"
   resolved "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz"
@@ -13598,6 +13836,13 @@ tmp@^0.0.33:
   dependencies:
     os-tmpdir "~1.0.2"
 
+tmp@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
+  integrity sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==
+  dependencies:
+    rimraf "^3.0.0"
+
 tmpl@1.0.x:
   version "1.0.4"
   resolved "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz"
@@ -14376,6 +14621,13 @@ webpack-manifest-plugin@2.2.0:
     object.entries "^1.1.0"
     tapable "^1.0.0"
 
+webpack-merge@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.2.2.tgz#a27c52ea783d1398afd2087f547d7b9d2f43634d"
+  integrity sha512-TUE1UGoTX2Cd42j3krGYqObZbOD+xF7u28WB7tfUordytSjbWTIjK/8V0amkBfTYN4/pB/GIDlJZZ657BGG19g==
+  dependencies:
+    lodash "^4.17.15"
+
 webpack-sources@^1.1.0, webpack-sources@^1.3.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3:
   version "1.4.3"
   resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz"
@@ -14762,7 +15014,7 @@ xmlchars@^2.2.0:
   resolved "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
-xtend@^4.0.0, xtend@~4.0.1:
+xtend@^4.0.0, xtend@^4.0.2, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
@@ -14792,7 +15044,7 @@ yaml-ast-parser@^0.0.43:
   resolved "https://registry.npmjs.org/yaml-ast-parser/-/yaml-ast-parser-0.0.43.tgz"
   integrity sha512-2PTINUwsRqSd+s8XxKaJWQlUuEMHJQyEuh2edBbW8KNJz0SJPwUSD2zRWqezFEdN7IzAgeuYHFUCF7o8zRdZ0A==
 
-yaml@^1.10.0, yaml@^1.7.2:
+yaml@^1.10.0, yaml@^1.10.2, yaml@^1.7.2:
   version "1.10.2"
   resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==