Update chat styling

webroot/js/utils/chat.js

@@ -64,7 +64,6 @@ export function extraUserNamesFromMessageHistory(messages) {
   return list;
 }
 
-
 // utils from https://gist.github.com/nathansmith/86b5d4b23ed968a92fd4
 /*
   You would call this after getting an element's

webroot/js/utils/user-colors.js

@@ -6,9 +6,25 @@ export function messageBubbleColorForString(str) {
   }
 
   // Tweak these to adjust the result of the color
-  const saturation = 75;
-  const lightness = 65;
-  const alpha = 1.0;
+  const saturation = 25;
+  const lightness = 45;
+  const alpha = 0.3;
+  const hue = parseInt(Math.abs(hash), 16) % 360;
+
+  return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
+}
+
+export function textColorForString(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    // eslint-disable-next-line
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+
+  // Tweak these to adjust the result of the color
+  const saturation = 80;
+  const lightness = 80;
+  const alpha = 0.8;
   const hue = parseInt(Math.abs(hash), 16) % 360;
 
   return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;

webroot/js/utils/websocket.js

@@ -7,7 +7,8 @@ export const SOCKET_MESSAGE_TYPES = {
   CHAT: 'CHAT',
   PING: 'PING',
   NAME_CHANGE: 'NAME_CHANGE',
-  PONG: 'PONG'
+  PONG: 'PONG',
+  SYSTEM: 'SYSTEM'
 };
 
 export const CALLBACKS = {