Merge pull request #39346 from nkdengineer/fix/38851

fix message highlight color
Expensify · Apr 3, 2024 · 7d5dbf6 · 7d5dbf6
2 parents 7cdb17b + 6743c61
commit 7d5dbf6
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 2 deletions.
diff --git a/src/pages/home/report/ReportActionItem.tsx b/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.messageHighlightBG) : {}),
+        [StyleUtils, isReportActionLinked, theme.messageHighlightBG],
     );
 
     const isDeletedParentAction = ReportActionsUtils.isDeletedParentAction(action);

diff --git a/src/styles/theme/colors.ts b/src/styles/theme/colors.ts
@@ -28,6 +28,7 @@ const colors: Record<string, Color> = {
     productDark700: '#8B9C8F',
     productDark800: '#AFBBB0',
     productDark900: '#E7ECE9',
+    messageHighlightDark: '#402B02',
 
     // Light Mode Theme Colors
     productLight100: '#FCFBF9',

diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts
@@ -46,6 +46,7 @@ const darkTheme = {
     shadow: colors.black,
     componentBG: colors.productDark100,
     hoverComponentBG: colors.productDark300,
+    messageHighlightBG: colors.messageHighlightDark,
     activeComponentBG: colors.productDark400,
     signInSidebar: colors.green800,
     sidebar: colors.productDark100,

diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts
@@ -45,6 +45,7 @@ const lightTheme = {
     inverse: colors.productLight900,
     shadow: colors.black,
     componentBG: colors.productLight100,
+    messageHighlightBG: colors.yellow100,
     hoverComponentBG: colors.productLight300,
     activeComponentBG: colors.productLight400,
     signInSidebar: colors.green800,

diff --git a/src/styles/theme/types.ts b/src/styles/theme/types.ts
@@ -11,6 +11,7 @@ type ThemeColors = {
     appBG: Color;
     splashBG: Color;
     highlightBG: Color;
+    messageHighlightBG: Color;
     border: Color;
     borderLighter: Color;
     borderFocus: Color;