[HOLD for payment 2024-07-02] [$125] Web - Markdown - Quote line becomes invisible when hovering over it

[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.72-0
Reproducible in staging?: y
Reproducible in production?: y
Issue reported by: Applause - Internal Team

Action Performed:

1. Navigate to staging.new.expensify.com
2. Create an expense with a quote mark down description
3. Go to expense details page and hover over the description

Expected Result:

The quote line has different color from the hover effect and becomes visible while hovering

Actual Result:

The quote line becomes invisible because of having the same color as the hover effect color

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

Bug6475639_1715243913757.bandicam_2024-05-09_11-29-20-162.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~019cfcf6cb0e02864c
• Upwork Job ID: 1788623606867111936
• Last Price Increase: 2024-06-10
• Automatic offers:
• rojiphil | Reviewer | 0

Issue Owner

Current Issue Owner: @CortneyOfstad

[melvin-bot]

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

[kbecciv]

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

[kbecciv]

@CortneyOfstad FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors.

[dragnoir]

Proposal

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

Markdown - Quote line becomes invisible when hovering over it

What is the root cause of that problem?

We use the same color for the markdown vertically bar as we do for the hover background

App/src/styles/index.ts

Lines 175 to 176 in 807c945

	blockquote: {
	borderLeftColor: theme.border,

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

We need to change the color of the blockquote border to something bolder or lighter, the design team can decide

POC with using dark grey:

20240509_143919.mp4

[CortneyOfstad]

Was able to recreate without issue

2024-05-09_12-32-57.mp4

[melvin-bot]

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

[melvin-bot]

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

[isogit123]

Proposal

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

The Markdown quote line disappears when hovering over it.

What is the root cause of that problem?

The quote line and the hover background have the same colour as obvious below:

App/src/styles/index.ts

Lines 175 to 176 in 807c945

	blockquote: {
	borderLeftColor: theme.border,

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

Define a separate colour to be used for the blockquote.
In the ThemeColors type, add a property for example by adding blockquote: Color; to the object.
After that, in both the darkTheme and lightTheme objects, define a color to be used for the blockquote for example blockquote: colors.productDark600, for the darkTheme and blockquote: colors.productLight600, for the lightTheme.
Lastly, replace theme.border with theme.blockquote in:

App/src/styles/index.ts

Lines 175 to 176 in 807c945

	blockquote: {
	borderLeftColor: theme.border,

and

App/src/styles/index.ts

Lines 3221 to 3222 in 807c945

	blockquote: {
	borderLeftColor: theme.border,

and

App/src/hooks/useMarkdownStyle.ts

Lines 26 to 27 in 807c945

	blockquote: {
	borderColor: theme.border,

Here is a POC after applying the solution:

Recording.2024-05-10.191549.mp4

Contributor details:
Your Expensify account email: aboutabl6@gmail.com
Upwork Profile Link: https://www.upwork.com/fl/islama33

[melvin-bot]

@rojiphil, @CortneyOfstad Eep! 4 days overdue now. Issues have feelings too...

[CortneyOfstad]

@rojiphil we have a proposal here. Can you provide feedback by EOD today please?

[rojiphil]

Thanks for your proposals. Both proposals point out the correct root cause i.e. quote line and hover background color are the same. The solution is also straightforward i.e. change the blockquote color to something else in consultation with the design team.
Since @dragnoir was the first to identify the root cause and the solution, his proposal LGTM.
Also, since the solution did not involve any logical implementation and only involved changing color it is fine not to give a detailed solution.
🎀👀🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

Upwork job price has been updated to $125

[MonilBhavsar]

Updating the price since it is minor issue and fix cc @CortneyOfstad

[melvin-bot]

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

Offer link
Upwork job

[melvin-bot]

📣 @dragnoir You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖

[CortneyOfstad]

Updating the price since it is minor issue and fix cc @CortneyOfstad

Thanks @MonilBhavsar!

[isogit123]

PR is ready.
#43969

[isogit123]

I created a new PR to merge with the latest changes without conflicts.

#43987

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[isogit123]

I think the PR caused a regression here #44211
I can't verify that because I don't see the "Book Travel" option after clicking the FAB. Is there something that I'm missing here?

[rojiphil]

I can't verify that because I don't see the "Book Travel" option after clicking the FAB. Is there something that I'm missing here?

@isogit123 Yea. We missed considering the interactive hover case. Book Travel is beta feature. You can return true here and you will be able to see this. Can you please bring up a PR for this?

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

• Use correct hover background for MenuItem New PR #43987
• [CP Staging] Remove hover background for non interactive elements #44219

If no regressions arise, payment will be issued on 2024-07-02. 🎊

For reference, here are some details about the assignees on this issue:

• @rojiphil requires payment automatic offer (Reviewer)
• @isogit123 requires payment (Needs manual offer from BZ)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@rojiphil] The PR that introduced the bug has been identified. Link to the PR:
• [@rojiphil] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@rojiphil] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@rojiphil] Determine if we should create a regression test for this bug.
• [@rojiphil] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@CortneyOfstad] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[CortneyOfstad]

@rojiphil can you please have the checklist done by EOD so there is no delay in issuing payment? Thank you!

[CortneyOfstad]

@rojiphil any update on the checklist?

Also, @isogit123 I am having trouble finding your Upwork profile. Can you please link it here so I can send a proposal to you for payment? Thank you!

[isogit123]

@CortneyOfstad https://www.upwork.com/freelancers/~011b9b21b42a676c99

[CortneyOfstad]

Thank you @isogit123! For some reason the original job post was not letting me search for you so I had to manually send you an offer which can be found here. Let me know once you accept and I can get that paid ASAP. Thank you!

[isogit123]

@CortneyOfstad I accepted it. Thank you.

[CortneyOfstad]

Also @rojiphil it looks like you still have not accepted your offer as well in Upwork. Please accept this as soon as you can so I can get that paid. Thanks!