From cf53951c39d5b9d0913b56521d679f28e5b09371 Mon Sep 17 00:00:00 2001
From: Akshun-01 <akshunkuthiala2002@gmail.com>
Date: Tue, 20 Feb 2024 23:34:33 +0530
Subject: [PATCH] add message to be pinned in confirmation modal

---
 .../react/src/components/Message/Message.js   | 30 ++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/packages/react/src/components/Message/Message.js b/packages/react/src/components/Message/Message.js
index eef270020..e42f64f2f 100644
--- a/packages/react/src/components/Message/Message.js
+++ b/packages/react/src/components/Message/Message.js
@@ -288,20 +288,28 @@ const Message = ({
           <Modal.Content css={css`margin: 1em;`}> Are you sure you want to pin this message? </Modal.Content>
           <Modal.Content css={css`margin: 1em;`}> 
           {/* Add the isPinned prop after that gets merged */}
-            <MessageAvatarContainer message={message} sequential={sequential} isStarred={isStarred} /> 
-            <MessageHeader message={message} isTimeStamped={false} />
+          <Box key={message._id} css={MessageCss}>
+            {showAvatar && (
+                <MessageAvatarContainer
+                    message={message}
+                    sequential={false}
+                    isStarred={false}
+                />
+            )}
             <MessageBodyContainer>
-              <MessageBody>
-                  {message.attachments && message.attachments.length > 0 ? (
-                      message.file.namexxx
-                  ) : (
-                      message.msg
-                  )}
-              </MessageBody>
-            </MessageBodyContainer>
+                <MessageHeader message={message} isTimeStamped={false} />
+                <MessageBody>
+                    {message.attachments && message.attachments.length > 0 ? (
+                        message.file.name
+                    ) : (
+                        message.msg
+                    )}
+                </MessageBody>
+              </MessageBodyContainer>
+          </Box>
           </Modal.Content>
           <Modal.Content css={css`margin: 1em;`}> 
-            Pinned messages are visible to everyone <br />
+            <span css={css`font-weight:bold; display:block;`}>Pinned messages are visible to everyone</span>
             Starred messages are only visible to you 
           </Modal.Content>
           <Modal.Footer>