Restyle spawned messages

src/react-components/presence-log.js

@@ -8,7 +8,7 @@ import { FormattedMessage } from "react-intl";
 import serializeElement from "../utils/serialize-element";
 
 const messageCanvas = document.createElement("canvas");
-const presenceLogSpawnedStyle = `background-color: rgba(79, 79, 79, 0.45); padding: 8px 16px; border-radius: 16px;`;
+const presenceLogSpawnedStyle = `background-color: white; color: black; padding: 8px 16px; border-radius: 16px; font-weight: bold;`;
 const presenceLogPureEmojiStyle = `background-color: transparent; text-align: center;`;
 const emojiRegex = /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|[\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|[\ud83c[\ude32-\ude3a]|[\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/;
 const urlRegex = /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)$/;
@@ -42,7 +42,12 @@ function ChatMessage(props) {
       <svg xmlns="http://www.w3.org/2000/svg" width="${messageCanvas.width}" height="${messageCanvas.height}">
         <foreignObject width="8.33%" height="8.33%" style="transform: scale(12.0);">
           <div xmlns="http://www.w3.org/1999/xhtml" style="${style}">
-            ${serializeElement(el)}
+            ${serializeElement(el, [
+              "color",
+              "-webkit-text-fill-color",
+              "-webkit-text-stroke-color",
+              "-webkit-text-emphasis-color"
+            ])}
           </div>
         </foreignObject>
       </svg>

src/utils/serialize-element.js

@@ -154,7 +154,7 @@ function getDefaultStyleByTagName(tagName) {
   return defaultStylesByTagName[tagName];
 }
 
-export default function serializeElement(el) {
+export default function serializeElement(el, stylesToSkip = []) {
   if (Object.keys(defaultStylesByTagName).length === 0) {
     // Precompute the lookup tables.
     for (let i = 0; i < tagNames.length; i++) {