matrix-react-sdk Changed text color of highlights

This is a reintroduction of the changes from #2896.

Previously this change was rejected because in the absence of a pill, it would be impossible to tell if a message was highlighted or not. Since fc3c4fccc2a3b8d6f4d7a2d737fba6cb26df014b a yellow background has been added to highlighted messages making the red text redundant. I believe this also resolves the concerns discussed in in #2896.

This should address some issues with element (and probably a few more I'm missing): vector-im/element-web/issues/9070 vector-im/element-web/issues/13963

Dark Theme: Before: element_before_c

After: element_after_c

Light Theme: Before: element_before_light_c

After: element_after_light_c

Added 2021-04-01 Before and after demonstrating Replies, mentions, and keywords. (The disappearance of the shield icon is caused by an out-of-date fork)

Dark Theme: Before:

After:

Light Theme: Before:

After:

I wasn't able to generate a mention without a pill, although it should appear the same as the keyword message does in the examples above.

This PR currently has no changelog labels, so will not be included in changelogs.

A reviewer can add one of: T-Deprecation, T-Enhancement, T-Defect, T-Task to indicate what type of change this is, or add Type: [enhancement/defect/task] to the description and I'll add them for you.

Mar 06 '21 00:03 nhhollander

@nhhollander, thanks! Could you please include a screenshot so it's easier to review to the visual side?

Mar 06 '21 06:03 SimonBrandner

@SimonBrandner Updated, thanks for the tip

Mar 07 '21 03:03 nhhollander

Looking at discord, it seems that in addition to the highlight, they have a solid bar of color on the left side to increase visibility. When matrix is in dark mode, the contrast from the highlight alone is pretty visible, but in light mode it gets kind of washed out. I'll give that shot and see how it looks.

Apr 26 '21 19:04 nhhollander

It appears at first glance that this issue has been fixed (along with a bunch of other improvements) in https://github.com/matrix-org/matrix-react-sdk/pull/3553.

Jul 15 '21 18:07 nhhollander

@nhhollander I don't believe vector-im/element-web#3553 covered most of the changes in this PR. Messages are still entirely highlighted red when they ping you, that's just now with the exception of quoted messages in replies.

Jul 15 '21 19:07 robintown

Oops, looks like I misread that PR!

Jul 15 '21 19:07 nhhollander

Hi friends! Been a few months - any chance of this getting merged? Seems like low hanging fruit!

Oct 04 '21 18:10 haydenmc

@haydenmc I lost my dev environment when I moved computers, but I'll try to pull these changes with the latest release and see if it still works sometime this week. There's been loads of changes over the last few months, I haven't gotten a chance to check if there are any potentially conflicting changes.

Oct 05 '21 07:10 nhhollander

Any progress on this?