Hide settings items for non admins

Update image uploader for use with team logo
Fix can't cancel cropping modal

app/scenes/Settings/components/ImageUpload.js

@@ -16,6 +16,8 @@ type Props = {
   children?: React.Node,
   onSuccess: string => *,
   onError: string => *,
+  submitText: string,
+  borderRadius: number,
 };
 
 @observer
@@ -26,6 +28,11 @@ class DropToImport extends React.Component<Props> {
   file: File;
   avatarEditorRef: AvatarEditor;
 
+  static defaultProps = {
+    submitText: 'Crop Picture',
+    borderRadius: 150,
+  };
+
   onDropAccepted = async (files: File[]) => {
     this.isCropping = true;
     this.file = files[0];
@@ -38,13 +45,18 @@ class DropToImport extends React.Component<Props> {
       const asset = await uploadFile(imageBlob, { name: this.file.name });
       this.props.onSuccess(asset.url);
     } catch (err) {
-      this.props.onError('Unable to upload image');
+      this.props.onError(err);
     } finally {
       this.isUploading = false;
       this.isCropping = false;
     }
   };
 
+  handleClose = () => {
+    this.isUploading = false;
+    this.isCropping = false;
+  };
+
   handleZoom = (event: SyntheticDragEvent<*>) => {
     let target = event.target;
     if (target instanceof HTMLInputElement) {
@@ -53,8 +65,10 @@ class DropToImport extends React.Component<Props> {
   };
 
   renderCropping() {
+    const { submitText } = this.props;
+
     return (
-      <Modal isOpen title="">
+      <Modal isOpen onRequestClose={this.handleClose} title="">
         <Flex auto column align="center" justify="center">
           <AvatarEditorContainer>
             <AvatarEditor
@@ -63,7 +77,7 @@ class DropToImport extends React.Component<Props> {
               width={250}
               height={250}
               border={25}
-              borderRadius={150}
+              borderRadius={this.props.borderRadius}
               color={[255, 255, 255, 0.6]} // RGBA
               scale={this.zoom}
               rotate={0}
@@ -79,7 +93,7 @@ class DropToImport extends React.Component<Props> {
           />
           {this.isUploading && <LoadingIndicator />}
           <CropButton onClick={this.handleCrop} disabled={this.isUploading}>
-            Crop avatar
+            {submitText}
           </CropButton>
         </Flex>
       </Modal>
@@ -89,19 +103,20 @@ class DropToImport extends React.Component<Props> {
   render() {
     if (this.isCropping) {
       return this.renderCropping();
-    } else {
-      return (
-        <Dropzone
-          accept="image/png, image/jpeg"
-          onDropAccepted={this.onDropAccepted}
-          style={{}}
-          disablePreview
-          {...this.props}
-        >
-          {this.props.children}
-        </Dropzone>
-      );
     }
+
+    return (
+      <Dropzone
+        accept="image/png, image/jpeg"
+        onDropAccepted={this.onDropAccepted}
+        style={{}}
+        disablePreview
+        onSuccess={this.props.onSuccess}
+        onError={this.props.onError}
+      >
+        {this.props.children}
+      </Dropzone>
+    );
   }
 }