Merge pull request #61793 from huult/61115-missing-bg-color-expense-preview-loading

Author: dangrous

src/components/ReceiptEmptyState.tsx

@@ -35,6 +35,17 @@ function ReceiptEmptyState({hasError = false, onPress, disabled = false, isThumb
     const theme = useTheme();
 
     const Wrapper = onPress ? PressableWithoutFeedback : View;
+    const containerStyle = [
+        styles.alignItemsCenter,
+        styles.justifyContentCenter,
+        styles.moneyRequestViewImage,
+        isThumbnail ? styles.moneyRequestAttachReceiptThumbnail : styles.moneyRequestAttachReceipt,
+        isThumbnail && !isInMoneyRequestView && styles.w100,
+        isThumbnail && isInMoneyRequestView && styles.thumbnailImageContainerHighlight,
+        isInMoneyRequestView && styles.expenseViewImage,
+        hasError && styles.borderColorDanger,
+        shouldUseFullHeight && styles.receiptEmptyStateFullHeight,
+    ];
 
     return (
         <Wrapper
@@ -43,16 +54,7 @@ function ReceiptEmptyState({hasError = false, onPress, disabled = false, isThumb
             onPress={onPress}
             disabled={disabled}
             disabledStyle={styles.cursorDefault}
-            style={[
-                styles.alignItemsCenter,
-                styles.justifyContentCenter,
-                styles.moneyRequestViewImage,
-                isThumbnail ? styles.moneyRequestAttachReceiptThumbnail : styles.moneyRequestAttachReceipt,
-                isThumbnail && !isInMoneyRequestView && styles.w100,
-                isInMoneyRequestView && styles.expenseViewImage,
-                hasError && styles.borderColorDanger,
-                shouldUseFullHeight && styles.receiptEmptyStateFullHeight,
-            ]}
+            style={containerStyle}
         >
             <View>
                 <Icon

src/components/ReceiptImage.tsx

@@ -80,6 +80,9 @@ type ReceiptImageProps = (
     /** The style of the loading indicator */
     loadingIndicatorStyles?: StyleProp<ViewStyle>;
 
+    /** Styles applied to the thumbnail container */
+    thumbnailContainerStyles?: StyleProp<ViewStyle>;
+
     /** If the image fails to load – show the provided fallback icon */
     fallbackIcon?: IconAsset;
 
@@ -130,6 +133,7 @@ function ReceiptImage({
     isPerDiemRequest,
     shouldUseFullHeight,
     loadingIndicatorStyles,
+    thumbnailContainerStyles,
 }: ReceiptImageProps) {
     const styles = useThemeStyles();
 
@@ -180,7 +184,7 @@ function ReceiptImage({
         return (
             <ThumbnailImage
                 previewSourceURL={source ?? ''}
-                style={[styles.w100, styles.h100]}
+                style={[styles.w100, styles.h100, thumbnailContainerStyles]}
                 isAuthTokenRequired={isAuthTokenRequired ?? false}
                 shouldDynamicallyResize={false}
                 fallbackIcon={fallbackIcon}

src/components/ReportActionItem/ReportActionItemImage.tsx

@@ -171,6 +171,7 @@ function ReportActionItemImage({
         <ReceiptImage
             {...propsObj}
             shouldUseFullHeight={shouldUseFullHeight}
+            thumbnailContainerStyles={styles.thumbnailImageContainerHover}
         />
     );
 }

src/components/ThumbnailImage.tsx

@@ -145,7 +145,7 @@ function ThumbnailImage({
     }
 
     return (
-        <View style={[style, styles.overflowHidden]}>
+        <View style={[styles.thumbnailImageContainerHighlight, style, styles.overflowHidden]}>
             {!!isDeleted && <AttachmentDeletedIndicator containerStyles={[...sizeStyles]} />}
             <View style={[...sizeStyles, styles.alignItemsCenter, styles.justifyContentCenter]}>
                 <ImageWithSizeCalculation

src/styles/index.ts

@@ -5779,6 +5779,14 @@ const styles = (theme: ThemeColors) =>
             // Choosing a lowest value just above the threshold for the items to adjust width against the various screens. Only 2 items are shown 35 * 2 = 70 thus third item of 35% width can't fit forcing a two column layout.
             flexBasis: '35%',
         },
+
+        thumbnailImageContainerHover: {
+            backgroundColor: theme.hoverComponentBG,
+        },
+
+        thumbnailImageContainerHighlight: {
+            backgroundColor: theme.highlightBG,
+        },
     } satisfies Styles);
 
 type ThemeStyles = ReturnType<typeof styles>;