From ce724fa073f7383caf72d9fc64ca30503514f307 Mon Sep 17 00:00:00 2001
From: janWilejan <119548498+janWilejan@users.noreply.github.com>
Date: Wed, 28 Jun 2023 16:58:07 +0000
Subject: [PATCH] username of repeat chat messages is display:none (#3101)

users who want to show repeat usernames can inject the following CSS:
[class^="ChatUserMessage_repeatUser"]{display:flex !important;}

Co-authored-by: janWilejan <>
---
 .../ChatUserMessage/ChatUserMessage.module.scss    |  5 +++++
 .../chat/ChatUserMessage/ChatUserMessage.tsx       | 14 ++++++--------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss b/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
index 6a4780e70..1f6319d94 100644
--- a/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
+++ b/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
@@ -26,6 +26,11 @@ $p-v-size: 2px;
     font-weight: 600;
   }
 
+  .repeatUser {
+    @extend .user;
+    display: none;
+  }
+
   .userBadges {
     margin-left: 3px;
   }
diff --git a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx b/web/components/chat/ChatUserMessage/ChatUserMessage.tsx
index 829601035..7d9bfee06 100644
--- a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx
+++ b/web/components/chat/ChatUserMessage/ChatUserMessage.tsx
@@ -98,14 +98,12 @@ export const ChatUserMessage: FC<ChatUserMessageProps> = ({
       >
         <div className={styles.background} style={{ color }} />
 
-        {!sameUserAsLast && (
-          <UserTooltip user={user}>
-            <div className={styles.user} style={{ color }}>
-              <span className={styles.userName}>{displayName}</span>
-              <span className={styles.userBadges}>{badgeNodes}</span>
-            </div>
-          </UserTooltip>
-        )}
+        <UserTooltip user={user}>
+          <div className={sameUserAsLast ? styles.repeatUser : styles.user} style={{ color }}>
+            <span className={styles.userName}>{displayName}</span>
+            <span className={styles.userBadges}>{badgeNodes}</span>
+          </div>
+        </UserTooltip>
         <Tooltip title={formattedTimestamp} mouseEnterDelay={1}>
           <Interweave
             className={styles.message}