Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

content/msglist: Update some elements closer to new, 2023+ design, to prepare for light/dark #657

Merged

Conversation

chrisbobbe
Copy link
Collaborator

@chrisbobbe chrisbobbe commented May 10, 2024

It will be helpful to consult the web app when we define the dark-theme styles of our content elements. This PR prepares for that. I went through all the content elements as we've implemented them, and for all the things that should differ between light and dark theme, ensured that our light-theme style matches the web app.

I also brought the default content text color in line with the web app. (I mention this separately because this color is an attribute of the message list, not content itself, I guess; at least that's how it seems in the code.)

Before After
Screenshot 2024-05-10 at 3 16 07 PM Screenshot 2024-05-10 at 3 16 25 PM

Related: #157
Related: #95

The code block background is currently white anyway, so this has
been redundant. But we're about to set it to something off-white, to
align with web, and this white background color on the text spans
would interfere with that.
@chrisbobbe chrisbobbe added the a-design Visual and UX design label May 10, 2024
@chrisbobbe chrisbobbe requested a review from gnprice May 10, 2024 21:35
@chrisbobbe chrisbobbe changed the title content/msglist: Update some (not all) elements to new, 2023+ design, to prepare for light/dark content/msglist: Update some elements closer to new, 2023+ design, to prepare for light/dark May 10, 2024
Copy link
Member

@gnprice gnprice left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! LGTM, with two nits below. Otherwise please go ahead and merge.

Comment on lines 414 to 412
borderColor: _borderColor,
// (The other caller, MathBlock, passes a nontransparent color.)
// TODO(#46) remove comment about MathBlock when TeX is implemented;
// presumably it won't apply anymore.
borderColor: Colors.transparent,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this even need a comment? Presumably we'll remove the borderColor parameter itself when that happens.

Comment on lines 828 to 829
// TODO(#646) when self-user is non-silently mentioned,
// differ font color between direct and wildcard mentions
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit:

Suggested change
// TODO(#646) when self-user is non-silently mentioned,
// differ font color between direct and wildcard mentions
// TODO(#646) when self-user is non-silently mentioned,
// distinguish font color between direct and wildcard mentions

At least for me, "differ" is only an intransitive verb.

(Specifically by eliminating the border and using a particular shade
of gray for the background.)

Also the background of inline code, which in web uses the same CSS
variable as the background color for code blocks.
…ound

As the TODO comments say, there's more we have to do to bring this
up-to-date with the new, 2023+ design.

But now at least we've removed a style that doesn't appear at all in
that new design, and we're left with something we can make a
dark-theme variant for by straightforwardly checking what web does.
With Chrome's web inspector and Mac's "Digital Color Meter", I
verified that our color now matches web's color.

Since GlobalTime's clock icon is a text-like element, change it to
the new color too, and add a content test that makes sure the colors
match each other, and match the DefaultTextStyle that content
elements expect to inherit from.

I didn't find any other text-like elements that need extra treatment
like this.
@chrisbobbe chrisbobbe force-pushed the pr-update-content-and-msglist-colors branch from 456a53d to cedbb08 Compare May 11, 2024 05:16
@chrisbobbe chrisbobbe merged commit 8619e8e into zulip:main May 11, 2024
1 check passed
@chrisbobbe
Copy link
Collaborator Author

Thanks! Done.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a-design Visual and UX design
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants