fix message highlight color

src/pages/home/report/ReportActionItem.tsx

@@ -197,8 +197,8 @@ function ReportActionItem({
     const reportScrollManager = useReportScrollManager();
 
     const highlightedBackgroundColorIfNeeded = useMemo(
-        () => (isReportActionLinked ? StyleUtils.getBackgroundColorStyle(theme.hoverComponentBG) : {}),
-        [StyleUtils, isReportActionLinked, theme.hoverComponentBG],
+        () => (isReportActionLinked ? StyleUtils.getBackgroundColorStyle(theme.messageHighlight) : {}),
+        [StyleUtils, isReportActionLinked, theme.messageHighlight],
     );
 
     const isDeletedParentAction = ReportActionsUtils.isDeletedParentAction(action);

src/styles/theme/colors.ts

@@ -28,6 +28,7 @@ const colors: Record<string, Color> = {
     productDark700: '#8B9C8F',
     productDark800: '#AFBBB0',
     productDark900: '#E7ECE9',
+    messageHightlightDark: '#402B02',
 
     // Light Mode Theme Colors
     productLight100: '#FCFBF9',

src/styles/theme/themes/dark.ts

@@ -46,6 +46,7 @@ const darkTheme = {
     shadow: colors.black,
     componentBG: colors.productDark100,
     hoverComponentBG: colors.productDark300,
+    messageHighlight: colors.messageHightlightDark,
     activeComponentBG: colors.productDark400,
     signInSidebar: colors.green800,
     sidebar: colors.productDark100,

src/styles/theme/themes/light.ts

@@ -45,6 +45,7 @@ const lightTheme = {
     inverse: colors.productLight900,
     shadow: colors.black,
     componentBG: colors.productLight100,
+    messageHighlight: colors.yellow100,
     hoverComponentBG: colors.productLight300,
     activeComponentBG: colors.productLight400,
     signInSidebar: colors.green800,

src/styles/theme/types.ts

@@ -11,6 +11,7 @@ type ThemeColors = {
     appBG: Color;
     splashBG: Color;
     highlightBG: Color;
+    messageHighlight: Color;
     border: Color;
     borderLighter: Color;
     borderFocus: Color;