fix for different representation of deleted messages

css/base.css

@@ -1382,7 +1382,7 @@ i.search {
 }
 
 .chat-box .center .bubble {
-  background-color: #eaeafa;
+  background-color: #e0e0ff;
   padding: 0.75rem 0.75rem 0.5rem 0.75rem;
 }
 

src/views/messages-view.jsx

@@ -541,7 +541,7 @@ class MessagesView extends React.Component {
         messageNodes.push(
           <ChatMessage
             tinode={this.props.tinode}
-            content={msg.content} delRange={msg.delRange}
+            content={msg.content} deleted={msg.hi}
             mimeType={msg.head ? msg.head.mime : null}
             timestamp={msg.ts} response={isReply} seq={msg.seq}
             userFrom={userFrom} userName={userName} userAvatar={userAvatar}

src/widgets/chat-message.jsx

@@ -70,11 +70,11 @@ export default class ChatMessage extends React.Component {
   }
 
   render() {
-    const sideClass = this.props.delRange ? 'center' :
+    const sideClass = this.props.deleted ? 'center' :
       (this.props.sequence + ' ' + (this.props.response ? 'left' : 'right'));
     const bubbleClass = (this.props.sequence == 'single' || this.props.sequence == 'last') ? 'bubble tip' : 'bubble';
     const avatar = this.props.delRange ? null : (this.props.userAvatar || true);
-    const fullDisplay = (this.props.userFrom && this.props.response &&
+    const fullDisplay = (!this.props.deleted && this.props.response &&
       (this.props.sequence == 'single' || this.props.sequence == 'last'));
 
     let content = this.props.content;
@@ -97,7 +97,7 @@ export default class ChatMessage extends React.Component {
           key={i} />);
       }, this);
       content = React.createElement('span', null, Drafty.format(content, draftyFormatter, this));
-    } else if (this.props.delRange) {
+    } else if (this.props.deleted) {
       // Message represents a range of deleted messages.
       content = <><i className="material-icons gray">block</i> <i className="gray">
         <FormattedMessage id="deleted_content"
@@ -133,7 +133,7 @@ export default class ChatMessage extends React.Component {
                   received={this.props.received} />
                 : null}
             </div>
-            {this.props.delRange ?
+            {this.props.deleted ?
               null :
               <span className="menuTrigger">
                 <a href="#" onClick={this.handleContextClick}>

umd/index.dev.js

@@ -3355,7 +3355,7 @@ var MessagesView = function (_React$Component) {
           messageNodes.push(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_widgets_chat_message_jsx__WEBPACK_IMPORTED_MODULE_3__["default"], {
             tinode: this.props.tinode,
             content: msg.content,
-            delRange: msg.delRange,
+            deleted: msg.hi,
             mimeType: msg.head ? msg.head.mime : null,
             timestamp: msg.ts,
             response: isReply,
@@ -6832,10 +6832,10 @@ var ChatMessage = function (_React$Component) {
     value: function render() {
       var _this2 = this;
 
-      var sideClass = this.props.delRange ? 'center' : this.props.sequence + ' ' + (this.props.response ? 'left' : 'right');
+      var sideClass = this.props.deleted ? 'center' : this.props.sequence + ' ' + (this.props.response ? 'left' : 'right');
       var bubbleClass = this.props.sequence == 'single' || this.props.sequence == 'last' ? 'bubble tip' : 'bubble';
       var avatar = this.props.delRange ? null : this.props.userAvatar || true;
-      var fullDisplay = this.props.userFrom && this.props.response && (this.props.sequence == 'single' || this.props.sequence == 'last');
+      var fullDisplay = !this.props.deleted && this.props.response && (this.props.sequence == 'single' || this.props.sequence == 'last');
       var content = this.props.content;
       var attachments = [];
 
@@ -6859,7 +6859,7 @@ var ChatMessage = function (_React$Component) {
           }));
         }, this);
         content = react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement('span', null, tinode_sdk__WEBPACK_IMPORTED_MODULE_2__["Drafty"].format(content, draftyFormatter, this));
-      } else if (this.props.delRange) {
+      } else if (this.props.deleted) {
         content = react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("i", {
           className: "material-icons gray"
         }, "block"), " ", react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("i", {
@@ -6894,7 +6894,7 @@ var ChatMessage = function (_React$Component) {
       }, content, attachments, this.props.timestamp ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_received_marker_jsx__WEBPACK_IMPORTED_MODULE_5__["default"], {
         timestamp: this.props.timestamp,
         received: this.props.received
-      }) : null), this.props.delRange ? null : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", {
+      }) : null), this.props.deleted ? null : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", {
         className: "menuTrigger"
       }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("a", {
         href: "#",