evrithing seems to work now

css/base.css

@@ -1557,25 +1557,10 @@ img.channel {
   text-align: left;
   border-radius: 0.5rem;
   box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.12);
+  transition: ease-out background-color 0.5s;
+  transition-delay: 0.3s;
 }
 
-/*
-NEW BUBBLE TIP STYLE
-
-.left .bubble .tip::before {
-  content: ' ';
-  position: absolute;
-  width: 0.8rem;
-  height: 0.8rem;
-  left: -0.8rem;
-  bottom: 0;
-  background-color: inherit;
-  clip-path: polygon(100% 0, 0 110%, 100% 110%);
-  box-shadow: 0 1px 0.5px rgb(0 0 0 / 12%);
-  border-bottom-left-radius: 0.3rem;
-}
-*/
-
 .chat-box li.single {
   margin-top: 0.25rem;
   margin-bottom: 0.75rem;
@@ -1601,7 +1586,11 @@ NEW BUBBLE TIP STYLE
   margin-right: 0.5rem;
 }
 
-.left .bubble .tip {
+.left.flash .bubble {
+  background-color: #94A97C;
+}
+
+.left .bubble.tip {
   border-bottom-left-radius: 0;
 }
 
@@ -1610,7 +1599,11 @@ NEW BUBBLE TIP STYLE
   margin-left: 1.75rem;
 }
 
-.right .bubble .tip {
+.right.flash .bubble {
+  background-color: #ccc;
+}
+
+.right .bubble.tip {
   border-bottom-right-radius: 0;
 }
 
@@ -1620,39 +1613,33 @@ NEW BUBBLE TIP STYLE
 }
 
 /* Left triangle placed bottom left flush. */
