Add user's name on chat (#967)

Co-authored-by: Narayan soni <narayansoni854@gmail.com>
narayan954 · Jul 25, 2023 · 42c5cce · 42c5cce
1 parent 3fc1d4a
commit 42c5cce
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/src/components/CommunityChat/index.css b/src/components/CommunityChat/index.css
@@ -94,6 +94,16 @@
   box-shadow: 1px 1px 5px #59afc7;
 }
 
+.chat-msg-sender-name {
+  margin-bottom: 3px;
+  color: #59afc7;
+  cursor: pointer;
+}
+
+.chat-msg-sender-name:hover {
+  text-decoration: underline;
+}
+
 .current-user-msg > img {
   align-self: flex-start;
 }

diff --git a/src/components/CommunityChat/index.jsx b/src/components/CommunityChat/index.jsx
@@ -107,7 +107,14 @@ const ChatBox = () => {
                 className={"chat-user-img"}
                 onClick={() => goToUserProfile(message.uid)}
               />
-              <p className="chat-msg-text">{message.text}</p>
+              <div className="chat-msg-text">
+                <h5 
+                  className="chat-msg-sender-name" 
+                  onClick={() => goToUserProfile(message.uid)}>
+                  {message.displayName}
+                </h5>
+                <p>{message.text}</p>
+              </div>
             </li>
           ))}
         </ul>