fix: added star icon to message header (#300)

* fix: added star icon to message header * fix: made changes * removed unused imports
RocketChat · Nov 9, 2023 · 32f9364 · 32f9364
1 parent f9855d3
commit 32f9364
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 1 deletion.
diff --git a/packages/react/src/components/Message/Message.js b/packages/react/src/components/Message/Message.js
@@ -179,13 +179,34 @@ const Message = ({
               width: '100%',
             }}
           >
-            {showAvatar && (
+            {!sequential && showAvatar ? (
               <Box style={{ margin: '3px' }}>
                 <Avatar
                   url={getUserAvatarUrl(message.u.username)}
                   alt="avatar"
                 />
               </Box>
+            ) : message.starred &&
+              message.starred.find((u) => u._id === authenticatedUserId) ? (
+              <Box
+                style={{
+                  margin: '3px',
+                  marginTop: '15px',
+                  marginLeft: '20px',
+                }}
+              >
+                <Icon
+                  style={{ opacity: 0.5 }}
+                  name="star-filled"
+                  size="1.2em"
+                />
+              </Box>
+            ) : (
+              <Box
+                style={{
+                  marginLeft: '42px',
+                }}
+              ></Box>
             )}
             <Box
               style={{

diff --git a/packages/react/src/components/Message/MessageHeader.js b/packages/react/src/components/Message/MessageHeader.js
@@ -57,6 +57,8 @@ const MessageHeaderTimestapCss = css`
   color: #9ea2a8;
 `;
 
+const authenticatedUserId = useUserStore(state => state.userId);
+
 const MessageHeader = ({ message }) => {
   const { styleOverrides, classNames } = useComponentOverrides('MessageHeader');
   const roles = useUserStore((state) => state.roles);
@@ -126,6 +128,13 @@ const MessageHeader = ({ message }) => {
             size="1em"
           />
         )}
+        {message.starred && message.starred.find((u) => u._id === authenticatedUserId) && (
+          <Icon
+            style={{ marginInlineEnd: '0.4rem', opacity: 0.5 }}
+            name="star"
+            size="1em"
+          />
+        )}
       </Box>
     );
   }