[HOLD for payment 2023-12-08] [Theme Switching Migration] Master File Tracking

[grgia]

Instructions - #27346

Coming from https://expensify.slack.com/archives/C03UK30EA1Z/p1700644906437179?thread_ts=1700563711.542099&cid=C03UK30EA1Z

We need to migrate the following files to use our styles/theme hooks.

• src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js
• src/components/AddressForm.js
• src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.js
• src/components/AvatarWithImagePicker.js
• src/components/Composer/index.ios.js
• src/components/Composer/index.android.js
• src/components/EmojiPicker/EmojiPickerMenu/index.js
• src/components/Icon/BankIcons.ts
• src/components/MenuItem.js
• src/components/ScreenWrapper/index.js
• src/libs/ComposerUtils/updateNumberOfLines/index.native.ts
• src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.js
• src/libs/Navigation/AppNavigator/RHPScreenOptions.js
• src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js
• src/pages/ReferralDetailsPage.js
• src/pages/ReimbursementAccount/RequestorStep.js
• src/pages/settings/Wallet/Card/BaseGetPhysicalCard.js
• src/pages/settings/Wallet/Card/GetPhysicalCardConfirm.js
• src/pages/settings/Wallet/Card/GetPhysicalCardName.js
• src/pages/settings/Wallet/Card/GetPhysicalCardPhone.js
• src/styles/addOutlineWidth/index.ts

PropTypes

• src/components/OptionsList/optionsListPropTypes.js
• src/components/OptionsSelector/optionsSelectorPropTypes.js

Styles

• src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js
• src/pages/signin/SignInPageLayout/signInPageStyles/index.js
• src/styles/containerComposeStyles/index.native.ts
• src/styles/containerComposeStyles/index.ts
• src/styles/getContextMenuItemStyles/index.native.ts
• src/styles/getContextMenuItemStyles/index.ts
• src/styles/optionRowStyles/index.ts
• src/styles/optionRowStyles/index.native.ts

[grgia]

cc @roryabraham Let me know if you're interested in helping to review these when they're done!

[grgia]

cc @chrispader as well

[koko57]

Could you please assign me to this tracking issue?

[koko57]

@grgia it turns out we don't need to migrate src/styles/addOutlineWidth/index.ts - it's used in styles/styles.ts

[grgia]

@koko57 are you able to update the issue description? If so, feel free to update as needed! I used a strikethrough for that one

[koko57]

@grgia no, unfortunately I cannot update it 😞

[chrispader]

@grgia should i work on some of this or are these issues/batches already assigned to someone?

[koko57]

@grgia here's the summary what we've managed to do so far
open PRs:
#31774
#31728
#31723
#31827
#31691 (need to address one comment)

drafts:
#31815

[grgia]

@chrispader, we've got PRs up for these; but if you'd like to help review, that would be great!

[koko57]

@grgia Monday update:
open PRs:
#31774
#31728
#31723
#31827
#31691
#31815

drafts:
#31913
#31831

So now we've got PRs for all the batches 🙂

[grgia]

@koko57 amazing to hear! Do the open PRs have the author checklist completed?

[koko57]

@grgia looks like only this one is missing something, the rest are ok

[koko57]

Tuesday update:

All the PRs are opened for review 🙂 🎉
I see that some of them are already approved 🙂

[chrispader]

Should we make sure that all of these batches also include changes to propTypes? I noticed some of the components' propTypes haven't been updated, but we might ignore this since we're migrating TypeScript anway?

Wdyt? @grgia

[grgia]

@chrispader good point. I think we should include the proptypes for class components until they are officially migrated.

cc @koko57 thoughts on this?

[chrispader]

All the PRs looks good to me! 👍

[grgia]

@koko57 @chrispader

It looks like we need to replace default theme import for these files

• App/src/components/Icon/index.tsx

  Line 5 in 9c09583

  import themeColors from '@styles/themes/default';

• https://github.com/Expensify/App/blob/3b02565ea9df14b93ca3c1f2ce3de2ef4c8f4c1d/src/styles/getTooltipStyles.ts

• App/src/components/MapView/MapView.web.tsx

  Line 13 in 68233f4

  import Direction from './Direction';

• App/src/components/ShowMoreButton/index.js

  Line 11 in 1080ca0

  import themeColors from '@styles/themes/default';

• App/src/pages/home/report/ReportActionItem.js

  Line 50 in 86767e1

  import themeColors from '@styles/themes/default';

• App/src/pages/home/report/ReportActionItemSingle.js

  Line 24 in 1d44d68

  import themeColors from '@styles/themes/default';

• App/src/stories/Composer.stories.js

  Line 10 in e87d35d

  import CONST from '../CONST';

• App/src/styles/getModalStyles.ts

  Line 6 in e87d35d

  import themeColors from './themes/default';

• App/src/styles/getReportActionContextMenuStyles.ts

  Line 3 in 05a58d8

  import themeColors from './themes/default';

• App/src/styles/getTooltipStyles.ts

  Line 6 in 3b02565

  import positioning from './utilities/positioning';

• App/src/styles/styles.ts

  Line 23 in 1b22f59

  import defaultTheme from './themes/default';

• App/src/styles/StyleUtils.ts

  Line 12 in 8537b73

  import themeColors from './themes/default';

[koko57]

@grgia ok I will prepare the PR for the missed themeColors imports inside the components.

Then I can take care of the rest of the files, but please clarify how should I change import like this:
App/src/styles/StyleUtils.ts

[chrispader]

Then I can take care of the rest of the files, but please clarify how should I change import like this: App/src/styles/StyleUtils.ts

We need to pass theme from the component with useTheme to any of the functions that currently depend on themeColors

[koko57]

@chrispader @grgia #32247 ready for review

[chrispader]

@chrispader @grgia - for this file I think it should stay as it is App/src/styles/styles.ts

Yes right. We're removing this import and defaultStyles as soon as all components are migrated.

[grgia]

@koko57
I created two issues for these
#32254
#32255

[rezkiy37]

@grgia, I've opened a PR for review - #32250.

[koko57]

@grgia thanks! we're almost done, but I will link the PRs for this issue. The last PR is nearly there

[grgia]

@koko57 @rezkiy37 which PR will include getTooltipStyles.ts?

[koko57]

@grgia the last one I'm opening in a few minutes - there will be 2 PRs for the Util issue

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.6-2 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [Theme Switching Migration] Missed imports #32250

If no regressions arise, payment will be issued on 2023-12-08. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

For reference, here are some details about the assignees on this issue:

• @koko57 does not require payment (Contractor)

[melvin-bot]

@koko57, @grgia Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

@koko57, @grgia Eep! 4 days overdue now. Issues have feelings too...

[grgia]

Closing as complete 🎊