feat: add icons and get upload component up to spec

new-lamassu-admin/src/pages/Customers/components/Upload.js

@@ -1,15 +1,18 @@
 import { makeStyles } from '@material-ui/core/styles'
+import { useFormikContext } from 'formik'
 import * as R from 'ramda'
 import React, { useState, useCallback } from 'react'
 import { useDropzone } from 'react-dropzone'
 
-import { Info3 } from 'src/components/typography'
+import { Label3, H3 } from 'src/components/typography'
+import { ReactComponent as UploadPhotoIcon } from 'src/styling/icons/button/photo/zodiac-resized.svg'
+import { ReactComponent as UploadFileIcon } from 'src/styling/icons/button/upload-file/zodiac-resized.svg'
 import { offColor, subheaderColor } from 'src/styling/variables'
 
 const useStyles = makeStyles({
   box: {
     boxSizing: 'border-box',
-    marginTop: 31,
+    marginTop: 40,
     width: 450,
     height: 120,
     borderStyle: 'dashed',
@@ -20,46 +23,75 @@ const useStyles = makeStyles({
     display: 'flex',
     justifyContent: 'center'
   },
-  boxContent: {
-    marginTop: 30
+  inputContent: {
+    marginTop: 35,
+    display: 'flex'
+  },
+  uploadContent: {
+    marginTop: 50,
+    display: 'flex'
   },
   board: {
     width: 450,
     height: 120
+  },
+  icon: {
+    margin: [[14, 20, 0, 0]]
   }
 })
 
 const Upload = ({ type }) => {
   const classes = useStyles()
-  const IMAGE = 'image'
 
   const [data, setData] = useState({})
 
-  const message =
-    type === IMAGE
-      ? 'Drag and drop an image or click to select a file'
-      : 'Drag and drop or click to select a file'
+  const { setFieldValue } = useFormikContext()
 
-  const onDrop = useCallback(acceptedData => {
-    setData({ preview: URL.createObjectURL(R.head(acceptedData)) })
-  }, [])
+  const IMAGE = 'image'
+  const isImage = type === IMAGE
+
+  const onDrop = useCallback(
+    acceptedData => {
+      // TODO: attach the uploaded data to the form as well
+      setFieldValue(type, R.head(acceptedData).name)
+
+      setData({
+        preview: isImage
+          ? URL.createObjectURL(R.head(acceptedData))
+          : R.head(acceptedData).name
+      })
+    },
+    [isImage, type, setFieldValue]
+  )
 
   const { getRootProps, getInputProps } = useDropzone({ onDrop })
 
   return (
     <>
       <div {...getRootProps()} className={classes.board}>
-        <input {...getInputProps()} />
         {R.isEmpty(data) && (
           <div className={classes.box}>
-            <div className={classes.boxContent}>
-              <Info3>{message}</Info3>
+            <input {...getInputProps()} />
+            <div className={classes.inputContent}>
+              {isImage ? (
+                <UploadPhotoIcon className={classes.icon}></UploadPhotoIcon>
+              ) : (
+                <UploadFileIcon className={classes.icon}></UploadFileIcon>
+              )}
+              <Label3>{`Drag and drop ${
+                isImage ? 'an image' : 'a file'
+              } or click to open the explorer`}</Label3>
             </div>
           </div>
         )}
         {!R.isEmpty(data) && type === IMAGE && (
           <div key={data.name}>
-            <img src={data.preview} className={classes.box}></img>
+            <img src={data.preview} className={classes.box} alt=""></img>
+          </div>
+        )}
+        {!R.isEmpty(data) && type !== IMAGE && (
+          <div className={classes.box}>
+            <H3 className={classes.uploadContent}>{data.preview}</H3>
           </div>
         )}
       </div>