From 84f5d04b19a7c6293965455cd637b4d81ac80f48 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Thu, 14 Dec 2023 09:45:35 -0800
Subject: [PATCH] change reportActionItem hover color and card hover color

---
 src/pages/home/report/ReportActionItem.js       | 4 ++--
 src/pages/home/report/ReportActionItemSingle.js | 2 +-
 src/styles/index.ts                             | 4 ++--
 src/styles/theme/themes/dark.ts                 | 3 ++-
 src/styles/theme/themes/light.ts                | 5 +++--
 src/styles/theme/types.ts                       | 1 +
 src/styles/utils/index.ts                       | 4 ++--
 7 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index 2e888a5471b8..2977a937dc83 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -148,8 +148,8 @@ function ReportActionItem(props) {
     const isReportActionLinked = props.linkedReportActionID === props.action.reportActionID;
 
     const highlightedBackgroundColorIfNeeded = useMemo(
-        () => (isReportActionLinked ? StyleUtils.getBackgroundColorStyle(theme.highlightBG) : {}),
-        [StyleUtils, isReportActionLinked, theme.highlightBG],
+        () => (isReportActionLinked ? StyleUtils.getBackgroundColorStyle(theme.rowHover) : {}),
+        [StyleUtils, isReportActionLinked, theme.rowHover],
     );
     const originalMessage = lodashGet(props.action, 'originalMessage', {});
     const isDeletedParentAction = ReportActionsUtils.isDeletedParentAction(props.action);
diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js
index 81827073aa49..87cc8708f3cc 100644
--- a/src/pages/home/report/ReportActionItemSingle.js
+++ b/src/pages/home/report/ReportActionItemSingle.js
@@ -170,7 +170,7 @@ function ReportActionItemSingle(props) {
                     icons={[icon, secondaryAvatar]}
                     isInReportAction
                     shouldShowTooltip
-                    secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(theme.appBG), props.isHovered ? StyleUtils.getBackgroundAndBorderStyle(theme.highlightBG) : undefined]}
+                    secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(theme.appBG), props.isHovered ? StyleUtils.getBackgroundAndBorderStyle(theme.rowHover) : undefined]}
                 />
             );
         }
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 9e02335bde0d..042501dc3b0f 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -3706,8 +3706,8 @@ const styles = (theme: ThemeColors) =>
         },
 
         reportPreviewBoxHoverBorder: {
-            borderColor: theme.border,
-            backgroundColor: theme.border,
+            borderColor: theme.cardBG,
+            backgroundColor: theme.cardBG,
         },
 
         reportContainerBorderRadius: {
diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts
index 714802095810..05c057a66a6a 100644
--- a/src/styles/theme/themes/dark.ts
+++ b/src/styles/theme/themes/dark.ts
@@ -35,13 +35,14 @@ const darkTheme = {
     transparent: colors.transparent,
     signInPage: colors.green800,
     darkSupportingText: colors.productDark800,
+    rowHover: colors.productDark300,
 
     // Additional keys
     overlay: colors.productDark400,
     inverse: colors.productDark900,
     shadow: colors.black,
     componentBG: colors.productDark100,
-    hoverComponentBG: colors.productDark200,
+    hoverComponentBG: colors.productDark300,
     activeComponentBG: colors.productDark400,
     signInSidebar: colors.green800,
     sidebar: colors.productDark200,
diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts
index 8d401f7533d7..072582a90bdf 100644
--- a/src/styles/theme/themes/light.ts
+++ b/src/styles/theme/themes/light.ts
@@ -9,7 +9,7 @@ const lightTheme = {
     splashBG: colors.green400,
     highlightBG: colors.productLight200,
     border: colors.productLight400,
-    borderLighter: colors.productLight600,
+    borderLighter: colors.productLight400,
     borderFocus: colors.green400,
     icon: colors.productLight700,
     iconMenu: colors.green400,
@@ -35,13 +35,14 @@ const lightTheme = {
     transparent: colors.transparent,
     signInPage: colors.green800,
     darkSupportingText: colors.productDark800,
+    rowHover: colors.productLight300,
 
     // Additional keys
     overlay: colors.productLight400,
     inverse: colors.productLight900,
     shadow: colors.black,
     componentBG: colors.productLight100,
-    hoverComponentBG: colors.productLight200,
+    hoverComponentBG: colors.productLight300,
     activeComponentBG: colors.productLight400,
     signInSidebar: colors.green800,
     sidebar: colors.productLight200,
diff --git a/src/styles/theme/types.ts b/src/styles/theme/types.ts
index 56da65ddd17d..549f7243187f 100644
--- a/src/styles/theme/types.ts
+++ b/src/styles/theme/types.ts
@@ -38,6 +38,7 @@ type ThemeColors = {
     transparent: Color;
     signInPage: Color;
     darkSupportingText: Color;
+    rowHover: Color;
 
     // Additional keys
     overlay: Color;
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index c392e61f0814..4bc91633b558 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -665,11 +665,11 @@ function getHorizontalStackedAvatarBorderStyle({theme, isHovered, isPressed, isI
     let borderColor = shouldUseCardBackground ? theme.cardBG : theme.appBG;
 
     if (isHovered) {
-        borderColor = isInReportAction ? theme.highlightBG : theme.border;
+        borderColor = isInReportAction ? theme.rowHover : theme.border;
     }
 
     if (isPressed) {
-        borderColor = isInReportAction ? theme.highlightBG : theme.buttonPressedBG;
+        borderColor = isInReportAction ? theme.rowHover : theme.buttonPressedBG;
     }
 
     return {borderColor};