From 084f666ff17bfd92631589d8c818ce7bc580a032 Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Fri, 3 Apr 2020 13:57:35 +0200
Subject: [PATCH] update FileCollection: File Entry

---
 client/src/components/FileCollection.tsx | 53 +++++++++++++++++-------
 1 file changed, 38 insertions(+), 15 deletions(-)

diff --git a/client/src/components/FileCollection.tsx b/client/src/components/FileCollection.tsx
index 7f27d07..69237df 100644
--- a/client/src/components/FileCollection.tsx
+++ b/client/src/components/FileCollection.tsx
@@ -1,4 +1,13 @@
 import React, { FC } from "react";
+import { createStyles, Theme, makeStyles } from "@material-ui/core/styles";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemText from "@material-ui/core/ListItemText";
+import ListItemAvatar from "@material-ui/core/ListItemAvatar";
+import Avatar from "@material-ui/core/Avatar";
+import ImageIcon from "@material-ui/icons/Image";
+import WorkIcon from "@material-ui/icons/Work";
+import BeachAccessIcon from "@material-ui/icons/BeachAccess";
 import { AppFile } from "../types/AppFile";
 
 type IProps = {
@@ -6,10 +15,21 @@ type IProps = {
   filterText: string;
 };
 
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: "100%",
+      maxWidth: 360,
+      backgroundColor: theme.palette.background.paper
+    }
+  })
+);
+
 export const FileCollection: FC<IProps> = ({ files, filterText }) => {
+  const classes = useStyles();
   return (
-    <>
-      <ul className="collection">
+
+    <List className={classes.root}>
         {files.length === 0 ? (
           <FileEntry />
         ) : (
@@ -21,8 +41,8 @@ export const FileCollection: FC<IProps> = ({ files, filterText }) => {
             )
             .map((file: AppFile) => <FileEntry file={file} key={file.id} />)
         )}
-      </ul>
-    </>
+      </List>
+
   );
 };
 
@@ -32,16 +52,19 @@ type IFProps = {
 
 export const FileEntry: FC<IFProps> = ({ file }) => {
   return (
-    <li className="collection-item avatar">
-      {/* <img src={require("../images/user_1.jpg")} alt="" className="circle" /> */}
-      <i className="material-icons circle indigo lighten-1">folder</i>
-      <span className="title">{file ? file.name : "Add your first file"}</span>
-      <p>
-        {file ? file.size : 0}kb {file ? file.format : "pdf"}
-      </p>
-      <a href="#!" className="secondary-content">
-        <i className="material-icons">more_vert</i>
-      </a>
-    </li>
+    <ListItem>
+    <ListItemAvatar>
+      <Avatar>
+      <WorkIcon />
+      </Avatar>
+    </ListItemAvatar>
+    <ListItemText primary={file ? file.name : "Add your first file"} secondary={`${file ? file.size : 0}kb ${file ? file.format : "pdf"}`} />
+  </ListItem>
   );
 };
+
+
+
+
+
+