Add standalone join message with user badge

web/components/chat/ChatUserBadge/ChatUserBadge.module.scss

@@ -0,0 +1,13 @@
+@import 'styles/mixins.scss';
+
+.badge {
+  font-family: var(--theme-header-font-family);
+  font-weight: 500;
+  font-size: 0.4em;
+  text-transform: uppercase;
+  padding: 2px;
+  border-radius: 3px;
+  border-width: 1px;
+  border-style: solid;
+  margin-left: 3px;
+}

web/components/chat/ChatUserBadge/ChatUserBadge.tsx

@@ -0,0 +1,18 @@
+import s from './ChatUserBadge.module.scss';
+
+interface Props {
+  badge: string;
+  userColor: number;
+}
+
+export default function ChatUserBadge(props: Props) {
+  const { badge, userColor } = props;
+  const color = `var(--theme-user-colors-${userColor})`;
+  const style = { color, borderColor: color };
+
+  return (
+    <span style={style} className={s.badge}>
+      {badge}
+    </span>
+  );
+}