[$250] Shortcut - Group chat counter under Shortcut appears differently than LHN and chat header

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

---

Version Number: 1.4.57-0
Reproducible in staging?: y
Reproducible in production?: new feature
Issue reported by:

Action Performed:

Precondition:

• App is in light mode.

1. Go to staging.new.expensify.com.
2. Create a group chat with at least three people.
3. Create a split bill in the group chat.
4. Go to FAB.

Expected Result:

The group chat counter under Shortcut appears the same as the counter in LHN and chat header.

EDIT: SEE THIS COMMENT TO BETTER UNDERSTAND WHAT IS EXPECTED!!

Actual Result:

The group chat counter under Shortcut is black in light mode, while it is white in LHN and chat header.

Workaround:

n/a

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

bandicam.2024-03-27.14-40-25-425.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0159361e054180c63b
• Upwork Job ID: 1774874377625939968
• Last Price Increase: 2024-04-08
• Automatic offers:
• DrLoopFall | Contributor | 0

[github-actions]

👋 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.

[melvin-bot]

Triggered auto assignment to @cristipaval (Engineering), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[kbecciv]

We think that this bug might be related to #vip-vsb

[DrLoopFall]

Proposal

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

Group chat counter under Shortcut appears differently than LHN and chat header

What is the root cause of that problem?

We are using a different style for the small avatar, avatarInnerTextSmall, which has color: theme.text, but for large avatar we are using avatarInnerText which has color: theme.textLight

App/src/components/MultipleAvatars.tsx

Line 294 in d89fa9a

style={[styles.userSelectNone, size === CONST.AVATAR_SIZE.SMALL ? styles.avatarInnerTextSmall : styles.avatarInnerText]}

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

Update avatarInnerText to use same color as avatarInnerTextSmall(theme.text), so the avatar remains consistent in all the places.

avatarInnerText: {
-   color: theme.textLight,
+   color: theme.text,
    fontSize: variables.fontSizeSmall,
    lineHeight: undefined,
    marginLeft: -3,
    textAlign: 'center',
},

[cristipaval]

Removing the deploy blocker label given that it is a minor UI issue that doesn't break the functionality

[cristipaval]

Tagging @Expensify/design to confirm this is a bug and to clarify the expected specs.

[dannymcclain]

So I think this is a bug, but I think the actual bug is in the LHN and header, not in the Shortcut.

In dark mode, the +X counter uses a background color of icons with a text color of text. But in light mode, the counter uses a background color of icons with #FFF as the text color (white). We don't typically use pure white in the interface, so I'm thinking the counter in the Shortcut is actually the right version (it looks like it's using icons for the background color and text for the text color like in dark mode, but obviously they are the light mode versions of those variables).

cc'ing @shawnborton because he might know what's up!

[shawnborton]

Hmm yeah, that does seem like a bug and I agree with where you landed Danny.

[cristipaval]

Thank you, @dannymcclain and @shawnborton! I'll make this one external to get it fixed!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0159361e054180c63b

[melvin-bot]

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

[paultsimura]

On staging and main, the group thumbnail looks like this and the issue is no longer relevant:

Didn't we deprecate the counter?

[melvin-bot]

Upwork job price has been updated to $250

[cristipaval]

I'm also making this one 250$, given that it's a trivial UI thing.

[paultsimura]

There is one proposal which requires a review

[thesahindia]

So I think this is a bug, but I think the actual bug is in the LHN and header, not in the Shortcut.

@dannymcclain, can you confirm the expected behaviour: We want the LHN and header version to look like the one in the Shortcut? We should use theme.text instead of theme.textLight?

[dannymcclain]

We want the LHN and header version to look like the one in the Shortcut?

Yeah that's what I'm thinking. So that would be like this:

[thesahindia]

Thanks @dannymcclain!

@DrLoopFall, please update your proposal.

[DrLoopFall]

Proposal

Updated

cc @thesahindia

[thesahindia]

@DrLoopFall's proposal looks good to me!

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Current assignee @cristipaval is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

📣 @DrLoopFall 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer 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 📖

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[DrLoopFall]

@mvtglobally

The issue is reproducible when creating split bills from existing group chats (which uses the old avatar style)

[DrLoopFall]

@thesahindia
The PR #40175 is ready for review.

[DrLoopFall]

Hi @cristipaval,
The payment for this issue is still pending, can you please process it?

[melvin-bot]

Triggered auto assignment to @sakluger (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[cristipaval]

@sakluger could you please help with the payments here? 🙏

[sakluger]

Summarizing payment on this issue:

Contributor: @DrLoopFall $250, paid via Upwork
Contributor+: @thesahindia $250, please request on Newdot

[JmillsExpensify]

$250 approved for @thesahindia