Merge pull request #43370 from JKobrynski/polishSubscriptionDetailsSe…

…ction [Payment card / Subscription] Polish "Subscription details" section with useThemeIllustrations
Expensify · Jun 11, 2024 · 009b050 · 009b050
2 parents 6044241 + f30c194
commit 009b050
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 3 deletions.
diff --git a/src/pages/settings/Subscription/SubscriptionDetails/index.native.tsx b/src/pages/settings/Subscription/SubscriptionDetails/index.native.tsx
@@ -8,6 +8,7 @@ import OptionItem from '@components/OptionsPicker/OptionItem';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useThemeIllustrations from '@hooks/useThemeIllustrations';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
@@ -16,6 +17,8 @@ import ONYXKEYS from '@src/ONYXKEYS';
 function SubscriptionDetails() {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
+    const illustrations = useThemeIllustrations();
+
     const [privateSubscription] = useOnyx(ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION);
 
     const [account] = useOnyx(ONYXKEYS.ACCOUNT);
@@ -48,7 +51,7 @@ function SubscriptionDetails() {
             {!!account?.isApprovedAccountant || !!account?.isApprovedAccountantClient ? (
                 <View style={[styles.borderedContentCard, styles.p5, styles.mt5]}>
                     <Icon
-                        src={Illustrations.ExpensifyApprovedLogo}
+                        src={illustrations.ExpensifyApprovedLogo}
                         width={variables.modalTopIconWidth}
                         height={variables.menuIconSize}
                     />

diff --git a/src/pages/settings/Subscription/SubscriptionDetails/index.tsx b/src/pages/settings/Subscription/SubscriptionDetails/index.tsx
@@ -10,6 +10,7 @@ import OptionsPicker from '@components/OptionsPicker';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useThemeIllustrations from '@hooks/useThemeIllustrations';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
@@ -33,10 +34,10 @@ const options: Array<OptionsPickerItem<SubscriptionVariant>> = [
 function SubscriptionDetails() {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
+    const illustrations = useThemeIllustrations();
 
     const [privateSubscription] = useOnyx(ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION);
     const [account] = useOnyx(ONYXKEYS.ACCOUNT);
-    const [preferredTheme] = useOnyx(ONYXKEYS.PREFERRED_THEME);
 
     const [selectedOption, setSelectedOption] = useState(privateSubscription?.type ?? CONST.SUBSCRIPTION.TYPE.ANNUAL);
 
@@ -81,7 +82,7 @@ function SubscriptionDetails() {
             {!!account?.isApprovedAccountant || !!account?.isApprovedAccountantClient ? (
                 <View style={[styles.borderedContentCard, styles.p5, styles.mt5]}>
                     <Icon
-                        src={preferredTheme === CONST.THEME.LIGHT ? Illustrations.ExpensifyApprovedLogoLight : Illustrations.ExpensifyApprovedLogo}
+                        src={illustrations.ExpensifyApprovedLogo}
                         width={variables.modalTopIconWidth}
                         height={variables.menuIconSize}
                     />

diff --git a/src/styles/theme/illustrations/themes/dark.ts b/src/styles/theme/illustrations/themes/dark.ts
@@ -1,3 +1,4 @@
+import ExpensifyApprovedLogo from '@assets/images/subscription-details__approvedlogo.svg';
 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';
@@ -9,6 +10,7 @@ const illustrations = {
     ExampleCheckEN,
     ExampleCheckES,
     WorkspaceProfile,
+    ExpensifyApprovedLogo,
 } satisfies IllustrationsType;
 
 export default illustrations;
diff --git a/src/styles/theme/illustrations/themes/light.ts b/src/styles/theme/illustrations/themes/light.ts
@@ -1,3 +1,4 @@
+import ExpensifyApprovedLogo from '@assets/images/subscription-details__approvedlogo--light.svg';
 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';
@@ -9,6 +10,7 @@ const illustrations = {
     ExampleCheckEN,
     ExampleCheckES,
     WorkspaceProfile,
+    ExpensifyApprovedLogo,
 } satisfies IllustrationsType;
 
 export default illustrations;
diff --git a/src/styles/theme/illustrations/types.ts b/src/styles/theme/illustrations/types.ts
@@ -1,10 +1,13 @@
+import type {FC} from 'react';
 import type {ImageSourcePropType} from 'react-native';
+import type {SvgProps} from 'react-native-svg';
 
 type IllustrationsType = {
     EmptyStateBackgroundImage: ImageSourcePropType;
     ExampleCheckES: ImageSourcePropType;
     ExampleCheckEN: ImageSourcePropType;
     WorkspaceProfile: ImageSourcePropType;
+    ExpensifyApprovedLogo: FC<SvgProps>;
 };
 
 export default IllustrationsType;