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
leemonade · Apr 19, 2024 · fea8f0d · fea8f0d
1 parent 1174368
commit fea8f0d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git 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
@@ -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',