From ead4b93201c35821756bf1f9515f5ad114a9943b Mon Sep 17 00:00:00 2001
From: Vladimir <vladimir.mikulic2@gmail.com>
Date: Sat, 7 Dec 2019 12:41:16 +0100
Subject: [PATCH 1/5] FIX: Dragzone overlapping

Changes:
- inline styles moved from ../ImportImage/Ui.js to demo.css
- minor code improvements

The change was necessary because in the old UI dragzone was overlapping
an image.

Resolves #1294
---
 examples/demo.css             | 18 ++++++++++--------
 src/modules/ImportImage/Ui.js |  2 +-
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/examples/demo.css b/examples/demo.css
index 5f1dd8ec87..c1f81f6a79 100644
--- a/examples/demo.css
+++ b/examples/demo.css
@@ -69,12 +69,14 @@ body > .container-fluid {
   min-width:300px;
 }
 
-.hover {
-  background: #eee;
+.import-image-zone {
+  margin: 10px auto 30px auto;
+  max-width: 230px;
+  min-width: 230px;
 }
 
-.dropzone input {
-  max-width: 100%;
+.hover {
+  background: #eee;
 }
 
 .step {
@@ -252,7 +254,7 @@ a.name-header{
 }
 
 .step-column{
-  display:flex; 
+  display:flex;
   align-content: center;
   justify-content: center;
 }
@@ -276,9 +278,9 @@ a.name-header{
   width:100%;
 }
 .save-button{
-  margin-top:20px; 
+  margin-top:20px;
   margin-bottom:0px;
-  align:center; 
+  align:center;
   width:100%;
 }
 
@@ -287,7 +289,7 @@ a.name-header{
 }
 
 .dimension-tooltip:hover{
-  text-decoration: none;  
+  text-decoration: none;
 }
 
 .dimension-tooltip:focus{
diff --git a/src/modules/ImportImage/Ui.js b/src/modules/ImportImage/Ui.js
index 4b8644192c..11d2e42c50 100644
--- a/src/modules/ImportImage/Ui.js
+++ b/src/modules/ImportImage/Ui.js
@@ -8,7 +8,7 @@ module.exports = function ImportImageModuleUi(step, ui) {
 
     // add a file input listener
     var dropZone = '\
-    <div class="dropzone" style="padding: 30px;margin: 10px 20% 30px;border: 4px dashed #ccc;border-radius: 8px;text-align: center;color: #444;" id="' + dropzoneId + '">\
+    <div class="dropzone import-image-zone" id="' + dropzoneId + '">\
           <p>\
         <i>Select or drag in an image to overlay.</i>\
       </p>\

From 61ebd6fe5350c7dd57ad5474dbad954b219e84c3 Mon Sep 17 00:00:00 2001
From: Vladimir <vladimir.mikulic2@gmail.com>
Date: Sat, 7 Dec 2019 13:53:52 +0100
Subject: [PATCH 2/5] FIX: Improve commit #ead4b932

Changes:
- rollback .dropzone input style
- add styles to  .import-image-zone input element
---
 examples/demo.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/examples/demo.css b/examples/demo.css
index c1f81f6a79..7e5cc09d80 100644
--- a/examples/demo.css
+++ b/examples/demo.css
@@ -69,12 +69,20 @@ body > .container-fluid {
   min-width:300px;
 }
 
+.dropzone input {
+  max-width: 100%;
+}
+
 .import-image-zone {
   margin: 10px auto 30px auto;
   max-width: 230px;
   min-width: 230px;
 }
 
+.import-image-zone input {
+  max-width: fit-content;
+}
+
 .hover {
   background: #eee;
 }

From e24d4736e768a6b60766bc213ea53b6b373bbc16 Mon Sep 17 00:00:00 2001
From: Vladimir <vladimir.mikulic2@gmail.com>
Date: Sat, 7 Dec 2019 14:46:15 +0100
Subject: [PATCH 3/5] FIX:  .import-image-zone input element width

Changes:
-  max-width increased to 120% on import-image-zone input element
---
 examples/demo.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/demo.css b/examples/demo.css
index 7e5cc09d80..184c4b6936 100644
--- a/examples/demo.css
+++ b/examples/demo.css
@@ -80,7 +80,7 @@ body > .container-fluid {
 }
 
 .import-image-zone input {
-  max-width: fit-content;
+  max-width: 120%;
 }
 
 .hover {

From e5df980bb17a6fac432a659a55bf1721c4a2755e Mon Sep 17 00:00:00 2001
From: Vladimir <vladimir.mikulic2@gmail.com>
Date: Sat, 7 Dec 2019 15:42:58 +0100
Subject: [PATCH 4/5] FIX: .import-image-zone max-width

Changes:
- rollback .import-image-zone input max-width to fit-content
- increase .import-image-zone max-width from 230px to 250px
---
 examples/demo.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/demo.css b/examples/demo.css
index 184c4b6936..f20fe68cb8 100644
--- a/examples/demo.css
+++ b/examples/demo.css
@@ -75,12 +75,12 @@ body > .container-fluid {
 
 .import-image-zone {
   margin: 10px auto 30px auto;
-  max-width: 230px;
+  max-width: 250px;
   min-width: 230px;
 }
 
 .import-image-zone input {
-  max-width: 120%;
+  max-width: fit-content;
 }
 
 .hover {

From f81216b72e9ac351fda6efa56ce6241a12f51c4a Mon Sep 17 00:00:00 2001
From: Vladimir <vladimir.mikulic2@gmail.com>
Date: Sat, 7 Dec 2019 16:04:55 +0100
Subject: [PATCH 5/5] FIX: .import-image-zone input element max-width

Changes:
 - max-width set to 100%
---
 examples/demo.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/demo.css b/examples/demo.css
index f20fe68cb8..273be11f8d 100644
--- a/examples/demo.css
+++ b/examples/demo.css
@@ -80,7 +80,7 @@ body > .container-fluid {
 }
 
 .import-image-zone input {
-  max-width: fit-content;
+  max-width: 100%;
 }
 
 .hover {