From 73f8fc08041f9190e541709f178a594f7543dc54 Mon Sep 17 00:00:00 2001
From: Dhairyashil Shinde <93669429+dhairyashiil@users.noreply.github.com>
Date: Sun, 5 Jan 2025 15:42:49 +0530
Subject: [PATCH] Fix: Disable hover effect for User Action Messages (#795)

---
 packages/react/src/views/Message/Message.js    | 18 ++++++++++++++++++
 .../react/src/views/Message/Message.styles.js  |  9 +--------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/views/Message/Message.js b/packages/react/src/views/Message/Message.js
index 2a56b20b7..03c558c76 100644
--- a/packages/react/src/views/Message/Message.js
+++ b/packages/react/src/views/Message/Message.js
@@ -7,6 +7,8 @@ import {
   useComponentOverrides,
   appendClassNames,
   useTheme,
+  lighten,
+  darken,
 } from '@embeddedchat/ui-elements';
 import { Attachments } from '../AttachmentHandler';
 import { Markdown } from '../Markdown';
@@ -72,8 +74,23 @@ const Message = ({
   }));
 
   const isMe = message.u._id === authenticatedUserId;
+
   const theme = useTheme();
+  const { mode } = useTheme();
   const styles = getMessageStyles(theme);
+  const hasType = Boolean(message.t);
+
+  const hoverStyle = hasType
+    ? {}
+    : {
+        '&:hover': {
+          backgroundColor:
+            mode === 'light'
+              ? darken(theme.theme.colors.background, 0.03)
+              : lighten(theme.theme.colors.background, 1),
+        },
+      };
+
   const bubbleStyles = useBubbleStyles(isMe);
   const pinRoles = new Set(pinPermissions);
   const editMessageRoles = new Set(editMessagePermissions);
@@ -195,6 +212,7 @@ const Message = ({
         className={appendClassNames('ec-message', classNames)}
         css={[
           variantStyles.messageParent || styles.main,
+          hoverStyle,
           editMessage._id === message._id && styles.messageEditing,
         ]}
         style={styleOverrides}
diff --git a/packages/react/src/views/Message/Message.styles.js b/packages/react/src/views/Message/Message.styles.js
index 9f9358fd9..8c380d241 100644
--- a/packages/react/src/views/Message/Message.styles.js
+++ b/packages/react/src/views/Message/Message.styles.js
@@ -1,7 +1,6 @@
 import { css } from '@emotion/react';
-import { lighten, darken } from '@embeddedchat/ui-elements';
 
-export const getMessageStyles = ({ theme, mode }) => {
+export const getMessageStyles = ({ theme }) => {
   const styles = {
     main: css`
       display: flex;
@@ -12,12 +11,6 @@ export const getMessageStyles = ({ theme, mode }) => {
       padding-left: 2.25rem;
       padding-right: 2.25rem;
       color: ${theme.colors.foreground};
-
-      &:hover {
-        background-color: ${mode === 'light'
-          ? darken(theme.colors.background, 0.03)
-          : lighten(theme.colors.background, 1)};
-      }
     `,
     messageEditing: css`
       background-color: ${theme.colors.secondary};