[HOLD for payment 2024-07-10] [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!

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

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.3-7 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-10. 🎊

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:

[rojiphil]

• [@rojiphil] The PR that introduced the bug has been identified. Link to the PR: Offending 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: Added 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: Not Required. Existing checklist is good enough to capture such issues.
• [@rojiphil] Determine if we should create a regression test for this bug. : Since the changes are related to styling in menu item which is widely used, this is prone to regression. Let’s add regression test case for this.
• [@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.

1. Create an expense with a quote mark down description.
2. Go to expense details page and hover over the description.
3. Verify that the quote line is visible while hovering.

[rojiphil]

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!

@CortneyOfstad Completed BZ checklist. I could not accept the offer as it expired. Can you please send a fresh offer for this? Thanks.

[CortneyOfstad]

Sorry, was OoO — @rojiphil sent you an updated offer. Let me know once you accept and I can get that paid ASAP tomorrow. Thank you!

[rojiphil]

sent you an updated offer. Let me know once you accept and I can get that paid ASAP tomorrow.

@CortneyOfstad Offer Accepted. Thanks

[CortneyOfstad]

@isogit123 I am having trouble finding you in Upwork to send you the proposal. Can you share your Upwork profile and I'll get the proposal sent over ASAP to get it paid. Thank you!

[isogit123]

@CortneyOfstad I have already received a $125 offer from you. Did you increase the bounty?

[CortneyOfstad]

@isogit123 I don't see the offer — can you link me your Upwork profile?

[isogit123]

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

[CortneyOfstad]

Thanks @isogit123! I checked Upwork and was able to find the proposal, but it is waiting for you to accept. Once that is done, I can get this paid for you ASAP. Thanks!

[isogit123]

@CortneyOfstad I received an offer of $125 on thr 2nd of July, and it was paid successfully as illustrated in the attached photo.
Now, I received the same offer again, Do I accept that too?

[CortneyOfstad]

That is so weird — there is no history of that in Upwork anywhere. However, if you were already paid, then no worries, I will retract the original offer.

I am so sorry for the confusion here! Upwork is not being cooperative 😂

[CortneyOfstad]

Okay, now that it is sorted, moving forward with posting the Payment Summary

[CortneyOfstad]

Payment Summary

@isogit123 — paid $125 via Upwork
@rojiphil — paid $125 via Upwork

Regression Test

https://github.com/Expensify/Expensify/issues/412157