Fix: Disable hover effect for User Action Messages (#795)

RocketChat · Jan 5, 2025 · 73f8fc0 · 73f8fc0
1 parent 843adf0
commit 73f8fc0
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git 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
@@ -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};