added upload icon, changed background colours

2 files changed, 24 insertions, 10 deletions

diff --git a/src/client/views/nodes/ComparisonBox.scss b/src/client/views/nodes/ComparisonBox.scss
index e2852c5f1..74e80236d 100644
--- a/src/client/views/nodes/ComparisonBox.scss
+++ b/src/client/views/nodes/ComparisonBox.scss
@@ -15,7 +15,8 @@
 
         .beforeBox-cont {
             height: 100%;
-            background-color: red;
+            overflow: auto;
+            background-color: rgb(230, 230, 230);
         }
 
         .slide-bar {
@@ -35,23 +36,36 @@
         right: 0;
         height: 100%;
         width: 100%;
-        background-color: orange;
+        overflow: auto;
+        background-color: rgb(200, 200, 200);
     }
 
     .clear-button {
         position: absolute;
-        opacity: 1;
+        top: 3px;
+        opacity: 0.8;
         pointer-events: all;
         cursor: pointer;
     }
 
     .clear-button.before {
-        top: 3px;
         left: 3px;
     }
 
     .clear-button.after {
-        top: 3px;
         right: 3px;
     }
+
+    .placeholder {
+        width: 50%;
+        height: 50%;
+        margin-top: 25%;
+        margin-left: 25%;
+
+        .upload-icon {
+            width: 100%;
+            height: 100%;
+            opacity: 0.5;
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index dbaad360b..6ca0397e2 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -1,6 +1,6 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faEye } from '@fortawesome/free-regular-svg-icons';
-import { faAsterisk, faBrain, faFileAudio, faImage, faPaintBrush, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { faAsterisk, faBrain, faFileAudio, faImage, faPaintBrush, faTimes, faCloudUploadAlt } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, observable, runInAction, Lambda } from 'mobx';
 import { observer } from "mobx-react";
@@ -133,7 +133,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
                                 </>
                                 :
                                 <div className="placeholder">
-                                    upload before image!
+                                    <FontAwesomeIcon className="upload-icon" icon={faCloudUploadAlt} size="lg" />
                                 </div>
                         }
                     </div>
@@ -157,11 +157,11 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
                                 </div>
                             </>
                             :
-                            <div className="placeholder" style={{ textAlign: "right" }}>
-                                upload after image!
+                            <div className="placeholder">
+                                <FontAwesomeIcon className="upload-icon" icon={faCloudUploadAlt} size="lg" />
                             </div>
                     }
                 </div>
-            </div>);
+            </div >);
     }
 }
\ No newline at end of file