[$1000] Web/ Chrome- Chat - Messages with flags are displayed with contra code

[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:

Precondition: In mWeb (iOS Safari)

1. Go to URL https://staging.new.expensify.com/
2. Log in with any account
3. Navigate to a conversation
4. Write a message and add a flag (in this case Ukraine)
   In Web - Chrome browser (FireFox browser is supporting the Flags, not Chrome)
5. Verify the text is correctly displayed

Expected Result:

Messages with flags are displayed correctly and the user can see text, emoji and flags including.

Actual Result:

Messages with flags are displayed incorrectly. Instead of moisture in a text message letters UA.

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web/Chrome

Version Number: 1.2.32.1

Reproducible in staging?: Yes

Reproducible in production?: Yes

Email or phone of affected tester (no customers):

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

Notes/Photos/Videos: Any additional supporting documentation

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/~012f5ca8abe85c1110
• Upwork Job ID: 1597992202180374528

[melvin-bot]

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

[kbecciv]

Just FYI, we checked the Firefox browser and flag emoji is displayed correctly.

[s77rt]

Proposal

diff --git a/src/styles/fontFamily/emoji/index.js b/src/styles/fontFamily/emoji/index.js
index 5a1a79984b..23647ad6db 100644
--- a/src/styles/fontFamily/emoji/index.js
+++ b/src/styles/fontFamily/emoji/index.js
@@ -1,5 +1,5 @@
 // In windows and ubuntu, we need these system fonts for emojis to work properly
 // otherwise few of them will appear as black and white
-const emojiFont = 'GTAmericaExp-Regular, Segoe UI Emoji, Noto Color Emoji';
+const emojiFont = 'GTAmericaExp-Regular, Noto Color Emoji, Segoe UI Emoji';
 
 export default emojiFont;

Details

Noto Color Emoji should be used first and only fallback to Segoe UI Emoji.
Segoe UI Emoji does not support flag emojis.

[stephanieelliott]

Hey @JmillsExpensify, should this go to you as part of WAQ Emojis?

[JmillsExpensify]

I'm pretty overloaded on bugs at the moment, so would you mind pushing this one forward? I'll still make sure it's on the larger tracking issue.

[JmillsExpensify]

That said, I'm not totally sure I understand the reproduction steps. What does this mean?

Messages with flags are displayed incorrectly. Instead of moisture in a text message letters UA.

[stephanieelliott]

Oh no problem, yep I got this one! Just wanted to make sure I was following process 😊

[stephanieelliott]

Yeah also @kbecciv I am not able to reproduce this using the steps you provided -- I tried Chrome and Safari. Can you re-test and confirm this is still occurring for you, and if so update the repro steps?

[stitesExpensify]

I believe that this is only reproducible on Windows @stephanieelliott. MacOS does a good job of supporting flags natively

[s77rt]

The problem is on the font. I guess mac doesn't have Segoe font and it fallback to Noto

[melvin-bot]

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

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~012f5ca8abe85c1110

[melvin-bot]

📣 @s77rt You have been assigned to this job by @stitesExpensify!
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 📖

[melvin-bot]

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

[melvin-bot]

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

[stitesExpensify]

@s77rt feel free to fix this, your proposal looks good to me

[stephanieelliott]

Cool! Wow we're really making moves here, thanks @stitesExpensify 😁

[s77rt]

Applied in Upwork (+50% bonus)
PR is ready

[stitesExpensify]

PR is up, we are deciding on whether to merge it since it doesn't fix it on all platforms.

[stephanieelliott]

It sounds like this solution will only fix the issue for users who downloaded fonts (which I'm guessing is not many). Can the we open this back up for proposals @stitesExpensify?

[stitesExpensify]

I think we should actually just pay our Contributor and C+ and close this. This is a Windows/Linux problem, not an us problem.

I mentioned this in the PR, but for the future we have considered making all emojis custom images, or licensing from apple, both of which would solve this problem. However, both of those options are large undertakings that we are not going to do for a while so I think we can skip it for now.

[stephanieelliott]

Cool, with that context I agree that we should just pay and close. Unless anyone disagrees, I'll take care of payments later on today.

[stitesExpensify]

Great, thanks!

[stephanieelliott]

We're ready to pay this one out in Upwork--@sobitneupane, waiting for you to accept the invite, @s77rt please accept the offer I sent over. Thanks!

[sobitneupane]

@stephanieelliott Accepted

[s77rt]

@stephanieelliott Accepted

[stephanieelliott]

All paid up!