Adding shaded skin tones for handshake emoji

[abdulrahuman5196]

@stitesExpensify

Details

Adding shaded skin tones for handshake icon

Fixed Issues

$ #14302
PROPOSAL: #14302 (comment)

Tests

1. Open Chat
2. Click on emoji selector
3. Select darker skin tones
4. Choose handshake icon and it should have dark skin tone

• Verify that no errors appear in the JS console

Offline tests

1. Open Chat
2. Click on emoji selector
3. Select darker skin tones
4. Choose handshake icon and it should have dark skin tone

QA Steps

1. Open Chat
2. Click on emoji selector
3. Select darker skin tones
4. Choose handshake icon and it should have dark skin tone

• Verify that no errors appear in the JS console

PR Author Checklist

• I linked the correct issue in the ### Fixed Issues section above
• I wrote clear testing steps that cover the changes made in this PR
  • I added steps for local testing in the Tests section
  • I added steps for the expected offline behavior in the Offline steps section
  • I added steps for Staging and/or Production testing in the QA steps section
  • I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
  • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
  • I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
• I included screenshots or videos for tests on all platforms
• I ran the tests on all platforms & verified they passed on:
  • Android / native
  • Android / Chrome
  • iOS / native
  • iOS / Safari
  • MacOS / Chrome / Safari
  • MacOS / Desktop
• I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
• I followed proper code patterns (see Reviewing the code)
  • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick)
  • I verified that comments were added to code that is not self explanatory
  • I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
  • I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
  • I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
  • I verified any copy / text that was added to the app is correct English and approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
  • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
  • I verified the JSDocs style guidelines (in STYLE.md) were followed
• If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
• I followed the guidelines as stated in the Review Guidelines
• I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
• I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
• I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
• I verified that if a function's arguments changed that all usages have also been updated correctly
• If a new component is created I verified that:
  • A similar component doesn't exist in the codebase
  • All props are defined accurately and each prop has a /** comment above it */
  • The file is named correctly
  • The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
  • The only data being stored in the state is data necessary for rendering and nothing else
  • For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
  • Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
  • All JSX used for rendering exists in the render method
  • The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
• If any new file was added I verified that:
  • The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
• If a new CSS style is added I verified that:
  • A similar style doesn't already exist
  • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
• If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
• If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
• If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
• I have checked off every checkbox in the PR author checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

emoji.web.low.res.mp4

Mobile Web - Chrome

emoji.mweb.android.mp4

Mobile Web - Safari

emoji.mweb.safari.mp4

Desktop

emoji.desktop.mp4

iOS

emoji.ios.mp4

Android

emoji.android.mp4

[melvin-bot]

@nkuoch Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

[mananjadhav]

@abdulrahuman5196 Please update the correct the checklist and update the GH issue link. Incorrect links can issues with automation.

[abdulrahuman5196]

The links where correct but it had GH_LINK text. Updated that now. But I am not sure what you mean by 'Please update the correct the checklist', could you kindly let me know which checklist. I filled the data pending data from the prefilled PR template. @mananjadhav

[abdulrahuman5196]

My bad. I think you mean by "PR Author Checklist" section. Updated that as well now. Kindly have a review and let me know.

[abdulrahuman5196]

Gone through all check list items and Marked all the check list items.

[mananjadhav]

Thanks for the update. I’ll go through the testing today.

[abdulrahuman5196]

@nkuoch Could you kindly start the workflows awaiting approval? Its saying "First-time contributors need a maintainer to approve running workflows"

And kindly merge the PR as i don't have write access.

[mananjadhav]

Reviewer Checklist

• I have verified the author checklist is complete (all boxes are checked off).
• I verified the correct issue is linked in the ### Fixed Issues section above
• I verified testing steps are clear and they cover the changes made in this PR
  • I verified the steps for local testing are in the Tests section
  • I verified the steps for Staging and/or Production testing are in the QA steps section
  • I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
  • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
