added react icons

src/components/CreateDirButton.tsx

@@ -1,6 +1,7 @@
 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
@@ -26,7 +27,7 @@ const CreateDirButton: React.FC<Props> = (props) => {
 
 				}}
 			>
-                Create Dir
+				<MdCreateNewFolder size="40"/>
 			</button>
 			<div className={`${!show?"hidden":""} flex`}>
 				<form 

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 
-					onUpload={(files)=>handleDrop(files)}
-				/>
-				<CreateDirButton 
-					onPressed={async (dirName)=>{
-						await createDirMutation({variables:{path:dirName}})
-						refetchDir()
-					}}
-				/>
-				<Breadcrum path={path} onDirClick={(newPath)=>{
-					setPath(newPath)
-				}}/>
+				<div className="flex justify-between">
+					<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>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){