From b87076759c77051e1023c5918983739e4d10469b Mon Sep 17 00:00:00 2001
From: t1enne <nasir.taov@gmail.com>
Date: Mon, 3 Oct 2022 10:15:00 +0200
Subject: [PATCH] styled chat join messages

---
 .../chat/ChatJoinMessage/ChatJoinMessage.module.scss |  6 ++++--
 .../chat/ChatJoinMessage/ChatJoinMessage.tsx         | 12 ++++++++----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/web/components/chat/ChatJoinMessage/ChatJoinMessage.module.scss b/web/components/chat/ChatJoinMessage/ChatJoinMessage.module.scss
index 1757a2ed9..3943742a2 100644
--- a/web/components/chat/ChatJoinMessage/ChatJoinMessage.module.scss
+++ b/web/components/chat/ChatJoinMessage/ChatJoinMessage.module.scss
@@ -1,4 +1,6 @@
-.join {
-  padding: 5px;
+.root {
+  padding: 10px 0px;
   text-align: center;
+  font-size: .8rem;
+  font-style: italic;
 }
diff --git a/web/components/chat/ChatJoinMessage/ChatJoinMessage.tsx b/web/components/chat/ChatJoinMessage/ChatJoinMessage.tsx
index 466e22806..572a866cc 100644
--- a/web/components/chat/ChatJoinMessage/ChatJoinMessage.tsx
+++ b/web/components/chat/ChatJoinMessage/ChatJoinMessage.tsx
@@ -1,6 +1,7 @@
 import { FC } from 'react';
-import styles from './ChatJoinMessage.module.scss';
+import { TeamOutlined } from '@ant-design/icons';
 import { ChatUserBadge } from '../ChatUserBadge/ChatUserBadge';
+import styles from './ChatJoinMessage.module.scss';
 
 export type ChatJoinMessageProps = {
   isAuthorModerator: boolean;
@@ -13,12 +14,15 @@ export const ChatJoinMessage: FC<ChatJoinMessageProps> = ({
   userColor,
   displayName,
 }) => {
-  const color = `var(--theme-user-colors-${userColor})`;
+  const color = `var(--theme-color-users-${userColor})`;
 
   return (
-    <div className={styles.join}>
+    <div className={styles.root}>
       <span style={{ color }}>
-        {displayName}
+        <span style={{ padding: '0 10px' }}>
+          <TeamOutlined />
+        </span>
+        <span style={{ fontWeight: 'bold' }}>{displayName}</span>
         {isAuthorModerator && (
           <span>
             <ChatUserBadge badge="mod" userColor={userColor} />