Merge pull request #31827 from rezkiy37/feature/31694-theme-switching…

…-migration-settings [Theme Switching Migration] Settings
Expensify · Nov 29, 2023 · 0483854 · 0483854
2 parents a8672be + 85fc340
commit 0483854
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 11 deletions.
diff --git a/src/components/AddressForm.js b/src/components/AddressForm.js
@@ -7,7 +7,7 @@ import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import AddressSearch from './AddressSearch';
 import CountrySelector from './CountrySelector';
@@ -63,6 +63,7 @@ const defaultProps = {
 };
 
 function AddressForm({city, country, formID, onAddressChanged, onSubmit, shouldSaveDraft, state, street1, street2, submitButtonText, zip}) {
+    const styles = useThemeStyles();
     const {translate} = useLocalize();
     const zipSampleFormat = lodashGet(CONST.COUNTRY_ZIP_REGEX_DATA, [country, 'samples'], '');
     const zipFormat = translate('common.zipCodeExampleFormat', {zipSampleFormat});

diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js
@@ -8,8 +8,8 @@ import * as Browser from '@libs/Browser';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
 import getImageResolution from '@libs/fileDownload/getImageResolution';
 import stylePropTypes from '@styles/stylePropTypes';
-import styles from '@styles/styles';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import AttachmentModal from './AttachmentModal';
@@ -142,6 +142,8 @@ function AvatarWithImagePicker({
     onImageSelected,
     editorMaskImage,
 }) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
     const [isMenuVisible, setIsMenuVisible] = useState(false);
     const [errorData, setErrorData] = useState({
         validationError: null,
@@ -319,7 +321,7 @@ function AvatarWithImagePicker({
                                     src={Expensicons.Camera}
                                     width={variables.iconSizeSmall}
                                     height={variables.iconSizeSmall}
-                                    fill={themeColors.textLight}
+                                    fill={theme.textLight}
                                 />
                             </View>
                         </PressableWithoutFeedback>

diff --git a/src/pages/ReferralDetailsPage.js b/src/pages/ReferralDetailsPage.js
@@ -14,7 +14,7 @@ import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import Navigation from '@libs/Navigation/Navigation';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -40,6 +40,7 @@ const defaultProps = {
 };
 
 function ReferralDetailsPage({route, account}) {
+    const styles = useThemeStyles();
     const {translate} = useLocalize();
     let {contentType} = route.params;
 

diff --git a/src/pages/settings/Wallet/Card/BaseGetPhysicalCard.js b/src/pages/settings/Wallet/Card/BaseGetPhysicalCard.js
@@ -13,7 +13,7 @@ import FormUtils from '@libs/FormUtils';
 import * as GetPhysicalCardUtils from '@libs/GetPhysicalCardUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import assignedCardPropTypes from '@pages/settings/Wallet/assignedCardPropTypes';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -113,7 +113,7 @@ const defaultProps = {
     session: {},
     loginList: {},
     isConfirmation: false,
-    renderContent: (onSubmit, submitButtonText, children = () => {}, onValidate = () => ({})) => (
+    renderContent: (onSubmit, submitButtonText, styles, children = () => {}, onValidate = () => ({})) => (
         <Form
             formID={ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM}
             submitButtonText={submitButtonText}
@@ -144,6 +144,7 @@ function BaseGetPhysicalCard({
     title,
     onValidate,
 }) {
+    const styles = useThemeStyles();
     const isRouteSet = useRef(false);
 
     useEffect(() => {
@@ -208,7 +209,7 @@ function BaseGetPhysicalCard({
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(domain))}
             />
             <Text style={[styles.textHeadline, styles.mh5, styles.mb5]}>{headline}</Text>
-            {renderContent(onSubmit, submitButtonText, children, onValidate)}
+            {renderContent(onSubmit, submitButtonText, styles, children, onValidate)}
         </ScreenWrapper>
     );
 }

diff --git a/src/pages/settings/Wallet/Card/GetPhysicalCardConfirm.js b/src/pages/settings/Wallet/Card/GetPhysicalCardConfirm.js
@@ -8,7 +8,7 @@ import useLocalize from '@hooks/useLocalize';
 import FormUtils from '@libs/FormUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -71,6 +71,7 @@ function GetPhysicalCardConfirm({
         params: {domain},
     },
 }) {
+    const styles = useThemeStyles();
     const {translate} = useLocalize();
 
     return (

diff --git a/src/pages/settings/Wallet/Card/GetPhysicalCardName.js b/src/pages/settings/Wallet/Card/GetPhysicalCardName.js
@@ -6,7 +6,7 @@ import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
 import FormUtils from '@libs/FormUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -43,6 +43,7 @@ function GetPhysicalCardName({
         params: {domain},
     },
 }) {
+    const styles = useThemeStyles();
     const {translate} = useLocalize();
     const onValidate = (values) => {
         const errors = {};

diff --git a/src/pages/settings/Wallet/Card/GetPhysicalCardPhone.js b/src/pages/settings/Wallet/Card/GetPhysicalCardPhone.js
@@ -7,7 +7,7 @@ import _ from 'underscore';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
 import FormUtils from '@libs/FormUtils';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -42,6 +42,7 @@ function GetPhysicalCardPhone({
         params: {domain},
     },
 }) {
+    const styles = useThemeStyles();
     const {translate} = useLocalize();
 
     const onValidate = (values) => {