Use Expensicons icon for compact receipt state

Author: emkhalid

assets/images/themeDependent/empty-state_receipt-add-small--dark.svg

@@ -2,7 +2,6 @@ import useFilesValidation from '@hooks/useFilesValidation';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
-import useThemeIllustrations from '@hooks/useThemeIllustrations';
 import useThemeStyles from '@hooks/useThemeStyles';
 
 import variables from '@styles/variables';
@@ -88,9 +87,8 @@ function ReceiptEmptyState({
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const theme = useTheme();
-    const illustrations = useThemeIllustrations();
     const isLoadedRef = useRef(false);
-    const icons = useMemoizedLazyExpensifyIcons(['Receipt']);
+    const icons = useMemoizedLazyExpensifyIcons(['Receipt', 'ReceiptPlus']);
 
     const {validateFiles, PDFValidationComponent, ErrorModal} = useFilesValidation(setReceiptFile);
 
@@ -132,16 +130,18 @@ function ReceiptEmptyState({
                     }}
                     disabled={disabled}
                     disabledStyle={styles.cursorDefault}
+                    hoverStyle={onPress && isCompact ? styles.hoveredComponentBG : undefined}
                     style={containerStyle}
                 >
                     {PDFValidationComponent}
                     {ErrorModal}
                     {isCompact ? (
                         <View style={[styles.flexRow, styles.justifyContentCenter, styles.alignItemsCenter, styles.gap3]}>
                             <Icon
-                                src={illustrations.ReceiptAddSmall}
-                                width={36}
-                                height={36}
+                                src={icons.ReceiptPlus}
+                                fill={theme.icon}
+                                width={variables.iconSizeNormal}
+                                height={variables.iconSizeNormal}
                             />
                             <Text style={styles.textStrong}>{translate('dropzone.addReceipt')}</Text>
                         </View>

assets/images/themeDependent/empty-state_receipt-add-small--light.svg

@@ -5,7 +5,6 @@ import FileImportTable from '@assets/images/companyCards/table-dark.svg';
 import ExpensifyApprovedBadge from '@assets/images/exfy_approved_badge.svg';
 import ExpensifyApprovedLogo from '@assets/images/subscription-details__approvedlogo.svg';
 import EmptyStateBackgroundImage from '@assets/images/themeDependent/empty-state_background-fade-dark.svg';
-import ReceiptAddSmall from '@assets/images/themeDependent/empty-state_receipt-add-small--dark.svg';
 import ExampleCheckEN from '@assets/images/themeDependent/example-check-image-dark-en.png';
 import ExampleCheckES from '@assets/images/themeDependent/example-check-image-dark-es.png';
 import WorkspaceProfile from '@assets/images/workspace-profile.png';
@@ -14,7 +13,6 @@ import type IllustrationsType from '@styles/theme/illustrations/types';
 
 const illustrations = {
     EmptyStateBackgroundImage,
-    ReceiptAddSmall,
     ExampleCheckEN,
     ExampleCheckES,
     WorkspaceProfile,

src/components/ReceiptEmptyState.tsx

@@ -5,7 +5,6 @@ import FileImportTable from '@assets/images/companyCards/table-light.svg';
 import ExpensifyApprovedBadge from '@assets/images/exfy_approved_badge.svg';
 import ExpensifyApprovedLogo from '@assets/images/subscription-details__approvedlogo--light.svg';
 import EmptyStateBackgroundImage from '@assets/images/themeDependent/empty-state_background-fade-light.svg';
-import ReceiptAddSmall from '@assets/images/themeDependent/empty-state_receipt-add-small--light.svg';
 import ExampleCheckEN from '@assets/images/themeDependent/example-check-image-light-en.png';
 import ExampleCheckES from '@assets/images/themeDependent/example-check-image-light-es.png';
 import WorkspaceProfile from '@assets/images/workspace-profile-light.png';
@@ -14,7 +13,6 @@ import type IllustrationsType from '@styles/theme/illustrations/types';
 
 const illustrations = {
     EmptyStateBackgroundImage,
-    ReceiptAddSmall,
     ExampleCheckEN,
     ExampleCheckES,
     WorkspaceProfile,

src/styles/theme/illustrations/themes/dark.ts

@@ -6,7 +6,6 @@ import type {SvgProps} from 'react-native-svg';
 
 type IllustrationsType = {
     EmptyStateBackgroundImage: FC<SvgProps>;
-    ReceiptAddSmall: FC<SvgProps>;
     ExampleCheckES: ImageSourcePropType;
     ExampleCheckEN: ImageSourcePropType;
     WorkspaceProfile: ImageSourcePropType;