Updated styles to match design for chat msgs

web/components/chat/ChatContainer/ChatContainer.tsx

@@ -53,9 +53,10 @@ function shouldCollapseMessages(messages: ChatMessage[], index: number): boolean
   return id === lastMessage?.user.id;
 }
 
-function checkIsModerator(message) {
+function checkIsModerator(message: ChatMessage | ConnectedClientInfoEvent) {
-  const { user } = message;
+  const {
-  const { scopes } = user;
+    user: { scopes },
+  } = message;
 
   if (!scopes || scopes.length === 0) {
     return false;
@@ -97,8 +98,9 @@ export const ChatContainer: FC<ChatContainerProps> = ({
   };
 
   const getUserJoinedMessage = (message: ChatMessage) => {
-    const { user } = message;
+    const {
-    const { displayName, displayColor } = user;
+      user: { displayName, displayColor },
+    } = message;
     const isAuthorModerator = checkIsModerator(message);
     return (
       <ChatJoinMessage

web/components/chat/ChatUserMessage/ChatUserMessage.module.scss

@@ -1,12 +1,14 @@
+$border-style: 3px solid currentColor;
+$p-size: 5px;
+
 .root {
   * {
     z-index: 100;
   }
-  border-right: 2px solid currentColor;
+  border-left: $border-style;
   position: relative;
   font-size: 0.9rem;
-  padding: 0px 15px 5px 5px;
+  padding: 0px $p-size $p-size $p-size;
-  padding-left: 1rem;
   .user {
     display: flex;
     align-items: center;
@@ -17,7 +19,7 @@
   .message {
     overflow: hidden;
     overflow-wrap: anywhere;
-    color: var(--theme-color-components-chat-text);
+    font-weight: 600;
 
     mark {
       padding-left: 0.35em;
@@ -27,9 +29,6 @@
   }
 
   &.ownMessage {
-    border-right: none;
-    border-left: 2px solid currentColor;
-
     .background {
       position: absolute;
       z-index: -1;
@@ -61,5 +60,10 @@
 }
 
 .messagePadding {
-  padding: 0px 3px;
+  padding: 0px 0px;
+  padding-top: .4rem;
+}
+
+.messagePaddingCollapsed {
+  padding: 0px 0px;
 }