add empty state background

Expensify · Nov 16, 2023 · 5a5be5e · 5a5be5e
1 parent fa16347
commit 5a5be5e
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 2 deletions.
diff --git a/...ts/images/empty-state_background-fade.png → ...ages/empty-state_background-fade-dark.png b/...ts/images/empty-state_background-fade.png → ...ages/empty-state_background-fade-dark.png
diff --git a/assets/images/empty-state_background-fade-light.png b/assets/images/empty-state_background-fade-light.png
diff --git a/src/pages/home/report/AnimatedEmptyStateBackground.js b/src/pages/home/report/AnimatedEmptyStateBackground.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import Animated, {SensorType, useAnimatedSensor, useAnimatedStyle, useSharedValue, withSpring} from 'react-native-reanimated';
-import EmptyStateBackgroundImage from '@assets/images/empty-state_background-fade.png';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as NumberUtils from '@libs/NumberUtils';
+import useThemeIllustrations from '@styles/illustrations/useThemeIllustrations';
 import * as StyleUtils from '@styles/StyleUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
@@ -11,6 +11,7 @@ const IMAGE_OFFSET_Y = 75;
 
 function AnimatedEmptyStateBackground() {
     const {windowWidth, isSmallScreenWidth} = useWindowDimensions();
+    const illustrations = useThemeIllustrations();
     const IMAGE_OFFSET_X = windowWidth / 2;
 
     // If window width is greater than the max background width, repeat the background image
@@ -41,7 +42,7 @@ function AnimatedEmptyStateBackground() {
 
     return (
         <Animated.Image
-            source={EmptyStateBackgroundImage}
+            source={illustrations.EmptyStateBackgroundImage}
             style={[StyleUtils.getReportWelcomeBackgroundImageStyle(isSmallScreenWidth), animatedStyles]}
             resizeMode={windowWidth > maxBackgroundWidth ? 'repeat' : 'cover'}
         />

diff --git a/src/styles/illustrations/dark.ts b/src/styles/illustrations/dark.ts
@@ -1,3 +1,4 @@
+import EmptyStateBackgroundImage from '@assets/images/empty-state_background-fade-dark.png';
 import Abracadabra from '@assets/images/product-illustrations/abracadabra.svg';
 import BankArrowPink from '@assets/images/product-illustrations/bank-arrow--pink.svg';
 import BankMouseGreen from '@assets/images/product-illustrations/bank-mouse--green.svg';
@@ -59,6 +60,7 @@ export {
     ConciergeExclamation,
     CreditCardsBlue,
     EmailAddress,
+    EmptyStateBackgroundImage,
     InvoiceOrange,
     JewelBoxBlue,
     JewelBoxGreen,

diff --git a/src/styles/illustrations/light.ts b/src/styles/illustrations/light.ts
@@ -1,3 +1,4 @@
+import EmptyStateBackgroundImage from '@assets/images/empty-state_background-fade-light.png';
 import Abracadabra from '@assets/images/product-illustrations/abracadabra.svg';
 import BankArrowPink from '@assets/images/product-illustrations/bank-arrow--pink.svg';
 import BankMouseGreen from '@assets/images/product-illustrations/bank-mouse--green.svg';
@@ -59,6 +60,7 @@ export {
     ConciergeExclamation,
     CreditCardsBlue,
     EmailAddress,
+    EmptyStateBackgroundImage,
     InvoiceOrange,
     JewelBoxBlue,
     JewelBoxGreen,