icons for clear buttons

2 files changed, 27 insertions, 25 deletions

diff --git a/src/client/views/nodes/ComparisonBox.scss b/src/client/views/nodes/ComparisonBox.scss
index 5112ed4b8..38d3a04e9 100644
--- a/src/client/views/nodes/ComparisonBox.scss
+++ b/src/client/views/nodes/ComparisonBox.scss
@@ -40,18 +40,18 @@
 
     .clear-button {
         position: absolute;
-        top: 0;
-        height: 25px;
-        width: 25px;
-        background-color: white;
-        border-radius: 50%;
+        opacity: 1;
+        pointer-events: all;
+        cursor: pointer;
     }
 
     .clear-button.before {
-        left: 0;
+        top: 3px;
+        left: 3px;
     }
 
     .clear-button.after {
-        right: 0;
+        top: 3px;
+        right: 3px;
     }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index fe3f47e2a..15ba8d8f2 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 } from '@fortawesome/free-solid-svg-icons';
+import { faAsterisk, faBrain, faFileAudio, faImage, faPaintBrush, faTimes } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, observable, runInAction } from 'mobx';
 import { observer } from "mobx-react";
@@ -71,8 +71,8 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
     }
 
     private onPointerMove = ({ movementX }: PointerEvent) => {
-        const width = this.props.Document.clipWidth + movementX;
-        if (width && width > 0 && width < this.props.PanelWidth()) {
+        const width = NumCast(this.props.Document.clipWidth) + movementX; //is it ok to use NumCast
+        if (width && width > 5 && width < this.props.PanelWidth()) {
             this.props.Document.clipWidth = width;
         }
     }
@@ -117,13 +117,14 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
                         style={{ width: this.props.PanelWidth() }}>
                         {
                             beforeDoc ?
-                                <><ContentFittingDocumentView {...this.props}
-                                    Document={beforeDoc}
-                                    getTransform={this.props.ScreenToLocalTransform} />
-                                    <div
-                                        className="clear-button before"
-                                        onClick={(e) => this.clearBeforeDoc(e)}
-                                    /></>
+                                <>
+                                    <ContentFittingDocumentView {...this.props}
+                                        Document={beforeDoc}
+                                        getTransform={this.props.ScreenToLocalTransform} />
+                                    <div className="clear-button before" onClick={(e) => this.clearBeforeDoc(e)}>
+                                        <FontAwesomeIcon className="clear-button before" icon={faTimes} size="sm" />
+                                    </div>
+                                </>
                                 :
                                 <div className="placeholder">
                                     upload before image!
@@ -141,15 +142,16 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
                     }}>
                     {
                         afterDoc ?
-                            <><ContentFittingDocumentView {...this.props}
-                                Document={afterDoc}
-                                getTransform={this.props.ScreenToLocalTransform} />
-                                <div
-                                    className="clear-button after"
-                                    onClick={(e) => this.clearAfterDoc(e)}
-                                /></>
+                            <>
+                                <ContentFittingDocumentView {...this.props}
+                                    Document={afterDoc}
+                                    getTransform={this.props.ScreenToLocalTransform} />
+                                <div className="clear-button after" onClick={(e) => this.clearAfterDoc(e)}>
+                                    <FontAwesomeIcon className="clear-button after" icon={faTimes} size="sm" />
+                                </div>
+                            </>
                             :
-                            <div className="placeholder" style={{ right: "0" }}>
+                            <div className="placeholder" style={{ textAlign: "right" }}>
                                 upload after image!
                             </div>
                     }