diff --git a/new-lamassu-admin/src/pages/Customers/CustomerData.styles.js b/new-lamassu-admin/src/pages/Customers/CustomerData.styles.js index d18ff46a..5977bbfe 100644 --- a/new-lamassu-admin/src/pages/Customers/CustomerData.styles.js +++ b/new-lamassu-admin/src/pages/Customers/CustomerData.styles.js @@ -24,7 +24,7 @@ export default { }, separator: { display: 'flex', - flexBasis: '35%', + flexBasis: '100%', justifyContent: 'center', color: offColor, margin: [[8, 0, 8, 0]], diff --git a/new-lamassu-admin/src/pages/Customers/components/Upload.js b/new-lamassu-admin/src/pages/Customers/components/Upload.js index 4221df0f..38dac0d2 100644 --- a/new-lamassu-admin/src/pages/Customers/components/Upload.js +++ b/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 ( <>
- {R.isEmpty(data) && (
-
- {message} + +
+ {isImage ? ( + + ) : ( + + )} + {`Drag and drop ${ + isImage ? 'an image' : 'a file' + } or click to open the explorer`}
)} {!R.isEmpty(data) && type === IMAGE && (
- + +
+ )} + {!R.isEmpty(data) && type !== IMAGE && ( +
+

{data.preview}

)}
diff --git a/new-lamassu-admin/src/styling/icons/button/photo/white-resized.svg b/new-lamassu-admin/src/styling/icons/button/photo/white-resized.svg new file mode 100644 index 00000000..aac48e3e --- /dev/null +++ b/new-lamassu-admin/src/styling/icons/button/photo/white-resized.svg @@ -0,0 +1,22 @@ + + + icon/button/photo/white-resized + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/button/photo/zodiac-resized.svg b/new-lamassu-admin/src/styling/icons/button/photo/zodiac-resized.svg new file mode 100644 index 00000000..ef919c56 --- /dev/null +++ b/new-lamassu-admin/src/styling/icons/button/photo/zodiac-resized.svg @@ -0,0 +1,20 @@ + + + icon/button/photo/zodiac-resized + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/button/replace/white.svg b/new-lamassu-admin/src/styling/icons/button/replace/white.svg new file mode 100644 index 00000000..ffdd826b --- /dev/null +++ b/new-lamassu-admin/src/styling/icons/button/replace/white.svg @@ -0,0 +1,16 @@ + + + icon/button/replace/white + + + + + + + + + + + + + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/button/replace/zodiac.svg b/new-lamassu-admin/src/styling/icons/button/replace/zodiac.svg new file mode 100644 index 00000000..07c20af3 --- /dev/null +++ b/new-lamassu-admin/src/styling/icons/button/replace/zodiac.svg @@ -0,0 +1,16 @@ + + + icon/button/replace/zodiac + + + + + + + + + + + + + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/button/upload-file/white-resized.svg b/new-lamassu-admin/src/styling/icons/button/upload-file/white-resized.svg new file mode 100644 index 00000000..6f12177b --- /dev/null +++ b/new-lamassu-admin/src/styling/icons/button/upload-file/white-resized.svg @@ -0,0 +1,21 @@ + + + icon/button/upload-file/white-resized + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/button/upload-file/white.svg b/new-lamassu-admin/src/styling/icons/button/upload-file/white.svg new file mode 100644 index 00000000..bdf4c81d --- /dev/null +++ b/new-lamassu-admin/src/styling/icons/button/upload-file/white.svg @@ -0,0 +1,21 @@ + + + icon/button/upload-file/white + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/button/upload-file/zodiac-resized.svg b/new-lamassu-admin/src/styling/icons/button/upload-file/zodiac-resized.svg new file mode 100644 index 00000000..97022d63 --- /dev/null +++ b/new-lamassu-admin/src/styling/icons/button/upload-file/zodiac-resized.svg @@ -0,0 +1,21 @@ + + + icon/button/upload-file/zodiac-resized + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/button/upload-file/zodiac.svg b/new-lamassu-admin/src/styling/icons/button/upload-file/zodiac.svg new file mode 100644 index 00000000..4d091e39 --- /dev/null +++ b/new-lamassu-admin/src/styling/icons/button/upload-file/zodiac.svg @@ -0,0 +1,21 @@ + + + icon/button/upload-file/zodiac + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/file/comet.svg b/new-lamassu-admin/src/styling/icons/file/comet.svg new file mode 100644 index 00000000..231d341b --- /dev/null +++ b/new-lamassu-admin/src/styling/icons/file/comet.svg @@ -0,0 +1,33 @@ + + + icon/file/zip/comet + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/file/spring.svg b/new-lamassu-admin/src/styling/icons/file/spring.svg new file mode 100644 index 00000000..d8650af5 --- /dev/null +++ b/new-lamassu-admin/src/styling/icons/file/spring.svg @@ -0,0 +1,33 @@ + + + icon/file/zip/spring + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/file/tomato.svg b/new-lamassu-admin/src/styling/icons/file/tomato.svg new file mode 100644 index 00000000..0a7733b0 --- /dev/null +++ b/new-lamassu-admin/src/styling/icons/file/tomato.svg @@ -0,0 +1,33 @@ + + + icon/file/zip/tomato + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file