[HOLD for payment 2023-02-20] [$4000] Android - New room - The page darkens and the drop-down menu is poorly visible

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Open the app
2. Login with any account
3. Click on FAB button -> New Room
4. Open any drop-down window (Workspace or Visibility)

Expected Result:

The page doesn't go dark, and the drop-down menu is visible well

Actual Result:

The page darkens and the drop-down menu is poorly visible

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native

Version Number: 1.2.47.0

Reproducible in staging?: Yes

Reproducible in production?: no

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Bug5882949_video_2023-01-03_01-12-23.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01959d86ee4a1f08b9
• Upwork Job ID: 1610336595939086336
• Last Price Increase: 2023-02-04

[OSBotify]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[deetergp]

I'm pretty sure this PR is the one that introduced the bug (cc @sketchydroide)

[jasperhuangg]

@deetergp This actually happens for any dropdown menus you pull-up on Android, it isn't unique to the New Room Page. Here's a screenshot after opening the language selector dropdown on the login page. So I don't actually think the PR you linked has anything to do with this–it might be coming from elsewhere since it happens on all dropdowns.

[jasperhuangg]

@deetergp To add to this I don't think this needs to be a deploy blocker since no behavior is actually broken. This is purely a visual glitch.

cc @grgia @Luke9389 could this have anything to do with this dark theme PR?

[sketchydroide]

I'm pretty sure #13859 is the one that introduced the bug (cc @sketchydroide)

Not sure how this could be caused by that PR, it just checks if the language was changed and makes the componenent update if it did...
Am I missing something?

[melvin-bot]

Triggered auto assignment to @alexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01959d86ee4a1f08b9

[melvin-bot]

Triggered auto assignment to @adelekennedy (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @aimane-chnaif (External)

[melvin-bot]

Current assignee @deetergp is eligible for the External assigner, not assigning anyone new.

[syedsaroshfarrukhdot]

Proposal :-

To fix it we need to set color to colorBackgroundFloating to fix the issue in styles.xml because applying background color dark to android app also causes Modals to be Dark.

diff --git a/android/app/src/main/res/values/styles.xml b/android/app/src/main/res/values/styles.xml
index a804c14ab..b30501c5b 100644
--- a/android/app/src/main/res/values/styles.xml
+++ b/android/app/src/main/res/values/styles.xml
@@ -10,6 +10,7 @@
         <item name="android:statusBarColor">#061B09</item>
         <item name="colorAccent">@color/accent</item>
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
+        <item name="colorBackgroundFloating">@color/white</item>
     </style>
 
     <!-- Themes unique to the boot splash page -->

After Fix :-

WhatsApp.Video.2023-01-03.at.11.13.45.AM.1.mp4

[deetergp]

Thanks @shawnborton & @aimane-chnaif 👍 @adelekennedy let's hire @0xmiroslav to implement their solution.

[0xmiros]

Please assign me to the issue so I can start working on PR

[MelvinBot]

📣 @0xmiroslav You have been assigned to this job by @mallenexpensify!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[MelvinBot]

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

[MelvinBot]

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

• apply dark theme to picker dropdown #14984

If no regressions arise, payment will be issued on 2023-02-20. 🎊

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

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[MelvinBot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@aimane-chnaif / @0xmiroslav / @deetergp] The PR that introduced the bug has been identified. Link to the PR:
• [@aimane-chnaif / @0xmiroslav / @deetergp] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@aimane-chnaif / @0xmiroslav / @deetergp] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@aimane-chnaif / @0xmiroslav] Propose regression test steps to ensure the same bug will not reach production again.
• [@alexpensify / @adelekennedy] Link the GH issue for creating/updating the regression test once above steps have been agreed upon: [HOLD for payment 2023-02-20] [$4000] Android - New room - The page darkens and the drop-down menu is poorly visible #13951 (comment)

[alexpensify]

Was there a regression test? I'm not seeing it in this GH. Thanks!

[0xmiros]

Regression Test Proposal

1. Login with any account
2. Create new workspace if not exist
3. Go to FAB -> New room
4. Open any dropdown menu (Workspace or Visibility)
5. Verify that dropdown matches dark theme and the texts are clearly visible
6. Also verify 5. on all these places:

• Language picker on login page
• Country picker on Settings / Profile / Personal details / Home address page. After selecting USA, check State picker
• State picker on Settings / Payments / Add payment method / Debit card page
• Incorporation state, Company type, State picker on Company information page (Connect bank account Step 2)
• State picker on Personal information page (Connect bank account Step 3)
• Choose account after adding plaid bank
• Notification preferences on Report Settings page
• Default currency on Workspace General settings page
• Track distance unit picker on Reimburse expenses page

Do we agree 👍 or 👎

[0xmiros]

• The PR that introduced the bug has been identified. Link to the PR: apply dark theme throughout the app #13874
• The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: apply dark theme throughout the app #13874 (comment)
• A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: https://expensify.slack.com/archives/C01GTK53T8Q/p1676792986866479?thread_ts=1672703161.629009&cid=C01GTK53T8Q
• Propose regression test steps to ensure the same bug will not reach production again.

[deetergp]

@0xmiroslav I think your regression test proposal is acceptable.

[alexpensify]

I've chatted with @adelekennedy and believe the next step is payment. Adele will run with that process.

[0xmiros]

I just wanted to confirm that if timeline bonus is applicable here.

[alexpensify]

@0xmiroslav Thanks for flagging. I'm checking with @adelekennedy that the bonus has not been prepared following your post and we will initiate the process tomorrow.

[0xmiros]

@0xmiroslav Thanks for flagging. I'm checking with @adelekennedy that the bonus has not been prepared following your post and we will initiate the process tomorrow.

Thanks!

[adelekennedy]

done and done! Bonuses added