add themed Example Checks

.imgbotconfig

@@ -1,7 +1,7 @@
 {
     "ignoredFiles": [
-        "assets/images/empty-state_background-fade-dark.png", // Caused an issue with colour gradients, https://github.com/Expensify/App/issues/30499
-        "assets/images/empty-state_background-fade-light.png"
+        "assets/images/themeDependent/empty-state_background-fade-dark.png", // Caused an issue with colour gradients, https://github.com/Expensify/App/issues/30499
+        "assets/images/themeDependent/empty-state_background-fade-light.png"
     ],
     "aggressiveCompression": "false"
 }

src/pages/ReimbursementAccount/BankAccountManualStep.js

@@ -1,6 +1,5 @@
 import lodashGet from 'lodash/get';
 import React, {useCallback} from 'react';
-import {Image} from 'react-native';
 import _ from 'underscore';
 import CheckboxWithLabel from '@components/CheckboxWithLabel';
 import FormProvider from '@components/Form/FormProvider';
@@ -18,16 +17,16 @@ import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import exampleCheckImage from './exampleCheckImage';
 import StepPropTypes from './StepPropTypes';
+import ExampleCheck from './ExampleCheck';
 
 const propTypes = {
     ..._.omit(StepPropTypes, _.keys(withLocalizePropTypes)),
 };
 
 function BankAccountManualStep(props) {
     const styles = useThemeStyles();
-    const {translate, preferredLocale} = useLocalize();
+    const {translate} = useLocalize();
     const {reimbursementAccount, reimbursementAccountDraft} = props;
 
     const shouldDisableInputs = Boolean(lodashGet(reimbursementAccount, 'achData.bankAccountID'));
@@ -95,11 +94,7 @@ function BankAccountManualStep(props) {
                 style={[styles.mh5, styles.mt3, styles.flexGrow1]}
             >
                 <Text style={[styles.mb5]}>{translate('bankAccount.checkHelpLine')}</Text>
-                <Image
-                    resizeMode="contain"
-                    style={[styles.exampleCheckImage, styles.mb5]}
-                    source={exampleCheckImage(preferredLocale)}
-                />
+                <ExampleCheck />
                 <InputWrapper
                     InputComponent={TextInput}
                     autoFocus

src/pages/ReimbursementAccount/ExampleCheck.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import {Image} from 'react-native';
+import useThemeIllustrations from '@styles/illustrations/useThemeIllustrations';
+import useThemeStyles from '@styles/useThemeStyles';
+import CONST from '@src/CONST';
+import useLocalize from '@hooks/useLocalize';
+
+function ExampleCheckImage() {
+    const styles = useThemeStyles();
+    const illustrations = useThemeIllustrations();
+    const {preferredLocale} = useLocalize();
+    const isSpanish = (preferredLocale || CONST.LOCALES.DEFAULT) === CONST.LOCALES.ES;
+
+    return (
+        <Image
+        resizeMode="contain"
+        style={[styles.exampleCheckImage, styles.mb5]}
+        source={isSpanish ? illustrations.ExampleCheckES : illustrations.ExampleCheckEN}
+        />
+    );
+}
+
+ExampleCheckImage.displayName = 'ExampleCheckImage';
+export default ExampleCheckImage;
+

src/styles/illustrations/dark.ts

@@ -1,8 +1,12 @@
-import EmptyStateBackgroundImage from '@assets/images/empty-state_background-fade-dark.png';
+import EmptyStateBackgroundImage from '@assets/images/themeDependent/empty-state_background-fade-dark.png';
+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 {Illustrations} from './types';
 
 const illustrations = {
     EmptyStateBackgroundImage,
+    ExampleCheckEN,
+    ExampleCheckES,
 } satisfies Illustrations;
 
 export default illustrations;

src/styles/illustrations/light.ts

@@ -1,8 +1,13 @@
-import EmptyStateBackgroundImage from '@assets/images/empty-state_background-fade-light.png';
+import EmptyStateBackgroundImage from '@assets/images/themeDependent/empty-state_background-fade-light.png';
+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 {Illustrations} from './types';
 
 const illustrations = {
     EmptyStateBackgroundImage,
+    ExampleCheckEN,
+    ExampleCheckES,
 } satisfies Illustrations;
 
 export default illustrations;

src/styles/illustrations/types.ts

@@ -2,6 +2,8 @@ import {ImageSourcePropType} from 'react-native';
 
 type Illustrations = {
     EmptyStateBackgroundImage: ImageSourcePropType;
+    ExampleCheckES: ImageSourcePropType;
+    ExampleCheckEN: ImageSourcePropType;
 };
 
 // eslint-disable-next-line import/prefer-default-export