Improved error popup

plugins/cloudimport/public/ImportView.jsx

@@ -1,12 +1,12 @@
 import React, { Component, Fragment } from "react";
 import PropTypes from 'prop-types';
 
-import ErrorMessage from "webodm/components/ErrorMessage";
 import ResizeModes from 'webodm/classes/ResizeModes';
 
 import PlatformSelectButton from "./components/PlatformSelectButton";
 import PlatformDialog from "./components/PlatformDialog";
 import LibraryDialog from "./components/LibraryDialog";
+import ErrorDialog from "./components/ErrorDialog";
 import ConfigureNewTaskDialog from "./components/ConfigureNewTaskDialog";
 
 export default class TaskView extends Component {
@@ -90,7 +90,7 @@ export default class TaskView extends Component {
 		return (
 			<Fragment>
 			{error ?
-				<ErrorMessage bind={[this, "error"]} />
+				<ErrorDialog errorMessage={error} />
 			: ""}
 				<PlatformSelectButton
 					platforms={platforms}

plugins/cloudimport/public/components/ErrorDialog.jsx

@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types';
+import { Component } from "react";
+import { Modal } from "react-bootstrap";
+import "./ErrorDialog.scss";
+
+export default class ErrorDialog extends Component {
+	static propTypes = {
+		errorMessage: PropTypes.string.isRequired,
+  }
+	
+	constructor(props){
+		super(props);
+
+		this.state = { show: true };
+	}
+	
+	handleOnHide = () => this.setState({show: false});
+	
+	render() {
+		const { errorMessage } = this.props;
+		
+		return (
+			<Modal show={this.state.show}>
+				<Modal.Header closeButton onHide={this.handleOnHide}>
+					<Modal.Title>
+						There was an error with Cloud Import :(
+					</Modal.Title>
+				</Modal.Header>
+				<Modal.Body>
+					{ errorMessage }
+				</Modal.Body>
+			</Modal>
+		);
+	}
+}

plugins/cloudimport/public/components/ErrorDialog.scss

@@ -0,0 +1,3 @@
+.modal-backdrop {
+	z-index: 100000 !important;
+}