-.chat-box .left .tip::before {
+.left .bubble.tip::before {
   content: '';
   position: absolute;
-  width: 0;
+  width: 0.85rem;
-  height: 0;
+  height: 0.85rem;
-  right: auto;
+  left: -0.8rem;
-  left: -.8rem;
-  top: auto;
   bottom: 0;
-  border: 0.62rem solid #c5e1a5;
+  background-color: inherit;
-  color: #c5e1a5;
+  clip-path: polygon(100% 0, 0 110%, 100% 110%);
-  border-top-color: transparent;
+  -webkit-clip-path: polygon(100% 0, 0 110%, 100% 110%);
-  border-left-color: transparent;
+  box-shadow: 0 1px 0.5px rgb(0 0 0 / 12%);
-  box-shadow: 0 1.6px 0.5px -0.8px rgba(0, 0, 0, 0.12);
+  border-bottom-left-radius: 0.3rem;
 }
 
 /* Right triangle placed bottom right flush. */
-.chat-box .right .tip::before {
+.right .bubble.tip::before {
   content: '';
   position: absolute;
-  display: flex;
+  width: 0.85rem;
-  justify-content: space-between;
+  height: 0.85rem;
-  width: 0;
+  left: 99.8%;
-  height: 0;
-  left: auto;
-  right: -.8rem;
-  top: auto;
   bottom: 0;
-  border: 0.62rem solid #fafafa;
+  background-color: inherit;
-  color: #fafafa;
+  clip-path: polygon(0 0, 100% 110%, 0 110%);
-  border-top-color: transparent;
+  -webkit-clip-path: polygon(0 0, 100% 110%, 0 110%);
-  border-right-color: transparent;
+  box-shadow: 0 1px 0.5px rgb(0 0 0 / 12%);
-  box-shadow: 0 1.6px 0.5px -0.8px rgba(0, 0, 0, 0.12);
+  border-bottom-right-radius: 0.3rem;
 }
 
 .chat-box .avatar-box {
@@ -2498,11 +2485,15 @@ ul.tabbar li.active > a {
 }
 
 .chat-box .left .reply-quote {
-  background-color: #daebc6;
+  background-color: rgba(255, 255, 255, 0.4);
 }
 
 .chat-box .right .reply-quote {
-  background-color: #eee;
+  background-color: rgba(128, 128, 128, 0.12);
+}
+
+.reply-quote .inline-image {
+  vertical-align: middle;
 }
 
 #reply-quote-preview {

src/config.js

@@ -79,7 +79,7 @@ export const MAX_IMAGE_DIM = 1024;
 export const IMAGE_PREVIEW_DIM = 64;
 
 // Linear dimensions of image thumbnail: shrink image under this size for thumbnails in reply quote previews.
-export const IMAGE_THUMBNAIL_DIM = 25;
+export const IMAGE_THUMBNAIL_DIM = 36;
 
 // Maximum number of online users to be shown in a topic title bar. Others will be
 // hidden under "+X more"

src/i18n/de.json

@@ -429,7 +429,7 @@
   "invalid_content": {
     "translation": "ungültiger Inhalt",
     "defaultMessage": "invalid content",
-    "description": "Shown when message is unreadable",
+    "description": "Shown when the message is unreadable",
     "missing": false,
     "obsolete": false
   },

src/i18n/en.json

@@ -436,7 +436,7 @@
   "invalid_content": {
     "translation": "invalid content",
     "defaultMessage": "invalid content",
-    "description": "Shown when message is unreadable",
+    "description": "Shown when the message is unreadable",
     "missing": false,
     "obsolete": false
   },

src/i18n/es.json

@@ -429,7 +429,7 @@
   "invalid_content": {
     "translation": "contenido inválido",
     "defaultMessage": "invalid content",
-    "description": "Shown when message is unreadable",
+    "description": "Shown when the message is unreadable",
     "missing": false,
     "obsolete": false
   },

src/i18n/ex/base-en.json

@@ -253,7 +253,7 @@
   },
   "invalid_content": {
     "defaultMessage": "invalid content",
-    "description": "Shown when message is unreadable"
+    "description": "Shown when the message is unreadable"
   },
   "invalid_security_token": {
     "defaultMessage": "Invalid security token",

src/i18n/ko.json

@@ -429,7 +429,7 @@
   "invalid_content": {
     "translation": "잘못된내용",
     "defaultMessage": "invalid content",
-    "description": "Shown when message is unreadable",
+    "description": "Shown when the message is unreadable",
     "missing": false,
     "obsolete": false
   },

src/i18n/ro.json

@@ -429,7 +429,7 @@
   "invalid_content": {
     "translation": "conținut invalid",
     "defaultMessage": "invalid content",
-    "description": "Shown when message is unreadable",
+    "description": "Shown when the message is unreadable",
     "missing": false,
     "obsolete": false
   },

src/i18n/ru.json

@@ -429,7 +429,7 @@
   "invalid_content": {
     "translation": "сообщение не читается",
     "defaultMessage": "invalid content",
-    "description": "Shown when message is unreadable",
+    "description": "Shown when the message is unreadable",
     "missing": false,
     "obsolete": false
   },

src/i18n/zh-TW.json

@@ -429,7 +429,7 @@
   "invalid_content": {
     "translation": "內容無效",
     "defaultMessage": "invalid content",
-    "description": "Shown when message is unreadable",
+    "description": "Shown when the message is unreadable",
     "missing": false,
     "obsolete": false
   },

src/i18n/zh.json

@@ -429,7 +429,7 @@
   "invalid_content": {
     "translation": "无效内容",
     "defaultMessage": "invalid content",
-    "description": "Shown when message is unreadable",
+    "description": "Shown when the message is unreadable",
     "missing": false,
     "obsolete": false
   },

src/lib/formatters.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages } from 'react-intl';
 
 import { IMAGE_THUMBNAIL_DIM, BROKEN_IMAGE_SIZE, REM_SIZE } from '../config.js';
 import { fitImageSize } from './blob-helpers.js';
@@ -30,20 +30,20 @@ function handleImageData(el, data, attr) {
   if (!data) {
     attr.src = 'img/broken_image.png';
     attr.style = {
-      width: BROKEN_IMAGE_SIZE + 'px',
+      width: IMAGE_THUMBNAIL_DIM + 'px',
-      height: BROKEN_IMAGE_SIZE + 'px',
+      height: IMAGE_THUMBNAIL_DIM + 'px',
       // Looks like a Chrome bug: broken image does not respect 'width' and 'height'.
-      minWidth: BROKEN_IMAGE_SIZE + 'px',
+      minWidth: IMAGE_THUMBNAIL_DIM + 'px',
-      minHeight: BROKEN_IMAGE_SIZE + 'px'
+      minHeight: IMAGE_THUMBNAIL_DIM + 'px'
     };
     return el;
   }
 
   attr.className = 'inline-image';
   const dim = fitImageSize(data.width, data.height,
-    this.viewportWidth > 0 ?
+    this.viewportWidth > 0 ? Math.min(this.viewportWidth - REM_SIZE * 6.5, REM_SIZE * 34.5) :
-      Math.min(this.viewportWidth - REM_SIZE * 6.5, REM_SIZE * 34.5) : REM_SIZE * 34.5,
+      REM_SIZE * 34.5, REM_SIZE * 24, false) ||
-        REM_SIZE * 24, false) || {dstWidth: BROKEN_IMAGE_SIZE, dstHeight: BROKEN_IMAGE_SIZE};
+      {dstWidth: BROKEN_IMAGE_SIZE, dstHeight: BROKEN_IMAGE_SIZE};
   attr.style = {
     width: dim.dstWidth + 'px',
     height: dim.dstHeight + 'px',
@@ -147,6 +147,7 @@ export function fullFormatter(style, data, values, key) {
 // Converts Drafty object into a one-line preview. 'this' is set by the caller.
 // 'this' must contain:
 //    formatMessage: this.props.intl.formatMessage
+//    messages: formatjs messages defined with defineMessages.
 export function previewFormatter(style, data, values, key) {
   let el = Drafty.tagName(style);
   const attr = { key: key };
@@ -184,9 +185,13 @@ export function previewFormatter(style, data, values, key) {
         el = React.Fragment;
         break;
       case 'EX':
-        if (data && data.mime == 'application/json') {
+        if (data) {
-          // Ignore JSON attachments: they are form response payloads.
+          if (data.mime == 'application/json') {
-          return null;
+            // Ignore JSON attachments: they are form response payloads.
+            return null;
+          }
+          // Clear inband data.
+          data.val = null;
         }
         el = React.Fragment;
         values = [<i key="ex" className="material-icons">attachment</i>, this.formatMessage(messages.drafty_attachment)];
@@ -207,17 +212,20 @@ export function previewFormatter(style, data, values, key) {
 // Converts Drafty object into a quoted reply. 'this' is set by the caller.
 // 'this' must contain:
 //    formatMessage: this.props.intl.formatMessage
+//    messages: formatjs messages defined with defineMessages.
 //    authorizeURL: this.props.tinode.authorizeURL
 //    onQuoteClick: this.handleQuoteClick (optional)
 export function quoteFormatter(style, data, values, key) {
   if (['BR', 'IM', 'MN', 'QQ'].includes(style)) {
     let el = Drafty.tagName(style);
-    const attr = Drafty.attrValue(style, data) || {};
+    let attr = Drafty.attrValue(style, data) || {};
     attr.key = key;
     switch(style) {
       case 'IM':
-        el = handleImageData.call(this, el, data, attr);
+        const img = handleImageData.call(this, el, data, attr);
-        values = null;
+        values = [React.createElement(img, attr, null), ' ', this.formatMessage(messages.drafty_image)];
+        el = React.Fragment;
+        attr = {key: key};
         break;
       case 'MN':
         el = 'span';

src/views/messages-view.jsx

@@ -71,6 +71,11 @@ const messages = defineMessages({
     defaultMessage: 'Picture',
     description: 'Comment for embedded images in drafty preview'
   },
+  invalid_content: {
+    id: 'invalid_content',
+    defaultMessage: 'invalid content',
+    description: 'Shown when the message is unreadable'
+  },
 });
 
 // Checks if the access permissions are granted but not yet accepted.
@@ -848,6 +853,7 @@ class MessagesView extends React.Component {
 
   handlePickReply(seq, content) {
     this.setState({reply: null});
+
     if (!seq || !content) {
       return;
     }
@@ -855,7 +861,12 @@ class MessagesView extends React.Component {
     if (typeof content == 'string') {
       content = Drafty.init(content);
     }
-    content = Drafty.preview(content, 30);
+    if (Drafty.isValid(content)) {
+      content = Drafty.preview(content, 30);
+    } else {
+      content = Drafty.append(Drafty.init('\u26A0 '),
+        Drafty.wrapInto(this.props.intl.formatMessage(messages.invalid_content), 'EM'));
+    }
 
     // Get the author.
     const topic = this.props.tinode.getTopic(this.state.topic);
@@ -893,6 +904,8 @@ class MessagesView extends React.Component {
           ex.data.name = '';
           ex.data.width = IMAGE_THUMBNAIL_DIM;
           ex.data.height = IMAGE_THUMBNAIL_DIM;
+          ex.data.maxWidth = IMAGE_THUMBNAIL_DIM;
+          ex.data.maxHeight = IMAGE_THUMBNAIL_DIM;
         };
         const scale = (origBlob) => {
           imageScaled(origBlob, IMAGE_THUMBNAIL_DIM, IMAGE_THUMBNAIL_DIM, -1, false,
@@ -949,7 +962,7 @@ class MessagesView extends React.Component {
         // All done. Create a reply quote.
         this.setState({
           reply: {
-            content: Drafty.createQuote(senderName, senderId, content),
+            content: Drafty.quote(senderName, senderId, content),
             seq: seq
           }
         });
@@ -962,14 +975,12 @@ class MessagesView extends React.Component {
 
   handleQuoteClick(replyToSeq) {
     const ref = this.getOrCreateMessageRef(replyToSeq);
-    if (!ref) {
+    if (ref && ref.current) {
-      return;
+      ref.current.scrollIntoView({block: "center", behavior: "smooth"});
-    }
+      // ref.current.style.backgroundColor = 'rgb(0, 0, 0, 0.4)';
-    const element = ref.current;
+      ref.current.classList.add('flash');
-    if (element) {
+      setTimeout(() => { ref.current.classList.remove('flash') } , 1000);
-      element.scrollIntoView({block: "center", behavior: "smooth"});
+      //setTimeout(() => { ref.current.style.backgroundColor = ''; } , 1000);
-      element.style.backgroundColor = 'rgb(0, 0, 0, 0.4)';
-      setTimeout(() => { element.style.backgroundColor = ''; } , 1000);
     } else {
       console.error("Unresolved message ref: seqId", replyToSeq);
     }

src/widgets/chat-message.jsx

@@ -31,8 +31,9 @@ class BaseChatMessage extends React.PureComponent {
 
     this.formatterContext = {
       getFormatter: (tp) => { return tp == 'QQ' ? quoteFormatter : null; },
-      viewportWidth: this.props.viewportWidth,
+      formatMessage: props.intl.formatMessage,
-      authorizeURL: this.props.tinode.authorizeURL,
+      viewportWidth: props.viewportWidth,
+      authorizeURL: props.tinode.authorizeURL,
       onImagePreview: this.handleImagePreview,
       onFormButtonClick: this.handleFormButtonClick,
       onQuoteClick: this.handleQuoteClick
@@ -136,9 +137,9 @@ class BaseChatMessage extends React.PureComponent {
           defaultMessage="content deleted" description="Shown when messages are deleted" />
       </i></>
     } else if (typeof content != 'string') {
-      content = <><i className="material-icons gray">error_outline</i> <i className="gray">
+      content = <><i className="material-icons gray">warning_amber</i> <i className="gray">
         <FormattedMessage id="invalid_content"
-          defaultMessage="invalid content" description="Shown when message is unreadable" /></i></>
+          defaultMessage="invalid content" description="Shown when the message is unreadable" /></i></>
     }
 
     return (

src/widgets/contact.jsx

@@ -74,9 +74,9 @@ class Contact extends React.Component {
         Drafty.isValid(this.props.preview) ?
         React.createElement(React.Fragment, null, Drafty.format(this.props.preview, previewFormatter,
           {formatMessage: this.props.intl.formatMessage})) :
-        <><i className="material-icons gray">error_outline</i> <i className="gray">
+        <><i className="material-icons gray">warning_amber</i> <i className="gray">
           <FormattedMessage id="invalid_content"
-            defaultMessage="invalid content" description="Shown when message is unreadable" /></i>
+            defaultMessage="invalid content" description="Shown when the message is unreadable" /></i>
         </>
       ) :
       this.props.comment;

umd/index.dev.js

@@ -74,7 +74,7 @@ const MAX_INBAND_ATTACHMENT_SIZE = 262144;
 const MAX_EXTERN_ATTACHMENT_SIZE = 1 << 23;
 const MAX_IMAGE_DIM = 1024;
 const IMAGE_PREVIEW_DIM = 64;
-const IMAGE_THUMBNAIL_DIM = 25;
+const IMAGE_THUMBNAIL_DIM = 36;
 const MAX_ONLINE_IN_TOPIC = 4;
 const MAX_TITLE_LENGTH = 60;
 const MAX_TOPIC_DESCRIPTION_LENGTH = 360;
@@ -406,10 +406,10 @@ function handleImageData(el, data, attr) {
   if (!data) {
     attr.src = 'img/broken_image.png';
     attr.style = {
-      width: _config_js__WEBPACK_IMPORTED_MODULE_2__.BROKEN_IMAGE_SIZE + 'px',
+      width: _config_js__WEBPACK_IMPORTED_MODULE_2__.IMAGE_THUMBNAIL_DIM + 'px',
-      height: _config_js__WEBPACK_IMPORTED_MODULE_2__.BROKEN_IMAGE_SIZE + 'px',
+      height: _config_js__WEBPACK_IMPORTED_MODULE_2__.IMAGE_THUMBNAIL_DIM + 'px',
-      minWidth: _config_js__WEBPACK_IMPORTED_MODULE_2__.BROKEN_IMAGE_SIZE + 'px',
+      minWidth: _config_js__WEBPACK_IMPORTED_MODULE_2__.IMAGE_THUMBNAIL_DIM + 'px',
-      minHeight: _config_js__WEBPACK_IMPORTED_MODULE_2__.BROKEN_IMAGE_SIZE + 'px'
+      minHeight: _config_js__WEBPACK_IMPORTED_MODULE_2__.IMAGE_THUMBNAIL_DIM + 'px'
     };
     return el;
   }
@@ -565,8 +565,12 @@ function previewFormatter(style, data, values, key) {
         break;
 
       case 'EX':
-        if (data && data.mime == 'application/json') {
+        if (data) {
-          return null;
+          if (data.mime == 'application/json') {
+            return null;
+          }
+
+          data.val = null;
         }
 
         el = (react__WEBPACK_IMPORTED_MODULE_0___default().Fragment);
@@ -597,13 +601,17 @@ function previewFormatter(style, data, values, key) {
 function quoteFormatter(style, data, values, key) {
   if (['BR', 'IM', 'MN', 'QQ'].includes(style)) {
     let el = tinode_sdk__WEBPACK_IMPORTED_MODULE_6__.Drafty.tagName(style);
-    const attr = tinode_sdk__WEBPACK_IMPORTED_MODULE_6__.Drafty.attrValue(style, data) || {};
+    let attr = tinode_sdk__WEBPACK_IMPORTED_MODULE_6__.Drafty.attrValue(style, data) || {};
     attr.key = key;
 
     switch (style) {
       case 'IM':
-        el = handleImageData.call(this, el, data, attr);
+        const img = handleImageData.call(this, el, data, attr);
-        values = null;
+        values = [react__WEBPACK_IMPORTED_MODULE_0___default().createElement(img, attr, null), ' ', this.formatMessage(messages.drafty_image)];
+        el = (react__WEBPACK_IMPORTED_MODULE_0___default().Fragment);
+        attr = {
+          key: key
+        };
         break;
 
       case 'MN':
@@ -3131,6 +3139,13 @@ const messages = (0,react_intl__WEBPACK_IMPORTED_MODULE_1__.defineMessages)({
       "type": 0,
       "value": "Picture"
     }]
+  },
+  invalid_content: {
+    id: "invalid_content",
+    defaultMessage: [{
+      "type": 0,
+      "value": "invalid content"
+    }]
   }
 });
 
@@ -3939,7 +3954,12 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
       content = Drafty.init(content);
     }
 
-    content = Drafty.preview(content, 30);
+    if (Drafty.isValid(content)) {
+      content = Drafty.preview(content, 30);
+    } else {
+      content = Drafty.append(Drafty.init('\u26A0 '), Drafty.wrapInto(this.props.intl.formatMessage(messages.invalid_content), 'EM'));
+    }
+
     const topic = this.props.tinode.getTopic(this.state.topic);
     const msg = topic.findMessage(seq);
     let senderName, senderId;
@@ -3962,6 +3982,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
     const ents = [];
     Drafty.entities(content, (data, idx, tp) => {
       if (tp == 'IM') {
+        console.log("Image", data);
         ents.push({
           tp: tp,
           data: data
@@ -3975,10 +3996,14 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
           ex.data.name = '';
           ex.data.width = _config_js__WEBPACK_IMPORTED_MODULE_15__.IMAGE_THUMBNAIL_DIM;
           ex.data.height = _config_js__WEBPACK_IMPORTED_MODULE_15__.IMAGE_THUMBNAIL_DIM;
+          ex.data.maxWidth = _config_js__WEBPACK_IMPORTED_MODULE_15__.IMAGE_THUMBNAIL_DIM;
+          ex.data.maxHeight = _config_js__WEBPACK_IMPORTED_MODULE_15__.IMAGE_THUMBNAIL_DIM;
         };
 
         const scale = origBlob => {
+          console.log("Image scaling request");
           (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_16__.imageScaled)(origBlob, _config_js__WEBPACK_IMPORTED_MODULE_15__.IMAGE_THUMBNAIL_DIM, _config_js__WEBPACK_IMPORTED_MODULE_15__.IMAGE_THUMBNAIL_DIM, -1, false, (mime, blob, width, height, fname) => {
+            console.log("Image scaled:", width, height, fname);
             ex.data.mime = mime;
             ex.data.size = blob.size;
             ex.data.width = width;
@@ -4022,7 +4047,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
     }).finally(() => {
       this.setState({
         reply: {
-          content: Drafty.createQuote(senderName, senderId, content),
+          content: Drafty.quote(senderName, senderId, content),
           seq: seq
         }
       });
@@ -4038,20 +4063,14 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
   handleQuoteClick(replyToSeq) {
     const ref = this.getOrCreateMessageRef(replyToSeq);
 
-    if (!ref) {
+    if (ref && ref.current) {
-      return;
+      ref.current.scrollIntoView({
-    }
-
-    const element = ref.current;
-
-    if (element) {
-      element.scrollIntoView({
         block: "center",
         behavior: "smooth"
       });
-      element.style.backgroundColor = 'rgb(0, 0, 0, 0.4)';
+      ref.current.classList.add('flash');
       setTimeout(() => {
-        element.style.backgroundColor = '';
+        ref.current.classList.remove('flash');
       }, 1000);
     } else {
       console.error("Unresolved message ref: seqId", replyToSeq);
@@ -7586,8 +7605,9 @@ class BaseChatMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pure
       getFormatter: tp => {
         return tp == 'QQ' ? _lib_formatters_js__WEBPACK_IMPORTED_MODULE_6__.quoteFormatter : null;
       },
-      viewportWidth: this.props.viewportWidth,
+      formatMessage: props.intl.formatMessage,
-      authorizeURL: this.props.tinode.authorizeURL,
+      viewportWidth: props.viewportWidth,
+      authorizeURL: props.tinode.authorizeURL,
       onImagePreview: this.handleImagePreview,
       onFormButtonClick: this.handleFormButtonClick,
       onQuoteClick: this.handleQuoteClick
@@ -7707,7 +7727,7 @@ class BaseChatMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pure
     } else if (typeof content != 'string') {
       content = react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
         className: "material-icons gray"
-      }, "error_outline"), " ", react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
+      }, "warning_amber"), " ", react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
         className: "gray"
       }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
         id: "invalid_content",
@@ -8419,7 +8439,7 @@ class Contact extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component) {
       formatMessage: this.props.intl.formatMessage
     })) : react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
       className: "material-icons gray"
-    }, "error_outline"), " ", react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
+    }, "warning_amber"), " ", react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
       className: "gray"
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
       id: "invalid_content",