update receipt background color

Expensify · Jun 10, 2024 · 0fb9222 · 0fb9222
1 parent ccce980
commit 0fb9222
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 82 deletions.
diff --git a/src/components/ReceiptImage.tsx b/src/components/ReceiptImage.tsx
@@ -76,9 +76,6 @@ type ReceiptImageProps = (
 
     /** The colod of the fallback icon */
     fallbackIconColor?: string;
-
-    /** Whether the component is hovered */
-    isHovered?: boolean;
 };
 
 function ReceiptImage({
@@ -96,7 +93,6 @@ function ReceiptImage({
     fallbackIconSize,
     shouldUseInitialObjectPosition = false,
     fallbackIconColor,
-    isHovered = false,
 }: ReceiptImageProps) {
     const styles = useThemeStyles();
 
@@ -134,7 +130,6 @@ function ReceiptImage({
                 fallbackIconSize={fallbackIconSize}
                 fallbackIconColor={fallbackIconColor}
                 objectPosition={shouldUseInitialObjectPosition ? CONST.IMAGE_OBJECT_POSITION.INITIAL : CONST.IMAGE_OBJECT_POSITION.TOP}
-                isHovered={isHovered}
             />
         );
     }

diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx
@@ -146,64 +146,61 @@ function ReportListItem<TItem extends ListItem>({
             shouldSyncFocus={shouldSyncFocus}
             hoverStyle={item.isSelected && styles.activeComponentBG}
         >
-            {(hovered?: boolean) => (
-                <View style={styles.flex1}>
-                    {!isLargeScreenWidth && (
-                        <ExpenseItemHeaderNarrow
-                            participantFrom={participantFrom}
-                            participantFromDisplayName={participantFromDisplayName}
-                            participantTo={participantTo}
-                            participantToDisplayName={participantToDisplayName}
-                            buttonText={translate('common.view')}
-                            onButtonPress={handleOnButtonPress}
-                        />
-                    )}
-                    <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3]}>
-                        <View style={[styles.flexRow, styles.flex1, styles.alignItemsCenter, styles.justifyContentBetween]}>
-                            <View style={[styles.flexRow, styles.alignItemsCenter, styles.flex2]}>
-                                <View style={[styles.flexShrink1]}>
-                                    <Text style={[styles.reportListItemTitle]}>{reportItem?.reportName}</Text>
-                                    <Text style={[styles.textMicroSupporting]}>{`${reportItem.transactions.length} ${translate('search.groupedExpenses')}`}</Text>
-                                </View>
+            <View style={styles.flex1}>
+                {!isLargeScreenWidth && (
+                    <ExpenseItemHeaderNarrow
+                        participantFrom={participantFrom}
+                        participantFromDisplayName={participantFromDisplayName}
+                        participantTo={participantTo}
+                        participantToDisplayName={participantToDisplayName}
+                        buttonText={translate('common.view')}
+                        onButtonPress={handleOnButtonPress}
+                    />
+                )}
+                <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3]}>
+                    <View style={[styles.flexRow, styles.flex1, styles.alignItemsCenter, styles.justifyContentBetween]}>
+                        <View style={[styles.flexRow, styles.alignItemsCenter, styles.flex2]}>
+                            <View style={[styles.flexShrink1]}>
+                                <Text style={[styles.reportListItemTitle]}>{reportItem?.reportName}</Text>
+                                <Text style={[styles.textMicroSupporting]}>{`${reportItem.transactions.length} ${translate('search.groupedExpenses')}`}</Text>
                             </View>
-                            <View style={[styles.flexRow, styles.flex1, styles.justifyContentEnd]}>
-                                <TotalCell
+                        </View>
+                        <View style={[styles.flexRow, styles.flex1, styles.justifyContentEnd]}>
+                            <TotalCell
+                                showTooltip={showTooltip}
+                                isLargeScreenWidth={isLargeScreenWidth}
+                                reportItem={reportItem}
+                            />
+                        </View>
+                    </View>
+                    {isLargeScreenWidth && (
+                        <>
+                            {/** We add an empty view with type style to align the total with the table header */}
+                            <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TYPE)} />
+                            <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.ACTION)}>
+                                <ActionCell
                                     showTooltip={showTooltip}
                                     isLargeScreenWidth={isLargeScreenWidth}
-                                    reportItem={reportItem}
+                                    onButtonPress={handleOnButtonPress}
                                 />
                             </View>
-                        </View>
-                        {isLargeScreenWidth && (
-                            <>
-                                {/** We add an empty view with type style to align the total with the table header */}
-                                <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TYPE)} />
-                                <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.ACTION)}>
-                                    <ActionCell
-                                        showTooltip={showTooltip}
-                                        isLargeScreenWidth={isLargeScreenWidth}
-                                        onButtonPress={handleOnButtonPress}
-                                    />
-                                </View>
-                            </>
-                        )}
-                    </View>
-                    <View style={[styles.mt3, styles.reportListItemSeparator]} />
-                    {reportItem.transactions.map((transaction) => (
-                        <TransactionListItemRow
-                            item={transaction}
-                            showTooltip={showTooltip}
-                            onButtonPress={() => {
-                                openReportInRHP(transaction);
-                            }}
-                            showItemHeaderOnNarrowLayout={false}
-                            containerStyle={styles.mt3}
-                            isHovered={hovered}
-                            isChildListItem
-                        />
-                    ))}
+                        </>
+                    )}
                 </View>
