Skin tone selector does not have the same dimensions as the emoji list

[isagoico]

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. Navigate to a conversation
2. Open emoji picker
3. Click on the skin color selector

Expected Result:

Skin selector emojis should have the same dimensions and design as the rest of the emoji list.

Actual Result:

Skin selector emojis have a different height and don't have rounded edges as the rest of the emojis.

Workaround:

No need, visual issue.

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.0.98-0

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

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:

Issue reported by: @parasharrajat
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1631558477208900

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @michelle-thompson (Design), see these Stack Overflow questions for more details.

[MelvinBot]

Triggered auto assignment to @TomatoToaster (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[parasharrajat]

It should be marked as a deploy blocker as the new skin tone selector has issues.
The second part where some emojis have different dimensions is a side-effect and should be marked as regression.
Platform

1. Web - (Firefox > 81)

[isagoico]

This issue is already in production so I don't think it should be marked as deploy blocker. It was added here #4456

[parasharrajat]

Thanks for pointing out the PR causing the Regression @isagoico. #4456. @mananjadhav Could you please take a look and confirm?

[mananjadhav]

Thanks for posting this. Yeah, it's a part of PR #4456. It didn't come across in the review and the testing that we'll need them to be of the same size.

I'll check and fix this.