[$500] Private Note - Left line/border of quoted text is not visible when hovering over it in Notes

[kbecciv]

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

---

Action Performed:

1. Go to staging.
2. Access any chat.
3. Click on the header and navigate to "Private notes."
4. Go to My note > Notes
5. Enter "> test" and save it.
6. Observe that the left line isn't visible on hovering.

Expected Result:

The left line should remain visible when hovering

Actual Result:

The left line is hidden

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.77.5
Reproducible in staging?: y
Reproducible in production?: y
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
Notes/Photos/Videos: Any additional supporting documentation

Desktop-_issue.mov

hover.mp4

Recording.4855.mp4

Expensify/Expensify Issue URL:
Issue reported by: @aman-atg
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1696349601547269

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a4212fb13e89f5bb
• Upwork Job ID: 1709663891418292224
• Last Price Increase: 2023-10-25
• Automatic offers:
• hoangzinh | Reviewer | 27460002
• ZhenjaHorbach | Contributor | 27460004
• aman-atg | Reporter | 27460007

[melvin-bot]

Triggered auto assignment to @peterdbarkerUK (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[ZhenjaHorbach]

Proposal

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

Blockquote has the same color as the selected color

What is the root cause of that problem?

Blockquote has the same color as the private note background color while hovering

In the styles we use for blockquote borderLeftColor: theme.border which matches the color of the background after hovering

Therefore, after hovering over an element, the blockquote merges with the background

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

Due to the latest updates, there was a decision to update the background color for menu items

We need to update getButtonBackgroundColorStyle

function getButtonBackgroundColorStyle(buttonState: ButtonStateName = CONST.BUTTON_STATES.DEFAULT, isMenuItem = false): ViewStyle {
    switch (buttonState) {
        case CONST.BUTTON_STATES.PRESSED:
            return isMenuItem ? {backgroundColor: themeColors.border} : {backgroundColor: themeColors.buttonPressedBG}; // or just {backgroundColor: themeColors.border}
        case CONST.BUTTON_STATES.ACTIVE:
            return isMenuItem ? {backgroundColor: themeColors.highlightBG} : {backgroundColor: themeColors.buttonHoveredBG};
        case CONST.BUTTON_STATES.DISABLED:
        case CONST.BUTTON_STATES.DEFAULT:
        default:
            return {};
    }
}

App/src/styles/StyleUtils.ts

Lines 521 to 532 in 55f86ce

	function getButtonBackgroundColorStyle(buttonState: ButtonStateName = CONST.BUTTON_STATES.DEFAULT, isMenuItem = false): ViewStyle {
	switch (buttonState) {
	case CONST.BUTTON_STATES.PRESSED:
	return {backgroundColor: themeColors.buttonPressedBG};
	case CONST.BUTTON_STATES.ACTIVE:
	return isMenuItem ? {backgroundColor: themeColors.border} : {backgroundColor: themeColors.buttonHoveredBG};
	case CONST.BUTTON_STATES.DISABLED:
	case CONST.BUTTON_STATES.DEFAULT:
	default:
	return {};
	}
	}

What alternative solutions did you explore? (Optional)

To display text for MenuItem we use RenderHTMLSource

Which use one global set of styles
What has a positive effect on performance
But we can not pass custom styles

App/src/components/RenderHTML.js

Lines 15 to 23 in 4078503

	function RenderHTML(props) {
	const {windowWidth} = useWindowDimensions();
	return (
	<RenderHTMLSource
	contentWidth={windowWidth * 0.8}
	source={{html: props.html}}
	/>
	);
	}

If we decide to change the color on hover we will have to refactor this component

And use RenderHTML

function RenderHTMLComponent(props) {
    const {windowWidth} = useWindowDimensions();
    if (props.customTagStyles) {
        return (
            <RenderHTML
                contentWidth={windowWidth * 0.8}
                baseStyle={styles.webViewStyles.baseFontStyle}
                tagsStyles={props.customTagStyles}
                source={{html: props.html}}
            />
        );
    }
    return (
        <RenderHTMLSource
            contentWidth={windowWidth * 0.8}
            source={{html: props.html}}
        />
    );
}

https://github.com/Expensify/App/blob/fe282b45cb13e01519282ccc023e5bfbd7714158/src/components/RenderHTML.js

And after that, we will be able to pass custom styles

For example

                                                <MenuItemRenderHTMLTitle
                                                    title={getProcessedTitle}
                                                    customTagStyles={{
                                                        blockquote: {
                                                            ...styles.webViewStyles.tagStyles.blockquote,
                                                            borderLeftColor: isHovered ? 'red' : 'blue',
                                                        },
                                                    }}
                                                />

App/src/components/MenuItem.js

Lines 254 to 256 in f878fbd

	{Boolean(props.title) && (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) && (
	<MenuItemRenderHTMLTitle title={getProcessedTitle} />
	)}

Or we can pass these styles as props to MenuItem

[dannysanchez559]

Proposal

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

The left border on quoted text is not visible when hovering in Notes.

What is the root cause of that problem?

This can be caused by a CSS styling issue. I believe it may be the hover attribute

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

make sure the border-left attribute in hover is working properly and is visible in the hover state

What alternative solutions did you explore? (Optional)

N/A

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/danielsanchez112?viewMode=1

[melvin-bot]

📣 @dannysanchez559! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[Kunkka0822]

Proposal

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

The left border on quoted text is not visible when hovering in Notes.

What is the root cause of that problem?

The reason of this issue is that the background color of "Private notes" and the color of left bar is same.
Please take a look at below two screenshots.
This image shows the color of left bar when not hovering.

And this image shows the background color of "Notes"

As you can see, both are using same color value. RGB(26, 61, 50)

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

We should change the color of left bar or background color of the "Notes".
Like this below image.

This is a simple issue to fix easily.

What alternative solutions did you explore? (Optional)

N/A

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/maksyml22

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[hoangzinh]

@ZhenjaHorbach, Thanks for your proposal. Could you add more details to your RCA? and do you mean "hover" instead of "selected color"?

[hoangzinh]

@dannysanchez559 Thanks for your proposal, but your proposal is not clear enough to me. I couldn't get the root cause and also the idea to fix the issue. Do you mind to check your proposal again? Thanks

[ZhenjaHorbach]

@hoangzinh
It was just an idea )
What to set a different color for blockquote or private note during hover )
But I guess that doesn't make sense
Changing default color for blockquote looks simpler and more concise