-            )}
+                <View style={[styles.mt3, styles.reportListItemSeparator]} />
+                {reportItem.transactions.map((transaction) => (
+                    <TransactionListItemRow
+                        item={transaction}
+                        showTooltip={showTooltip}
+                        onButtonPress={() => {
+                            openReportInRHP(transaction);
+                        }}
+                        showItemHeaderOnNarrowLayout={false}
+                        containerStyle={styles.mt3}
+                        isChildListItem
+                    />
+                ))}
+            </View>
         </BaseListItem>
     );
 }

diff --git a/src/components/SelectionList/Search/TransactionListItem.tsx b/src/components/SelectionList/Search/TransactionListItem.tsx
@@ -50,16 +50,13 @@ function TransactionListItem<TItem extends ListItem>({
             shouldSyncFocus={shouldSyncFocus}
             hoverStyle={item.isSelected && styles.activeComponentBG}
         >
-            {(hovered?: boolean) => (
-                <TransactionListItemRow
-                    item={transactionItem}
-                    showTooltip={showTooltip}
-                    onButtonPress={() => {
-                        onSelectRow(item);
-                    }}
-                    isHovered={hovered}
-                />
-            )}
+            <TransactionListItemRow
+                item={transactionItem}
+                showTooltip={showTooltip}
+                onButtonPress={() => {
+                    onSelectRow(item);
+                }}
+            />
         </BaseListItem>
     );
 }

diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx
@@ -33,10 +33,6 @@ type TransactionCellProps = {
     transactionItem: TransactionListItemType;
 } & CellProps;
 
-type ReceiptCellProps = {
-    isHovered?: boolean;
-} & TransactionCellProps;
-
 type ActionCellProps = {
     onButtonPress: () => void;
 } & CellProps;
@@ -51,7 +47,6 @@ type TransactionListItemRowProps = {
     onButtonPress: () => void;
     showItemHeaderOnNarrowLayout?: boolean;
     containerStyle?: StyleProp<ViewStyle>;
-    isHovered?: boolean;
     isChildListItem?: boolean;
 };
 
@@ -68,7 +63,7 @@ const getTypeIcon = (type?: SearchTransactionType) => {
     }
 };
 
-function ReceiptCell({transactionItem, isHovered = false}: ReceiptCellProps) {
+function ReceiptCell({transactionItem}: TransactionCellProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -85,7 +80,6 @@ function ReceiptCell({transactionItem, isHovered = false}: ReceiptCellProps) {
                 fallbackIconSize={20}
                 fallbackIconColor={theme.icon}
                 iconSize="x-small"
-                isHovered={isHovered}
             />
         </View>
     );
@@ -215,7 +209,6 @@ function TransactionListItemRow({
     onButtonPress,
     showItemHeaderOnNarrowLayout = true,
     containerStyle,
-    isHovered = false,
     isChildListItem = false,
 }: TransactionListItemRowProps) {
     const styles = useThemeStyles();
@@ -242,7 +235,6 @@ function TransactionListItemRow({
                         transactionItem={item}
                         isLargeScreenWidth={false}
                         showTooltip={false}
-                        isHovered={isHovered}
                     />
                     <View style={[styles.flex2, styles.gap1]}>
                         <MerchantCell
@@ -296,7 +288,6 @@ function TransactionListItemRow({
                         transactionItem={item}
                         isLargeScreenWidth={false}
                         showTooltip={false}
-                        isHovered={isHovered}
                     />
                 </View>
                 <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.DATE)]}>

diff --git a/src/components/ThumbnailImage.tsx b/src/components/ThumbnailImage.tsx
@@ -5,6 +5,7 @@ import useNetwork from '@hooks/useNetwork';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useThumbnailDimensions from '@hooks/useThumbnailDimensions';
+import useStyleUtils from '@hooks/useStyleUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import type IconAsset from '@src/types/utils/IconAsset';
@@ -48,9 +49,6 @@ type ThumbnailImageProps = {
 
     /** The object position of image */
     objectPosition?: ImageObjectPosition;
-
-    /** Whether the component is hovered */
-    isHovered?: boolean;
 };
 
 type UpdateImageSizeParams = {
@@ -69,7 +67,6 @@ function ThumbnailImage({
     fallbackIconSize = variables.iconSizeSuperLarge,
     fallbackIconColor,
     objectPosition = CONST.IMAGE_OBJECT_POSITION.INITIAL,
-    isHovered = false,
 }: ThumbnailImageProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -78,6 +75,7 @@ function ThumbnailImage({
     const cachedDimensions = shouldDynamicallyResize && typeof previewSourceURL === 'string' ? thumbnailDimensionsCache.get(previewSourceURL) : null;
     const [imageDimensions, setImageDimensions] = useState({width: cachedDimensions?.width ?? imageWidth, height: cachedDimensions?.height ?? imageHeight});
     const {thumbnailDimensionsStyles} = useThumbnailDimensions(imageDimensions.width, imageDimensions.height);
+    const StyleUtils = useStyleUtils();
 
     useEffect(() => {
         setFailedToLoad(false);
@@ -110,7 +108,7 @@ function ThumbnailImage({
 
     if (failedToLoad || previewSourceURL === '') {
         return (
-            <View style={[style, styles.overflowHidden, isHovered ? styles.activeComponentBG : styles.hoveredComponentBG]}>
+            <View style={[style, styles.overflowHidden, StyleUtils.getBackgroundColorStyle(theme.border)]}>
                 <View style={[...sizeStyles, styles.alignItemsCenter, styles.justifyContentCenter]}>
                     <Icon
                         src={isOffline ? Expensicons.OfflineCloud : fallbackIcon}