From fea8f0d1343f3fbd1ecf39512e2b4b665ef9932f Mon Sep 17 00:00:00 2001
From: Borja Gracia <volcanos23@gmail.com>
Date: Fri, 19 Apr 2024 09:37:48 +0200
Subject: [PATCH] Bug: Ajustes refactor Comunica v3 (#141)

Issues resolved on Comunica:
- Added margin for messages from other users
- Align avatar icon in chat room
---
Reviewed-by: @johan-fx
Ref: #141
---
 .../src/informative/ChatMessage/ChatMessage.js         |  2 +-
 .../src/informative/ChatMessage/ChatMessage.styles.js  | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/informative/ChatMessage/ChatMessage.js b/packages/components/src/informative/ChatMessage/ChatMessage.js
index 8d28c5231..fc3792bb1 100644
--- a/packages/components/src/informative/ChatMessage/ChatMessage.js
+++ b/packages/components/src/informative/ChatMessage/ChatMessage.js
@@ -33,7 +33,7 @@ const ChatMessage = ({
         </Box>
       ) : null}
 
-      <Box className={classes.messageBox}>
+      <Box className={showUser && !isOwn ? classes.messageBox : classes.messageBoxNoAvatar}>
         {!isOwn && showUserName && fullName && (
           <Highlight className={classes.name} highlight={highlight}>
             {fullName}
diff --git a/packages/components/src/informative/ChatMessage/ChatMessage.styles.js b/packages/components/src/informative/ChatMessage/ChatMessage.styles.js
index 24209ff14..2706612da 100644
--- a/packages/components/src/informative/ChatMessage/ChatMessage.styles.js
+++ b/packages/components/src/informative/ChatMessage/ChatMessage.styles.js
@@ -16,7 +16,7 @@ export const ChatMessageStyles = createStyles(
         background: selected ? '#E4F4E6' : 'transparent',
         display: 'flex',
         justifyContent: isOwn ? 'end' : 'start',
-        alignItems: 'end',
+        alignItems: 'start',
         gap: theme.spacing[1],
         transition: 'background 0.3s ease',
         borderRadius: '4px 2px 2px 4px',
@@ -36,6 +36,14 @@ export const ChatMessageStyles = createStyles(
         backgroundColor: '#FFFFFF',
         ...messageBox,
       },
+      messageBoxNoAvatar: {
+        marginLeft: 28,
+        padding: theme.spacing[2],
+        paddingLeft: theme.spacing[3],
+        borderRadius: '2px',
+        backgroundColor: '#FFFFFF',
+        ...messageBox,
+      },
       messageBoxInner: {
         display: 'flex',
         alignItems: 'end',