make drag n drop prettier

css/base.css

@@ -2982,25 +2982,28 @@ ul.tabbar li.active > a {
   display: flex;
   flex-direction: column;
   position: absolute;
-  width: 100%;
+  top: 0;
-  height: 100%;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }
 
 .drag-and-drop .banner {
-  border: dashed grey 1px;
-  background-color: rgba(255,255,255,.8);
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 9999;
-  /* Center text & font. */
   display: flex;
+  border: dashed grey 0.15rem;
+  border-radius: 1rem;
+  background-color: rgba(255,255,255,.95);
+  position: absolute;
+  top: 1.5rem;
+  bottom: 1.5rem;
+  left: 1.5rem;
+  right: 1.5rem;
+  z-index: 3;
   justify-content: center;
   align-items: center;
   font-size: 2rem;
   color: grey;
+  outline: 0.5rem solid rgba(255,255,255,.95);
 }
 
 /*

src/views/messages-view.jsx

@@ -1486,8 +1486,9 @@ class MessagesView extends React.Component {
                 onClearError={this.props.onError} />
               : null}
             <LoadSpinner show={this.state.fetchingMessages} />
-            {!this.state.unconfirmed && !this.props.forwardMessage ?
+            {!this.state.unconfirmed && !this.props.forwardMessage && this.state.isWriter && !this.state.peerMessagingDisabled ?
-              <DragAndDrop actionPrompt={this.props.intl.formatMessage(messages.drag_file)} onDrop={this.handleFileDrop} >{messagesComponent}</DragAndDrop>
+              <DragAndDrop actionPrompt={this.props.intl.formatMessage(messages.drag_file)}
+                onDrop={this.handleFileDrop} >{messagesComponent}</DragAndDrop>
               : messagesComponent}
           </>
         );

src/widgets/drag-and-drop.jsx

@@ -22,7 +22,7 @@ export default class DragAndDrop extends React.PureComponent {
   }
 
   componentDidMount() {
-    let div = this.dropRef.current;
+    const div = this.dropRef.current;
     div.addEventListener('dragenter', this.handleDragIn);
     div.addEventListener('dragleave', this.handleDragOut);
     div.addEventListener('dragover', this.handleDrag);
@@ -30,7 +30,7 @@ export default class DragAndDrop extends React.PureComponent {
   }
 
   componentWillUnmount() {
-    let div = this.dropRef.current;
+    const div = this.dropRef.current;
     div.removeEventListener('dragenter', this.handleDragIn);
     div.removeEventListener('dragleave', this.handleDragOut);
     div.removeEventListener('dragover', this.handleDrag);
@@ -55,7 +55,7 @@ export default class DragAndDrop extends React.PureComponent {
     e.preventDefault();
     e.stopPropagation();
     this.dragCounter--;
-    if (this.dragCounter == 0) {
+    if (this.dragCounter <= 0) {
       this.setState({dragging: false});
     }
   }
@@ -73,9 +73,9 @@ export default class DragAndDrop extends React.PureComponent {
 
   render() {
     return (
-      <div className='drag-and-drop' ref={this.dropRef}>
+      <div className="drag-and-drop" ref={this.dropRef}>
         {this.state.dragging ?
-          <div className='banner'>{this.props.actionPrompt}</div>
+          <div className="banner">{this.props.actionPrompt}</div>
           : null}
         {this.props.children}
       </div>

umd/index.dev.js

@@ -6712,7 +6712,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
           onClearError: this.props.onError
         }) : null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_load_spinner_jsx__WEBPACK_IMPORTED_MODULE_13__["default"], {
           show: this.state.fetchingMessages
-        }), !this.state.unconfirmed && !this.props.forwardMessage ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_drag_and_drop_jsx__WEBPACK_IMPORTED_MODULE_7__["default"], {
+        }), !this.state.unconfirmed && !this.props.forwardMessage && this.state.isWriter && !this.state.peerMessagingDisabled ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_drag_and_drop_jsx__WEBPACK_IMPORTED_MODULE_7__["default"], {
           actionPrompt: this.props.intl.formatMessage(messages.drag_file),
           onDrop: this.handleFileDrop
         }, messagesComponent) : messagesComponent);
@@ -12702,14 +12702,14 @@ class DragAndDrop extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComp
     this.handleDrop = this.handleDrop.bind(this);
   }
   componentDidMount() {
-    let div = this.dropRef.current;
+    const div = this.dropRef.current;
     div.addEventListener('dragenter', this.handleDragIn);
     div.addEventListener('dragleave', this.handleDragOut);
     div.addEventListener('dragover', this.handleDrag);
     div.addEventListener('drop', this.handleDrop);
   }
   componentWillUnmount() {
-    let div = this.dropRef.current;
+    const div = this.dropRef.current;
     div.removeEventListener('dragenter', this.handleDragIn);
     div.removeEventListener('dragleave', this.handleDragOut);
     div.removeEventListener('dragover', this.handleDrag);
@@ -12733,7 +12733,7 @@ class DragAndDrop extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComp
     e.preventDefault();
     e.stopPropagation();
     this.dragCounter--;
-    if (this.dragCounter == 0) {
+    if (this.dragCounter <= 0) {
       this.setState({
         dragging: false
       });