ui_redesign: Apply blue links style to message view UI.

[Joelute]

With the current Zulip redesign, we would like to tune the colors of the links with a slight underline for better accessibility. These changes to the links only applies to the main message view interface.

Fixes: #24877.

Screenshots and screen captures:

Light mode:

Message view:

Unread banners:

Compose banner:

Dark mode:

Message view:

Unread banners:



Compose banners:

Self-review checklist

• Self-reviewed the changes for clarity and maintainability
  (variable names, code reuse, readability, etc.).

Communicate decisions, questions, and potential concerns.

• Explains differences from previous plans (e.g., issue description).
• Highlights technical choices and bugs encountered.
• Calls out remaining decisions and concerns.
• Automated tests verify logic where appropriate.

Individual commits are ready for review (see commit discipline).

• Each commit is a coherent idea.
• Commit message(s) explain reasoning and motivation for changes.

Completed manual review and testing of the following:

• Visual appearance of the changes.
• Responsiveness and internationalization.
• Strings and tooltips.
• End-to-end functionality of buttons, interactions and flows.
• Corner cases, error conditions, and easily imagined bugs.

[zulipbot]

Hello @zulip/design members, this pull request was labeled with the "UI experiment", "redesign" labels, so you may want to check it out!

[terpimost]

Thank you for doing this. Let's please tune styles like this:
text-underline-offset: 3px;

Dark theme:
normal: hsla(200, 100%, 43%, 1) and text-decoration-color: hsla(200, 100%, 43%, 0.3);
hover: hsla(200, 100%, 60%, 1) and text-decoration-color: hsla(200, 100%, 60%, 1)
active: color: hsla(200, 100%, 43%, 1); and text-decoration-color: hsla(200, 100%, 40%, 1);

Light theme:
normal: color: hsl(210 94% 42% / 1) and text-decoration-color: hsla(210, 94%, 42%, 0.2);
hover: color: hsl(212 100% 50% / 1) and text-decoration-color: hsla(210, 100%, 50%, 0.7);,
active: color: hsl(212 100% 30% / 1) and text-decoration-color: hsla(210, 100%, 30%, 1);,

[Joelute]

Thank you for the feedback! Will do that tomorrow.

[Joelute]

Hello @terpimost! I've updated the PR reflecting your feedback, please have a look.

[terpimost]

I think I still see the old style:

[Joelute]

I think you're looking at main in that screenshot, the stylings looks like the old stylings, not from the PR at all.

[terpimost]

yes, sorry, my bad. Hey @alya and @timabbott please take a look at link styles.

[Joelute]

Pushed a commit to resolve conflict.

[alya]

Thanks! I think it's worth trying on CZO.

From a little bit of playing around with it, I liked how to it looks in banners, but was less sure about messages, specifically when the underline ends up being right next to the blue box.

[alya]

@Joelute Could you please update the PR description to make it clear what the three screenshots in each group represent?

[Joelute]

@zulipbot add "mentor review"

[Joelute]

@zulipbot add "buddy review"

[terpimost]

when the underline ends up being right next to the blue box
The line isn't strong so there should be no confusion. The underline is stronger on hover, which is for a moment.

Lets watch it on CZO and people will tell us if they hate it

[zulipbot]

Heads up @Joelute, we just merged some commits that conflict with the changes you made in this pull request! You can review this repository's recent commits to see where the conflicts occur. Please rebase your feature branch against the upstream/main branch and resolve your pull request's merge conflicts accordingly.

[timabbott]

Closing in favor of #29629, which has this already rebased.