plus update proposal )
#28858 (comment)

[hoangzinh]

@Kunkka0822 Thanks for your proposal. You have the correct RCA, but next time, it's better if you can link to the current code into your RCA (so we can have broader information based on the codebase). Unforturnely, Your approach is almost the same as @ZhenjaHorbach's approach. And I prefer the idea of @ZhenjaHorbach with changing to borderLeftColor: theme.borderLighter.

Anyway, keep up your great work in other issues.

[hoangzinh]

It was just an idea )

@ZhenjaHorbach yeah, but RCA needs to clear as much as possible to we can ensure we're fixing the root cause. Btw, could you help to take screenshots of before and after change to borderLeftColor: theme.borderLighter of blockquote in Note and also in chat report message? I think we need design approve in this case, so we need screenshots. Thanks

[ZhenjaHorbach]

@hoangzinh
Done )

Before
borderLeftColor: theme.border

Screen.Recording.2023-10-05.at.15.46.30.mov

After
borderLeftColor: theme.borderLighter

Screen.Recording.2023-10-05.at.15.45.31.mov

[hoangzinh]

@shawnborton @peterdbarkerUK , we need your help to review if the new border color of the blockquote looks good to you.

In this GH, We identified that the current blockquote's border and hover background of menu item have the same color theme.border (#1A3D32). It makes the blockquote hidden when we hover over the menu item.

@ZhenjaHorbach suggested in his proposal #28858 (comment) that we should update blockquote's borderline to theme.borderLighter (#184E3D). Could you help to review if the blockquote still looks good? Thanks

Below are screenshots before & after of blockquote in Private notes and Chat Message

• Private Note

Default state

Before	After

Hover state

Before	After

• Chat message

Default state

Before	After

Hover state

Before	After

And recording video of @ZhenjaHorbach here #28858 (comment)

[shawnborton]

I think we should only change the border color on :hover for the notes push rows for private notes. We should keep it the same elsewhere though.

[ZhenjaHorbach]

I think we can do it
But there is a question of performance here

To display text for MenuItem we use RenderHTMLSource

Which use one global set of styles
What has a positive effect on performance
But we can not pass custom styles

App/src/components/RenderHTML.js

Lines 15 to 23 in 4078503

	function RenderHTML(props) {
	const {windowWidth} = useWindowDimensions();
	return (
	<RenderHTMLSource
	contentWidth={windowWidth * 0.8}
	source={{html: props.html}}
	/>
	);
	}

If we decide to change the color on hover we will have to refactor this component

And use RenderHTML

function RenderHTMLComponent(props) {
    const {windowWidth} = useWindowDimensions();
    if (props.customTagStyles) {
        return (
            <RenderHTML
                contentWidth={windowWidth * 0.8}
                baseStyle={styles.webViewStyles.baseFontStyle}
                tagsStyles={props.customTagStyles}
                source={{html: props.html}}
            />
        );
    }
    return (
        <RenderHTMLSource
            contentWidth={windowWidth * 0.8}
            source={{html: props.html}}
        />
    );
}

Which will have to pass a custom set of styles

                                                <MenuItemRenderHTMLTitle
                                                    title={getProcessedTitle}
                                                    customTagStyles={{
                                                        blockquote: {
                                                            ...styles.webViewStyles.tagStyles.blockquote,
                                                            borderLeftColor: isHovered ? 'red' : 'blue',
                                                        },
                                                    }}
                                                />

