Merge pull request #37437 from Expensify/cmartins-useThemeIllustrations

Use theme illustrations for workspace profile
Expensify · Mar 1, 2024 · c061c11 · c061c11
2 parents a778b0a + e3d2949
commit c061c11
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 6 deletions.
diff --git 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,7 @@ 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 useThemeIllustrations from '@hooks/useThemeIllustrations';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import Navigation from '@libs/Navigation/Navigation';
@@ -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 ?? '';
@@ -97,7 +94,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
@@ -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
@@ -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
@@ -4,6 +4,7 @@ type IllustrationsType = {
     EmptyStateBackgroundImage: ImageSourcePropType;
     ExampleCheckES: ImageSourcePropType;
     ExampleCheckEN: ImageSourcePropType;
+    WorkspaceProfile: ImageSourcePropType;
 };
 
 export default IllustrationsType;