<blank> is typing unreadable

[CaseySchmidt]

Describe the bug While in dark mode, when a user is typing in a channel the username color does not have enough contrast to be readable.

To Reproduce Steps to reproduce the behavior: Have a user type in a channel while you are watching

Expected behavior The username of the person typing should be readable.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser Desktop App
• Version 3.5.7 (but multiple versions as well as the web client)

[pbaity]

Hi @CaseySchmidt , welcome and congrats on your first issue! I've tried replicating the issue in web and desktop (I'm on 3.18.1, the almost-newest version), but it's clear for me:

If you want to check, take a peek with dev tools at the rc-message-box__typing div and rc-message-box__typing-user span and what color variables they use.

It's a curious issue since the code related to this hasn't been changed here for 2 years, and I don't remember encountering this on previous issues. Is some color or variable being overwritten for you by other custom CSS?

[CaseySchmidt]

@pbaity thanks!

So we started seeing this problem on 4.0 and recently just upgraded to 4.1.1 and the issue still persists. As a point of reference the code seems to have changed from rc-message-boxtyping to rc-message-boxactivity which may be the source of the problem.

[pbaity]

@CaseySchmidt So far we've just been using two CSS variables (--message-box-user-typing-color and --message-box-user-typing-user-color) that those elements already use for their color - can you check what variable is used (if a variable is used) to set the color for those elements? I wonder if the names of those variables were changed.

[CaseySchmidt]

@pbaity Here are my current variables:

--message-box-user-typing-color: var(--color-gray-lightest); --message-box-user-typing-user-color: var(--color-gray-lightest);

So I have never used the developer tools before but I think I fouind the issue. They did rename the variables. When I add the following in to the file the colors work:

--message-box-user-activity-user-color: var(--color-red-lightest);
--message-box-user-activity-color: var(--color-red-light);

The text doesn't come out as red as I expected, but I suspect a global variable is taking over the colors. But adding those variables in to the CSS seems to have enabled the ability for the colors to actually be set and READABLE!

[AlexVonB]

Hey! I can confirm the change for v4.1.2, the used variables are, by default,

--message-box-user-activity-color: var(--color-gray);
--message-box-user-activity-text-size: 0.75rem;
--message-box-user-activity-user-color: var(--color-dark);

When manually changing typing to activity in the dev tools, it works again.

Best! Alex