<blank> is typing unreadable
CaseySchmidt opened this issue · comments
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)
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?
@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-box__typing to rc-message-box__activity which may be the source of the problem.
@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.
@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!
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