• I checked that screenshots or videos are included for tests on all platforms
• I included screenshots or videos for tests on all platforms
• I verified tests pass on all platforms & I tested again on:
  • Android / native
  • Android / Chrome
  • iOS / native
  • iOS / Safari
  • MacOS / Chrome / Safari
  • MacOS / Desktop
• If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
• I verified proper code patterns were followed (see Reviewing the code)
  • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
  • I verified that comments were added to code that is not self explanatory
  • I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
  • I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
  • I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
  • I verified any copy / text that was added to the app is correct English and approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
  • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
  • I verified the JSDocs style guidelines (in STYLE.md) were followed
• If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
• I verified that this PR follows the guidelines as stated in the Review Guidelines
• I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
• I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
• I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
• If a new component is created I verified that:
  • A similar component doesn't exist in the codebase
  • All props are defined accurately and each prop has a /** comment above it */
  • The file is named correctly
  • The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
  • The only data being stored in the state is data necessary for rendering and nothing else
  • For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
  • Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
  • All JSX used for rendering exists in the render method
  • The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
• If any new file was added I verified that:
  • The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
• If a new CSS style is added I verified that:
  • A similar style doesn't already exist
  • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
• If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
• If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
• If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
• I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

web-handshake-emoji.mov

Mobile Web - Chrome

Mobile Web - Safari

mweb-safari-handshake-emoji.mov

Desktop

iOS

Android

android-handshake-emoji.mov

---

Completed the checklist. Simple PR, @nkuoch good to go here.

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[github-actions]

Performance Comparison Report 📊

Significant Changes To Duration

There are no entries

Meaningless Changes To Duration

Show entries

Name	Duration
App start TTI	687.362 ms → 691.070 ms (+3.707 ms, +0.5%)
Open Search Page TTI	607.109 ms → 607.296 ms (+0.187 ms, ±0.0%)
App start nativeLaunch	20.800 ms → 20.968 ms (+0.168 ms, +0.8%)
App start regularAppStart	0.021 ms → 0.017 ms (-0.004 ms, -19.4%) 🟢
App start runJsBundle	184.781 ms → 183.037 ms (-1.744 ms, -0.9%)

Show details

