[$250] Border around workspace not matching hovered background in chat log

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.77-4
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @dubielzyk-expensify
Slack conversation (hyperlinked to channel name): expensify_bugs

Action Performed:

1. Navigate to a workspace chat
2. Observe the avatar

Expected Result:

Border around workspace avatar matching hovered background in chat log

Actual Result:

Border around workspace avatar not matching hovered background in chat log

Workaround:

Unknown

Platforms:

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

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021876300830027484564
• Upwork Job ID: 1876300830027484564
• Last Price Increase: 2025-01-06
• Automatic offers:
• shubham1206agra | Contributor | 105581173
• nkdengineer | Contributor | 105581179

Issue Owner

Current Issue Owner: @jayeshmangwani

[melvin-bot]

Triggered auto assignment to @stephanieelliott (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.

[nkdengineer]

Proposal

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

Border around workspace not matching hovered background in chat log

What is the root cause of that problem?

We do not pass styles props to this component

App/src/pages/home/report/ReportActionItemSingle.tsx

Lines 210 to 213 in 154a485

	<SubscriptAvatar
	mainAvatar={icon}
	secondaryAvatar={secondaryAvatar}
	noMargin

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

We can pass the backgroundColor props in the same way we did here

App/src/components/LHNOptionsList/OptionRowLHN.tsx

Line 249 in 154a485

backgroundColor={hovered && !isFocused ? hoveredBackgroundColor : subscriptAvatarBorderColor}

       backgroundColor={isHovered ? styles.sidebarLinkActive.backgroundColor : theme.sidebar}

App/src/pages/home/report/ReportActionItemSingle.tsx

Lines 210 to 213 in 154a485

	<SubscriptAvatar
	mainAvatar={icon}
	secondaryAvatar={secondaryAvatar}
	noMargin

Notes: Some minor style changes can discuss in PR phase

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[ChavdaSachin]

Proposal

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

What is the root cause of that problem?

Style change.

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

There are two case to be considered here.

Case 1. When Item is being hovered.
Case 2. When Item is not being hovered but is still active(example open three-dot menu for any message and the message retains active state style irrespective of pointer position).

So make following code changes.
First for case 1 -
Pass conditional background style here.

    backgroundColor={isHovered || isActive ? styles.sidebarLinkActive.backgroundColor : theme.sidebar}

App/src/pages/home/report/ReportActionItemSingle.tsx

Lines 210 to 213 in 154a485

	<SubscriptAvatar
	mainAvatar={icon}
	secondaryAvatar={secondaryAvatar}
	noMargin

And for case 2 -
Introduce a new boolean prop isActive for ReportActionItemSingle component which would hold information about active state of the component.
And pass this condition hovered || isContextMenuActive || isEmojiPickerActive as isActive prop value.

function ReportActionItemSingle({
.
.
isActive = false
.
})

App/src/pages/home/report/ReportActionItemSingle.tsx

Lines 70 to 80 in 154a485

	function ReportActionItemSingle({
	action,
	children,
	wrapperStyle,
	showHeader = true,
	shouldShowSubscriptAvatar = false,
	hasBeenFlagged = false,
	report,
	iouReport,
	isHovered = false,
	}: ReportActionItemSingleProps) {

                <ReportActionItemSingle
                  .
                  .
                  isActive={hovered || isContextMenuActive || isEmojiPickerActive}
                  .
                  .
                >

App/src/pages/home/report/PureReportActionItem.tsx

Lines 990 to 1002 in 154a485

	<ReportActionItemSingle
	action={action}
	showHeader={draftMessage === undefined}
	wrapperStyle={isWhisper ? styles.pt1 : {}}
	shouldShowSubscriptAvatar={shouldShowSubscriptAvatar}
	report={report}
	iouReport={iouReport}
	isHovered={hovered}
	hasBeenFlagged={
	![CONST.MODERATION.MODERATOR_DECISION_APPROVED, CONST.MODERATION.MODERATOR_DECISION_PENDING].some((item) => item === moderationDecision) &&
	!ReportActionsUtils.isPendingRemove(action)
	}
	>

Test Branch
https://github.com/ChavdaSachin/App/tree/mock-14

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA.

What alternative solutions did you explore? (Optional)

From issue statement it is not quite clear if we want to match the background only in active state or change border color for all the cases.
So in case we want to change it for all the cases pass following prop here..

    backgroundColor={styles.sidebarLinkActive.backgroundColor}

App/src/pages/home/report/ReportActionItemSingle.tsx

Lines 210 to 214 in 154a485

	<SubscriptAvatar
	mainAvatar={icon}
	secondaryAvatar={secondaryAvatar}
	noMargin
	/>

[melvin-bot]

@stephanieelliott Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

@stephanieelliott Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

@stephanieelliott 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[melvin-bot]

@stephanieelliott 10 days overdue. I'm getting more depressed than Marvin.

[melvin-bot]

@stephanieelliott this issue was created 2 weeks ago. Are we close to a solution? Let's make sure we're treating this as a top priority. Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

@stephanieelliott 12 days overdue. Walking. Toward. The. Light...

[shubham1206agra]

There are some more places where we need to check. But we can discuss this in PR.

Since this issue had no movement for 2 weeks for some reason, I will kickstart this issue by doing the review here.

@nkdengineer's proposal looks good to me.

🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @grgia, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[ChavdaSachin]

@shubham1206agra I have clearly stated about a state we need to include here, so my proposal is superior to the selected proposal could you please recheck once.

[shubham1206agra]

Yes, but these are minor things that can be taken care of in PR itself.

[melvin-bot]

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

[melvin-bot]

📣 @shubham1206agra 🎉 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 📖

[melvin-bot]

📣 @nkdengineer 🎉 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 📖

[grgia]

@stephanieelliott can you confirm that the offer wasnt sent twice for the same role here ^

[stephanieelliott]

Thanks for jumping on this @shubham1206agra! Most of us internal employees were out for the holidays.

Looks like two offers were sent for the Contributor role -- the one sent to @nkdengineer is correct, the one sent to @shubham1206agra has been modified to C+

• Contributor offer
• C+ offer