Merge pull request #33097 from Expensify/georgia-fixLightModeColors

Update Row Hover Color to Product300 and update Card / ReportPreview Hover Color
Expensify · Dec 18, 2023 · 771ec1e · 771ec1e
2 parents 1b091e0 + b43d4e6
commit 771ec1e
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 10 deletions.
diff --git 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.hoverComponentBG) : {}),
+        [StyleUtils, isReportActionLinked, theme.hoverComponentBG],
     );
     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
@@ -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.hoverComponentBG) : undefined]}
                 />
             );
         }

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -3770,8 +3770,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
@@ -41,7 +41,7 @@ const darkTheme = {
     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
@@ -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,
@@ -41,7 +41,7 @@ const lightTheme = {
     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/utils/index.ts b/src/styles/utils/index.ts
@@ -658,11 +658,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.hoverComponentBG : theme.border;
     }
 
     if (isPressed) {
-        borderColor = isInReportAction ? theme.highlightBG : theme.buttonPressedBG;
+        borderColor = isInReportAction ? theme.hoverComponentBG : theme.buttonPressedBG;
     }
 
     return {borderColor};