HIGH: [Comment linking] Highlight the linked comment with a different color than the normal hover color

[roryabraham]

https://expensify.slack.com/archives/C035J5C9FAP/p1711152608943449?thread_ts=1705035404.136629&cid=C035J5C9FAP

Action Performed:

Click on a link to a comment in any chat.

Expected Result:

1. You should be linked straight to that comment and be able to load chats in either direction (already built, this is currently on staging)
2. The comment you linked to should be highlighted in a different color than the normal hover color (temporarily? or permanently?)

Actual Result:

The linked-to comment is highlighted with the color that a message becomes when you hover over it.

Workaround:

n/a

Platforms:

all platforms

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @shawnborton

[melvin-bot[bot]]

Triggered auto assignment to @shawnborton (Design), see these Stack Overflow questions for more details.

[melvin-bot[bot]]

Triggered auto assignment to @kadiealexander (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[roryabraham]

hey @shawnborton, any thoughts on what color we could use to highlight the message that you linked to?

[quinthar]

ya the comment linking worked great! However, I initially didn't realize what comment I had linked to, because it just looked like I was hovering over it:

[quinthar]

I would think it'd remain permanently highlighted (unlike Slack), until the page changes.

[nkdengineer]

Proposal

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

• Feature request: Highlight the linked comment with a different color than the normal hover color

What is the root cause of that problem?

• In here, we apply theme.hoverComponentBG if the report action is linked report action

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

• We can replace theme.hoverComponentBGwith our expected color.
• We need to consider both dark and light modes

What alternative solutions did you explore? (Optional)

Result

• Dark mode:

https://github.com/Expensify/App/assets/161821005/1b58d14c-dc09-4945-9f6b-f9012e0e8220

• Light mode:

https://github.com/Expensify/App/assets/161821005/da918745-f233-4cfc-9234-faa8e3108722

[shawnborton]

Yeah, I think we should just nudge this one up to use our border color as the highlight color - it's consistent with how we highlight active nav items in the LHN too. And I like the idea to leave it highlighted until you navigate away.

We could try other colors if we wanted to, like a shade of yellow or something. Thoughts? cc @Expensify/design

[dannymcclain]

Oh the yellow is kinda interesting! Can you point me to the Figma file? I'd love to see your border color example with a hovered message as well, just to compare. But I'm definitely intrigued by the yellow...

[shawnborton]

Threw it in the ol' dumpster here

[roryabraham]

I'm a fan of the yellow as well 💛

[dubielzyk-expensify]

Yellow feels appropriate if we need to go away from the green hue. All the others seem to harsh except for something like ice.

[quinthar]

What is the next step here, who is doing it, and what is the ETA?

[nkdengineer]

Can the contributor work on it? If can, anyone can review my proposal here. Thanks

[shawnborton]

Any more feedback on the colors @Expensify/design? Feel free to explore some ideas if you have any!

[dannymcclain]

@shawnborton I explored a few but honestly I'm pretty into the yellow haha. 💛

The yellow is very clearly different from "normal" product colors, so it makes it stand out as a highlight vs. a hover/other UI state. Which I think makes it a lot more clear what's happening. I don't know that I'm 100% sold on the highlight staying "forever" (until the page changes) but I feel like if we wanted to revisit the timing, we could do that as a follow-up.

The only design-y thing to note is that we should define these colors as product variables. (Light mode uses yellow-100 but dark mode uses an opacity of a yellow swatch, so I'd like to have that locked down to a variable for easiness.)

[dubielzyk-expensify]

I'm with y'all on the yellow. The fact that yellow is a highlighter color is too serendipitous as well.

Good shout @dannymcclain . I could see us adding a highlight color in Figma.

[dubielzyk-expensify]

Okay, I used it in context and I do love it on the light mode, but I think the dark mode highlight looks pretty muddy so I shift my vote to the blue.

Maybe it's just my eyes, but color-appbg feels almost brown to me when the yellow is used:

[shawnborton]

Yeah, I totally agree the yellow feels muddy when we use reduced opacity like that.

One thing we can try to do is to use true color values from our system, and don't use any opacity. After a few attemps, I think yellow (800/100) or ice (800/100) could work well for dark/light respectively. Of these two, I am digging ice quite a bit:

I tried other combinations that didn't quite work as well:

[quinthar]

I think Yellow is the most commonly used for highlighting in this situation so will be the most familiar, I vote Yellow.

[shawnborton]

Cool, if we do that, then the values I proposed above to stay true to our color system:

Would be:

• yellow100 - #FFF2B2
• yellow800 - #401102

Definitely curious for @Expensify/design's thoughts though when they are online.

[dannymcclain]

I'm totally down to roll with the yellows, but in contrast to Jon's opinion, I actually like the original yellow-with-opacity more than yellow-800 (even though I agree it does feel a little muddy). I don't feel strongly enough to delay moving forward though—I just like how the opacity feels a bit more "yellow" than the 800 swatch.

Ice is also nice, but on dark mode it starts to feel more like a "regular" UI color. Blue also looks really good, but doesn't have the same "highlight" vibe as yellow. And of course green looks great too, but I worry it doesn't stand out quite as much as the yellow.

So all that to say, I'm down with yellow but would also be pretty happy with any of the options (green would probably be my top second pick).

[shawnborton]

Yeah, I think that is totally fair feedback. Slack ends up doing something quite muddy on dark mode too for reference:

So we could just take our yellow800 and push the hue more towards traditional yellow, and we get something like this:

Basically just moving this knob from left to right a bit:

[dannymcclain]

I'm down for that 👍

[shawnborton]

Cool, and it seems like something that we can easily change, even during the PR review process, once we actually take it for a spin.

So the colors to start:

• Dark mode highlight: #402B02 - a new custom color
• Light mode highlight: #FFF2B2 - aka yellow100

[dannymcclain]

Sounds good!

I could see us adding a highlight color in Figma.

I think we should go ahead and add message highlight variables in our surface group of our Product:Colors variables. That way if we do decide to change it, it will be very easy.

[shawnborton]

Sweet - I just added it but I added it to state as it seemed to be more appropriate there?

Mostly because highlighted is a state that can change, so that was my rough thinking. Thoughts?

[dannymcclain]

Yeah I like that! We might want to name it something else though—just because we already have a highlight-background. What about just state/highlight?

[shawnborton]

Oh that's a good shout - yup, let's go with what you suggested. Will update!

[quinthar]

Ok, what is the next step -- who is building this? Do we have a PR?

[nkdengineer]

I updated the screenshot videos in proposal based on this comment