Upgrade react + style dropzone

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@advancedalgos/web-components",
   "description": "Shared web components for Advanced Algos modules",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "author": "Advanced Algos, Ltd",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -39,7 +39,9 @@
     "graphql": "^14.0.2",
     "graphql-tag": "^2.9.2",
     "prop-types": "^15.6.2",
+    "react": "^16.6.1",
     "react-apollo": "^2.1.11",
+    "react-dom": "^16.6.1",
     "react-dropzone": "^5.1.0",
     "react-image-crop": "^5.0.0",
     "react-image-cropper": "^1.3.0"

src/image-upload/components/DropZone.js

@@ -8,15 +8,27 @@ import Button from '@material-ui/core/Button'
 
 const styles = theme => ({
   dropzone: {
-    display: 'block',
-    padding: '3em',
+    display: 'flex',
+    flexGrow: 1,
+    padding: '0.5em',
     height: 200,
     borderWidth: 2,
     borderColor: '#999',
-    backgroundColor: '#eee'
+    backgroundColor: '#eee',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+    cursor: 'pointer'
   },
   dropzoneText: {
-    textAlign: 'center'
+    display: 'flex',
+    textAlign: 'center',
+    fontFamily: '"Saira","Saira Condensed", "Arial Narrow", Arial, sans-serif',
+    cursor: 'pointer'
+  },
+  cancelButton: {
+    position: 'relative',
+    top: '-3em'
   }
 })
 
@@ -28,11 +40,14 @@ export const DropZone = ({ classes, onDrop, handleCancel }) => (
       className={classes.dropzone}
       multiple={false}
     >
-      <p className={classes.dropzoneText}>Drag-and-drop image here or click to select <br /> Only *.jpeg and *.png images</p>
+      <p className={classes.dropzoneText}>Drag *.jpeg or *.png image here or click to select</p>
     </Dropzone>
     <Button
+      size='small'
+      variant='contained'
       onClick={handleCancel}
-      color='primary'
+      color='secondary'
+      className={classes.cancelButton}
     >
       Cancel Image Change
     </Button>

src/image-upload/components/ImagePreview.js

@@ -66,7 +66,8 @@ const styles = theme => ({
     position: 'relative',
     textTransform: 'uppercase',
     fontWeight: 700,
-    padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 4}px ${theme.spacing.unit + 6}px`
+    padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 2}px ${theme.spacing.unit + 6}px`,
+    fontFamily: '"Saira","Saira Condensed", "Arial Narrow", Arial, sans-serif'
   }
 })
 

src/image-upload/index.js

@@ -24,8 +24,17 @@ const placeHolder = fileName => {
   return `data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22288%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20288%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164edaf95ee%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164edaf95ee%22%3E%3Crect%20width%3D%22288%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2296.32500076293945%22%20y%3D%22118.8%22%3E${fileName}%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E`
 }
 
+const containerStyleDefault = {
+  display: 'block',
+  margin: 0,
+  height: 200,
+  wdith: 200,
+  overflow: 'visible'
+}
+
 const imagePreviewDefault = {
   width: 400,
+  height: 400,
   title: 'Change Avatar'
 }
 
@@ -66,10 +75,12 @@ class ImageUpload extends Component {
     this.saveImage = this.saveImage.bind(this)
     this.debug = this.props.debug
 
+    let containerStyleConfig = props.containerStyle !== undefined ? props.containerStyle : containerStyleDefault
     let previewConfig = props.imagePreviewConfig !== undefined ? props.imagePreviewConfig : imagePreviewDefault
     let cropConfig = props.cropContainerConfig !== undefined ? props.cropContainerConfig : cropConfigDefault
     let saveConfig = props.saveImageConfig !== undefined ? props.saveImageConfig : saveImageConfigDefault
     let cropPreview = props.cropPreviewBox !== undefined ? props.cropPreviewBox : cropPreviewBoxDefault
+    this.containerStyleConfig = containerStyleConfig
     this.previewConfig = previewConfig
     this.cropConfig = cropConfig
     this.saveConfig = saveConfig
@@ -90,7 +101,6 @@ class ImageUpload extends Component {
   render () {
     const {
       classes,
-      containerStyle,
       existingImage,
       cropRatio,
       fileName
@@ -107,13 +117,7 @@ class ImageUpload extends Component {
     return (
       <div
         className={classes.imageUploadContainer}
-        style={{
-          'display': containerStyle.display,
-          'margin': containerStyle.margin,
-          'height': containerStyle.height,
-          'width': containerStyle.width,
-          'overflow': containerStyle.overflow
-        }}
+        style={this.containerStyleConfig}
       >
         {this.state.event === 'cropping' && (
           <Typography variant='h6' color='primary' >Cropping...</Typography>