But in this solution we have problem

https://stackoverflow.com/questions/68966120/react-native-render-html-you-seem-to-update-the-x-prop-of-the-y-component-in-s

I tried a little to get rid of this warning
But I haven't succeeded yet

Since our parent element changes very often, especially when we hover over the element and change the state

In case the style set is static, I think we can use this

But if we are talking about color changes on hover, it looks very complicated and unjustifiably

@hoangzinh

What do you think ?

[ZhenjaHorbach]

@shawnborton

What do you think about if we change the default color only on private notes?
and we will not depend on whether the element is hovered or not?

[shawnborton]

I think we should use our standard border color where ever we can, and only use this exception on hover.

That being said, I'm actually surprised we're showing the border here:

Why aren't we just rendering this as plain text? That seems odd to me that we'd show that kind of styling in a push-to-page input. cc @Expensify/design for thoughts, as well as @techievivek @JmillsExpensify @trjExpensify

[hoangzinh]

There are 2 reasons that I think we can use a lighter color of our standard border for blockquote:

1. This bug can be reproducible in the Task details report as well. So I think about a global solution that can fix for other pages if possible.
2. We also apply themeColors.borderLighter as the border color of the checkbox as well (code link)

Screen.Recording.2023-10-06.at.05.38.31.mov

Why aren't we just rendering this as plain text? That seems odd to me that we'd show that kind of styling in a push-to-page input.

I have the same thought. But I realize we're supporting markdown on various pages I.e: Welcome message, Task description...

[ZhenjaHorbach]

Can't we start using a new color only for left line that will be slightly different from the current one?
Which will have little visual impact
But we will be absolutely sure that such a case will not happen again.

[hoangzinh]

@ZhenjaHorbach I think no ^, we should use our existing theme colors

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

[hoangzinh]

@ZhenjaHorbach our PR has been reverted because of #30952

[ZhenjaHorbach]

What a pity (

Apparently, we need to add a new parameter for this function
And we will only pass the parameter for a limited list of an item(only FAB elements, only RHN, Private notes) for which we want a new colors

App/src/styles/StyleUtils.ts

Lines 521 to 532 in 55f86ce

	function getButtonBackgroundColorStyle(buttonState: ButtonStateName = CONST.BUTTON_STATES.DEFAULT, isMenuItem = false): ViewStyle {
	switch (buttonState) {
	case CONST.BUTTON_STATES.PRESSED:
	return {backgroundColor: themeColors.buttonPressedBG};
	case CONST.BUTTON_STATES.ACTIVE:
	return isMenuItem ? {backgroundColor: themeColors.border} : {backgroundColor: themeColors.buttonHoveredBG};
	case CONST.BUTTON_STATES.DISABLED:
	case CONST.BUTTON_STATES.DEFAULT:
	default:
	return {};
	}
	}

[hoangzinh]

And we will only pass the parameter for a limited list of an item(only FAB elements, only RHN, Private notes) for which we want a new colors

I don't think it's a good idea. Because it will cause inconsistency :hover background in other places using the menu item.

[ZhenjaHorbach]

And we will only pass the parameter for a limited list of an item(only FAB elements, only RHN, Private notes) for which we want a new colors

I don't think it's a good idea. Because it will cause inconsistency :hover background in other places using the menu item.

Another alternative could be
Go through all the places where the item menu is used and choose a new color that is which doesn't match anywhere when we hover over the element with the background color

[hoangzinh]

@ZhenjaHorbach Can you give the screenshot of those places? then we can ask for suggestions from our design team

[ZhenjaHorbach]

@ZhenjaHorbach Can you give the screenshot of those places? then we can ask for suggestions from our design team

@hoangzinh

Where does the new color match the background color during hover?

[hoangzinh]

Yes, I'm curious how many are there.

[ZhenjaHorbach]

Yes, I'm curious how many are there.

I hope I found everything )
In short, all problems are typical for Section component
Which has a background color that matches the new hover color
So if decided to fix it, we only need to make minimal changes

[hoangzinh]

Perfect. Can you raise your question/opinion to our design team (@shawnborton or @dubielzyk-expensify) to ask their advice on that issue? Thanks.

[ZhenjaHorbach]

Asked a question on Slack
https://expensify.slack.com/archives/C01GTK53T8Q/p1700213083108879

[melvin-bot]

This issue has not been updated in over 15 days. @hoangzinh, @peterdbarkerUK, @grgia, @ZhenjaHorbach eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[melvin-bot]

Triggered auto assignment to @sakluger (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[sakluger]

@grgia do we still need this issue? Based on the Slack thread, you created a separate GH issue which I think will fix this bug.

If we close this issue, do we owe payments to anyone for work done up until now?

[sakluger]

According to @grgia we can close out this issue. There was a PR merged in Oct but then reverted, so no payment is due.