fix(chat): use css for arrow (#4097)

css/_chat.scss

@@ -178,7 +178,10 @@
 }
 
 .chatArrow {
-    height: 15px;
+    border-color:
+        transparent $newToolbarBackgroundColor transparent transparent;
+    border-style: solid;
+    border-width: 0 10px 10px 0;
     left: -10px;
     position: absolute;
 }

images/chatArrow.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="258.559px" height="396.871px" viewBox="0 0 258.559 396.871" enable-background="new 0 0 258.559 396.871"
-	 xml:space="preserve">
-<g id="u6PRpE_1_">
-	<g>
-		<path fill="#3A3A3A" d="M341.829,396.871c0,0-16.524-193.936-258.445-396.871c86.17,0,258.445,0,258.445,0V396.871z"/>
-	</g>
-</g>
-</svg>

react/features/chat/components/web/ChatMessage.js

@@ -69,9 +69,7 @@ class ChatMessage extends AbstractChatMessage<Props> {
 
         return (
             <div className = { `chatmessage ${messageTypeClassname}` }>
-                <img
-                    className = 'chatArrow'
-                    src = 'images/chatArrow.svg' />
+                <div className = 'chatArrow' />
                 <div className = 'display-name'>
                     { message.displayName }
                 </div>