colorize user names under messages

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">
-              <FormattedMessage id="user_not_found" defaultMessage="Not found"
-                description="In place of a user's full name when the user is not found.">{
-                    (notFound) => {return this.props.userName || <i>{notFound}</i>}
-              }</FormattedMessage>
+            <div className={'author' + (this.props.userName ? idToColorClass(this.props.userFrom) : '')}>
+              {this.props.userName ||
+                <i><FormattedMessage id="user_not_found" defaultMessage="Not found"
+                description="In place of a user's full name when the user is not found." /></i>
+              }
             </div>
             : null
           }