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;