colorize user names under messages

src/lib/strformat.js

@@ -39,7 +39,7 @@ export function bytesToHumanSize(bytes) {
 
 // Get 32 bit integer hash value for a string. Ideally it should produce the same value
 // as Java's String#hash().
-export function stringHash(value) {
+function stringToColorHash(value) {
   let hash = 0;
   value = '' + value;
   for (let i = 0; i < value.length; i++) {
@@ -48,3 +48,8 @@ export function stringHash(value) {
   }
   return hash;
 }
+
+// Converts user or topic ID to a CSS color class. Ideally it should produce the same color value as Java version.
+export function idToColorClass(string, light) {
+  return (light ? 'light-color' : 'dark-color') + (Math.abs(stringToColorHash(string)) % 16);
+}

src/widgets/chat-message.jsx

@@ -7,6 +7,8 @@ import Attachment from './attachment.jsx';
 import LetterTile from './letter-tile.jsx';
 import ReceivedMarker from './received-marker.jsx'
 import UploadingImage from './uploading-image.jsx'
+
+import { idToColorClass } from '../lib/strformat.js';
 import { sanitizeImageUrl, sanitizeUrl } from '../lib/utils.js';
 
 export default class ChatMessage extends React.Component {
@@ -152,11 +154,11 @@ export default class ChatMessage extends React.Component {
             }
           </div>
           {fullDisplay ?
-            <div className="author">
+            <div className={'author' + (this.props.userName ? idToColorClass(this.props.userFrom) : '')}>
-              <FormattedMessage id="user_not_found" defaultMessage="Not found"
+              {this.props.userName ||
-                description="In place of a user's full name when the user is not found.">{
+                <i><FormattedMessage id="user_not_found" defaultMessage="Not found"
-                    (notFound) => {return this.props.userName || <i>{notFound}</i>}
+                description="In place of a user's full name when the user is not found." /></i>
-              }</FormattedMessage>
+              }
             </div>
             : null
           }

src/widgets/letter-tile.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import Tinode from 'tinode-sdk';
 
-import { stringHash } from '../lib/strformat.js';
+import { idToColorClass } from '../lib/strformat.js';
 import { sanitizeImageUrl } from '../lib/utils.js';
 
 export default class LetterTile extends React.PureComponent {
@@ -10,8 +10,7 @@ export default class LetterTile extends React.PureComponent {
     let avatar;
     if (this.props.avatar === true) {
       const isGroup = (Tinode.topicType(this.props.topic) == 'grp');
-      const iconColor = (isGroup ? 'light-color' : 'dark-color')
+      const iconColor = idToColorClass(this.props.topic, isGroup);
-        + (Math.abs(stringHash(this.props.topic)) % 16);
       if (this.props.topic && this.props.title && this.props.title.trim()) {
         const letter = this.props.title.trim().charAt(0);
         const className = 'lettertile ' + iconColor;