Merge pull request #13 from AntlerVC/develop

Develop

src/components/Fields/File.tsx

@@ -5,7 +5,8 @@ import useUploader from "../../hooks/useFiretable/useUploader";
 import { FieldType } from ".";
 import Chip from "@material-ui/core/Chip";
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
-
+import IconButton from "@material-ui/core/IconButton";
+import AddIcon from "@material-ui/icons/AddBox";
 // TODO:  indicate state completion / error
 // TODO: Create an interface for props
 
@@ -63,7 +64,9 @@ const File = (props: Props) => {
       ) : isDragActive ? (
         <p>Drop the files here ...</p>
       ) : (
-        <p>click to select files</p>
+        <IconButton>
+          <AddIcon />
+        </IconButton>
       )}
     </div>
   );

src/components/Fields/Image.tsx

@@ -3,6 +3,8 @@ import { useDropzone } from "react-dropzone";
 import useUploader from "../../hooks/useFiretable/useUploader";
 
 import { FieldType } from ".";
+import IconButton from "@material-ui/core/IconButton";
+import AddIcon from "@material-ui/icons/AddAPhoto";
 // TODO:  indicate state completion / error
 // TODO: Create an interface for props
 
@@ -45,7 +47,9 @@ const Image = (props: Props) => {
       ) : isDragActive ? (
         <p>Drop the files here ...</p>
       ) : (
-        <p>Drag 'n' drop some files here, or click to select files</p>
+        <IconButton>
+          <AddIcon />
+        </IconButton>
       )}
     </div>
   );

src/components/Fields/index.tsx

@@ -6,6 +6,7 @@ import LongTextIcon from "@material-ui/icons/Notes";
 import PhoneIcon from "@material-ui/icons/Phone";
 import ImageIcon from "@material-ui/icons/Photo";
 import FileIcon from "@material-ui/icons/InsertDriveFileOutlined";
+import AttachmentIcon from "@material-ui/icons/AttachFile";
 import DateIcon from "@material-ui/icons/CalendarToday";
 import TimeIcon from "@material-ui/icons/AccessTime";
 import RatingIcon from "@material-ui/icons/StarHalf";
@@ -45,7 +46,7 @@ export const FIELDS = [
   { icon: <URLIcon />, name: "URL", type: FieldType.url },
   { icon: <RatingIcon />, name: "Rating", type: FieldType.rating },
   { icon: <ImageIcon />, name: "Image", type: FieldType.image },
-  { icon: <FileIcon />, name: "File", type: FieldType.file },
+  { icon: <AttachmentIcon />, name: "File", type: FieldType.file },
   { icon: <FileIcon />, name: "Single Select", type: FieldType.singleSelect },
   { icon: <FileIcon />, name: "Multi Select", type: FieldType.multiSelect },
   { icon: <FileIcon />, name: "Doc Select", type: FieldType.documentSelect },