From 32e9f84d595d94ec1d0d2349a82fb060a93e5427 Mon Sep 17 00:00:00 2001
From: Carlos Martins <cmartins@expensify.com>
Date: Wed, 28 Feb 2024 09:04:31 -0700
Subject: [PATCH] use theme illustrations for workspace profile

---
 src/pages/workspace/WorkspaceProfilePage.tsx   | 9 +++------
 src/styles/theme/illustrations/themes/dark.ts  | 2 ++
 src/styles/theme/illustrations/themes/light.ts | 2 ++
 src/styles/theme/illustrations/types.ts        | 1 +
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/pages/workspace/WorkspaceProfilePage.tsx b/src/pages/workspace/WorkspaceProfilePage.tsx
index f475664b3025..86fca959ac35 100644
--- a/src/pages/workspace/WorkspaceProfilePage.tsx
+++ b/src/pages/workspace/WorkspaceProfilePage.tsx
@@ -3,8 +3,6 @@ import type {ImageStyle, StyleProp} from 'react-native';
 import {Image, ScrollView, StyleSheet, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
-import WorkspaceProfileLight from '@assets/images/workspace-profile-light.png';
-import WorkspaceProfile from '@assets/images/workspace-profile.png';
 import Avatar from '@components/Avatar';
 import AvatarWithImagePicker from '@components/AvatarWithImagePicker';
 import Button from '@components/Button';
@@ -15,7 +13,6 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
-import useThemePreference from '@hooks/useThemePreference';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import Navigation from '@libs/Navigation/Navigation';
@@ -29,6 +26,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type * as OnyxTypes from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import useThemeIllustrations from '@hooks/useThemeIllustrations';
 import withPolicy from './withPolicy';
 import type {WithPolicyProps} from './withPolicy';
 import WorkspacePageWithSections from './WorkspacePageWithSections';
@@ -44,8 +42,7 @@ function WorkspaceProfilePage({policy, currencyList = {}, route}: WorkSpaceProfi
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isSmallScreenWidth} = useWindowDimensions();
-    const themePreference = useThemePreference();
-    const isDarkTheme = themePreference === CONST.THEME.DARK;
+    const illustrations = useThemeIllustrations();
 
     const outputCurrency = policy?.outputCurrency ?? '';
     const currencySymbol = currencyList?.[outputCurrency]?.symbol ?? '';
@@ -96,7 +93,7 @@ function WorkspaceProfilePage({policy, currencyList = {}, route}: WorkSpaceProfi
                         >
                             <Image
                                 style={StyleSheet.flatten([styles.wAuto, styles.h68, imageStyle])}
-                                source={isDarkTheme ? WorkspaceProfile : WorkspaceProfileLight}
+                                source={illustrations.WorkspaceProfile}
                                 resizeMode="cover"
                             />
                             <AvatarWithImagePicker
diff --git a/src/styles/theme/illustrations/themes/dark.ts b/src/styles/theme/illustrations/themes/dark.ts
index e24827e8c9eb..a46900510652 100644
--- a/src/styles/theme/illustrations/themes/dark.ts
+++ b/src/styles/theme/illustrations/themes/dark.ts
@@ -1,12 +1,14 @@
 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 WorkspaceProfile from '@assets/images/workspace-profile.png';
 import type IllustrationsType from '@styles/theme/illustrations/types';
 
 const illustrations = {
     EmptyStateBackgroundImage,
     ExampleCheckEN,
     ExampleCheckES,
+    WorkspaceProfile,
 } satisfies IllustrationsType;
 
 export default illustrations;
diff --git a/src/styles/theme/illustrations/themes/light.ts b/src/styles/theme/illustrations/themes/light.ts
index cc8dc39806e1..3406e219e656 100644
--- a/src/styles/theme/illustrations/themes/light.ts
+++ b/src/styles/theme/illustrations/themes/light.ts
@@ -1,12 +1,14 @@
 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 WorkspaceProfile from '@assets/images/workspace-profile-light.png';
 import type IllustrationsType from '@styles/theme/illustrations/types';
 
 const illustrations = {
     EmptyStateBackgroundImage,
     ExampleCheckEN,
     ExampleCheckES,
+    WorkspaceProfile,
 } satisfies IllustrationsType;
 
 export default illustrations;
diff --git a/src/styles/theme/illustrations/types.ts b/src/styles/theme/illustrations/types.ts
index 810e3ad2673a..86f2aa813118 100644
--- a/src/styles/theme/illustrations/types.ts
+++ b/src/styles/theme/illustrations/types.ts
@@ -4,6 +4,7 @@ type IllustrationsType = {
     EmptyStateBackgroundImage: ImageSourcePropType;
     ExampleCheckES: ImageSourcePropType;
     ExampleCheckEN: ImageSourcePropType;
+    WorkspaceProfile: ImageSourcePropType;
 };
 
 export default IllustrationsType;