Fixed Import Image Text Overflow (#695)

* Replace dropzone id with dropzone class

* Added dropzone class to div container

* Updated dropZone listener

* Changed #dropzone input to .dropzone input

examples/demo.css

@@ -46,7 +46,7 @@ h1 {
   padding: 0px 0px;
 }
 
-#dropzone {
+.dropzone {
   padding: 30px;
   margin: 0 20% 30px;
   border: 4px dashed #ccc;
@@ -59,7 +59,7 @@ h1 {
   background: #eee;
 }
 
-#dropzone input {
+.dropzone input {
   max-width: 100%;
 }
 

examples/index.html

@@ -63,7 +63,7 @@
       </p>
     </header>
 
-    <div id="dropzone">
+    <div id="dropzone" class="dropzone">
       <p>
         <i>Select or drag in an image to start!</i>
       </p>

src/modules/ImportImage/Ui.js

@@ -8,8 +8,8 @@ module.exports = function ImportImageModuleUi(step, ui) {
 
     // add a file input listener
     var dropZone ='\
-    <div style="padding: 30px;margin: 10px 20% 30px;border: 4px dashed #ccc;border-radius: 8px;text-align: center;color: #444;" id="' + dropzoneId + '">\
-      <p>\
+    <div class="dropzone" style="padding: 30px;margin: 10px 20% 30px;border: 4px dashed #ccc;border-radius: 8px;text-align: center;color: #444;" id="' + dropzoneId + '">\
+          <p>\
         <i>Select or drag in an image to overlay.</i>\
       </p>\
       <center>\