added react icons

package.json

@@ -17,6 +17,7 @@
     "react": "^17.0.2",
     "react-contexify": "^5.0.0",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.2.0",
     "react-scripts": "4.0.3",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"

src/components/Breadcrum.tsx

@@ -21,18 +21,18 @@ const Breadcrum: React.FC<Props> = (props) => {
 			</li>
 			{parts.map((e,i,arr)=>{
 				const last = i == arr.length - 1
-				return (<>
+				return <div key={e} className="inline-flex items-center">
 					<BreadcrumImage />
-					<li key={e} className="inline-flex items-center">
+					<li>
 						<a 
-							className={last?"text-blue-500":""}
+							className={`${last?"text-blue-500":""}`}
 							onClick={()=>{
 								if (!last){
 									props.onDirClick?.("/"+arr.slice(0,i-1).join("/"))
 								}
 							}}>{e}</a>
 					</li>
-				</>)
+				</div>
 			})}
 		</ul>
 

src/components/CreateDirButton.tsx

@@ -1,5 +1,7 @@
-import React from "react"
+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
@@ -8,28 +10,53 @@ interface Props {
 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>
+			<button
-                Create Dir
+				onClick={()=>{
+					setShow(!show)
+
+				}}
+			>
+				<MdCreateNewFolder size="40"/>
 			</button>
-			<div>
+			<div className={`${!show?"hidden":""} flex`}>
-				<input
+				<form 
-					type="text"
+					onSubmit={(e)=>{
-					onChange={(e)=>{
+						e.preventDefault()
-						setName(e.target.value)
-					}}
-					value={name}
-				/>
-				<button 
-					onClick={()=>{
 						props.onPressed?.(name)
 						setName("")
-					}}
+						setShow(false)
-				>
+					}}>
-                    Create
+					<input
-				</button>
+						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>
 	)

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

@@ -105,18 +105,26 @@ const FileBrowser: React.FC = () => {
 					await handleDrop(files)
 				}}
 			>
-				<FileUploadButton 
+				<div className="flex justify-between">
-					onUpload={(files)=>handleDrop(files)}
+					<Breadcrum path={path} onDirClick={(newPath)=>{
-				/>
+						setPath(newPath)
-				<CreateDirButton 
+					}}/>
-					onPressed={async (dirName)=>{
+					<div className="ml-auto">
-						await createDirMutation({variables:{path:dirName}})
+						<CreateDirButton 
-						refetchDir()
+							onPressed={async (dirName)=>{
-					}}
+								await createDirMutation({variables:{path:dirName}})
-				/>
+								refetchDir()
-				<Breadcrum path={path} onDirClick={(newPath)=>{
+							}}
-					setPath(newPath)
+						/>
-				}}/>
+					</div>
+					<div>
+						<FileUploadButton 
+							onUpload={(files)=>handleDrop(files)}
+						/>
+					</div>
+
+				</div>
+
 				<div>
 					{loading && 
 						<div>Loading...</div> // TODO: center

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,7 +13,7 @@ const FileUploadButton: React.FC<Props> = (props) => {
 	return ( 
 		<>
 			<button onClick={()=>inputRef.current?.click()} >
-                Upload files
+				<MdFileUpload size="40"/>
 			</button>
 			<input type="file" multiple className="hidden" ref={inputRef} onInput={()=>{
 				if (inputRef.current && inputRef.current.files){

yarn.lock

@@ -11955,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"
@@ -13169,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"