Name	Duration
App start TTI	Baseline Mean: 687.362 ms Stdev: 22.767 ms (3.3%) Runs: 644.8982840001117 645.0767669999041 649.3947870000266 668.8068820000626 669.5024860000703 670.0137549999636 672.6662109999452 674.0868820000906 676.2480669999495 676.6867619999684 676.8478079999331 677.6639229999855 681.9014749999624 684.7417470000219 685.3447249999736 687.189023999963 688.2161610000767 689.1530480000656 689.3214070000686 691.1699270000681 693.7933050000574 693.8079649999272 695.3314090000931 698.8984069998842 703.9000719999894 717.1310630000662 725.9426579999272 729.4898820000235 731.4785730000585 732.1687990000937 Current Mean: 691.070 ms Stdev: 27.560 ms (4.0%) Runs: 644.1122880000621 646.9936800000723 654.4398489999585 656.4738910000306 661.9651460000314 662.6964839999564 663.5581179999281 665.4848450000864 674.6359439999796 676.3872690000571 676.8292400001083 678.2154069999233 684.0532529999036 689.8305470000487 690.4485810000915 690.7876860001124 692.7522130000871 694.0318799999077 695.16374800005 699.6442170001101 699.745167999994 700.9397940000053 707.3187629999593 709.8141699999105 710.5480400000233 713.0633729998954 722.0307400000747 730.4629349999595 733.7601809999906 738.2073969999328 758.7684780000709
Open Search Page TTI	Baseline Mean: 607.109 ms Stdev: 21.966 ms (3.6%) Runs: 571.6227219998837 575.5497639998794 580.0895589999855 581.0174559999723 583.1602780001704 583.6679289999884 583.9588629999198 587.2894289998803 589.9666750000324 592.2956540000159 593.7473150000442 595.0323080001399 600.613078000024 601.1975920000114 603.4328200002201 606.4872240000404 606.5733650000766 610.159953000024 611.7776689999737 614.9346119998954 615.2960620000958 616.0545659998897 617.6830649999902 618.0633549999911 619.1502689998597 626.4288329998963 626.6472579999827 626.7604569999967 629.3374030000996 647.2046719999053 648.2416989998892 664.0533450001385 Current Mean: 607.296 ms Stdev: 15.527 ms (2.6%) Runs: 578.921875 580.2314460002817 587.9860030002892 589.2785239999648 593.5434979998972 594.7508139996789 594.7685959998053 596.6147869997658 596.9387610000558 597.0028889998794 597.5206299999263 598.5543209998868 600.1760660000145 600.3672690000385 602.2685549999587 602.9647629996762 606.3269040002488 607.4160149998497 610.7733160001226 611.0136719997972 611.3723150000442 612.732503999956 613.3328050000127 614.8902590000071 615.5717369997874 618.2929689995944 619.3312170000281 620.0771900000982 623.977824000176 624.0514330002479 629.5705160000362 644.1408689999953 646.003010999877
App start nativeLaunch	Baseline Mean: 20.800 ms Stdev: 1.558 ms (7.5%) Runs: 18 19 19 19 19 20 20 20 20 20 20 20 20 20 20 20 21 21 21 21 21 21 22 22 22 23 23 24 24 24 Current Mean: 20.968 ms Stdev: 1.231 ms (5.9%) Runs: 19 19 20 20 20 20 20 20 20 20 20 20 20 20 21 21 21 21 21 21 21 22 22 22 22 22 22 23 23 23 24
App start regularAppStart	Baseline Mean: 0.021 ms Stdev: 0.002 ms (8.4%) Runs: 0.018350999802350998 0.01863600010983646 0.018757999874651432 0.018920999951660633 0.018921000184491277 0.019001999869942665 0.01904299994930625 0.01920600002631545 0.019530999939888716 0.01961299986578524 0.019613000098615885 0.019652999937534332 0.019693999784067273 0.020060000009834766 0.02034499985165894 0.020345000084489584 0.020548000000417233 0.020629999926313758 0.020671000005677342 0.020874000154435635 0.021077000070363283 0.021118999924510717 0.021483999909833074 0.021972999908030033 0.0227870000526309 0.023111999966204166 0.023274000035598874 0.023599999956786633 0.02388500003144145 0.02494300017133355 Current Mean: 0.017 ms Stdev: 0.001 ms (8.1%) Runs: 0.014730000169947743 0.014851999934762716 0.015177000081166625 0.015300000086426735 0.015339999925345182 0.015421999851241708 0.015583999920636415 0.01566500007174909 0.015666000079363585 0.015828999923542142 0.015910000074654818 0.01595099992118776 0.015992000000551343 0.01603199983946979 0.01615400006994605 0.016398000065237284 0.016642000060528517 0.016642000060528517 0.01684599998407066 0.017089999979361892 0.017131000058725476 0.017170999897643924 0.017333999974653125 0.017497000051662326 0.01753800013102591 0.01782199996523559 0.018920999951660633 0.019286999944597483 0.019530999939888716 0.01977499993517995
App start runJsBundle	Baseline Mean: 184.781 ms Stdev: 16.863 ms (9.1%) Runs: 160 164 164 164 166 166 169 170 172 172 175 178 178 178 178 183 185 185 187 190 191 191 191 194 196 198 198 204 206 210 223 227 Current Mean: 183.037 ms Stdev: 10.171 ms (5.6%) Runs: 164 166 168 171 172 174 177 178 178 179 181 182 183 184 185 185 185 186 189 190 191 191 191 192 193 195 212

[OSBotify]

🚀 Deployed to staging by @nkuoch in version: 1.2.55-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production by @AndrewGable in version: 1.2.55-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