[$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',
},