Merge pull request #32721 from Expensify/georgia-splitButtonHoverThemes

[Deploy Blocker Fix] Fix Split/Add to Group Button Highlight Color and Skeleton UI (cherry picked from commit d4fb27a)
Expensify · Dec 8, 2023 · c2a409a · c2a409a
1 parent d7eef2d
commit c2a409a
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 5 deletions.
diff --git a/src/components/EReceiptThumbnail.js b/src/components/EReceiptThumbnail.js
@@ -72,7 +72,7 @@ function EReceiptThumbnail({transaction}) {
         receiptMCCSize = variables.eReceiptMCCHeightWidthMedium;
     }
 
-    const getBackgroundImage = useMemo((trans) => backgroundImages[StyleUtils.getEReceiptColorCode(trans)], [StyleUtils]);
+    const backgroundImage = useMemo(() => backgroundImages[StyleUtils.getEReceiptColorCode(transaction)], [StyleUtils, transaction]);
 
     return (
         <View
@@ -86,7 +86,7 @@ function EReceiptThumbnail({transaction}) {
             onLayout={onContainerLayout}
         >
             <Image
-                source={getBackgroundImage(transaction)}
+                source={backgroundImage}
                 style={styles.eReceiptBackgroundThumbnail}
                 resizeMode="cover"
             />

diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js
@@ -196,7 +196,7 @@ function OptionRow(props) {
                         accessibilityLabel={props.option.text}
                         role={CONST.ACCESSIBILITY_ROLE.BUTTON}
                         hoverDimmingValue={1}
-                        hoverStyle={props.hoverStyle || styles.sidebarLinkHover}
+                        hoverStyle={!props.optionIsFocused ? props.hoverStyle || styles.sidebarLinkHover : undefined}
                         needsOffscreenAlphaCompositing={lodashGet(props.option, 'icons.length', 0) >= 2}
                         onMouseDown={props.shouldPreventDefaultFocusOnSelectRow ? (e) => e.preventDefault() : undefined}
                     >
@@ -264,6 +264,7 @@ function OptionRow(props) {
                                                 text={props.selectedStateButtonText}
                                                 onPress={() => props.onSelectedStatePressed(props.option)}
                                                 small
+                                                shouldUseDefaultHover={false}
                                             />
                                         ) : (
                                             <PressableWithFeedback

diff --git a/src/styles/styles.ts b/src/styles/styles.ts
@@ -1514,7 +1514,7 @@ const styles = (theme: ThemeColors) =>
         },
 
         sidebarLinkActive: {
-            backgroundColor: theme.border,
+            backgroundColor: theme.buttonHoveredBG,
             textDecorationLine: 'none',
         },
 

diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts
@@ -79,7 +79,7 @@ const darkTheme = {
     tooltipSupportingText: colors.productLight800,
     tooltipPrimaryText: colors.productLight900,
     skeletonLHNIn: colors.productDark400,
-    skeletonLHNOut: colors.productDark400,
+    skeletonLHNOut: colors.productDark600,
     QRLogo: colors.green400,
     starDefaultBG: 'rgb(254, 228, 94)',
     loungeAccessOverlay: colors.blue800,