[HOLD for payment 2023-05-25] Update reaction counter colors to match mentions

[puneetlath]

With mentions we made it so that green is the color to indicate your own mentions. We should update reactions to use the same colors (green100/green600).

Current:

Update to:

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01e54bbac501c88946
• Upwork Job ID: 1656793569861054464
• Last Price Increase: 2023-05-11

[huzaifa-99]

Proposal

Please re-state the problem that we are trying to solve in this issue.

We are trying to implement consistent colors for mentions and reaction for a user

What is the root cause of that problem?

#18495 introduces the mention feature and uses the newly added green100 and green600 colors which are not currently used by the reaction count bubble.

What changes do you think we should make in order to solve the problem?

We need to add the updated styles by these changes

1. Add green100: '#B1F2D6' and green600: '#008C59' to colors here. The PR [No QA] create UserMentionRenderer for rendering mentions inside chat #18495 already adds that so we could wait for it to get merged.

green100: '#B1F2D6',
green200: '#8EECC4',
green400: '#03D47C',
green600: '#008C59',
green700: '#085239',
green800: '#002E22',

2. Reference the newly added reaction colors in the default theme here

ourReactionText: colors.green100,
ourReactionBG: colors.green600,

3. Finally apply the colors for the react counter by replacing this line

App/src/styles/StyleUtils.js

Line 1039 in d120f6a

backgroundColor = themeColors.reactionActive;

with this

backgroundColor = themeColors.ourReactionBG;

and this line

App/src/styles/StyleUtils.js

Line 1073 in d120f6a

return {color: themeColors.link};

with this

return {color: themeColors.ourReactionText};

Result

Additionally we can also update the blue100/blue600 styles as well

What alternative solutions did you explore? (Optional)

N/A

[kadiealexander]

I'm working on this with @puneetlath as part of our mentorship but I'm a bit blocked on issues with my dev environment, which Puneet has been helping me troubleshoot.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01e54bbac501c88946

[melvin-bot]

Triggered auto assignment to Contributor Plus for review of internal employee PR - @thesahindia (Internal)

[kadiealexander]

Have created the pull request, but I'm still having persistent troubles with my dev environment. Will work through those and update the testing checklist.

[puneetlath]

@kadiealexander has a PR that is almost ready.

[kadiealexander]

PR is ready for review!

[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.3.15-12 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Colour change for reaction bubbles #18819

If no regressions arise, payment will be issued on 2023-05-25. 🎊

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 @thesahindia

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

[kadiealexander]

Payment issued to @thesahindia. Thanks for reviewing my first NewDot PR!