Unread message indicator of Threads is invisible

[ankar84]

Describe the bug Unread message indicator of Threads is invisible in Dark mode

To Reproduce Steps to reproduce the behavior:

1. Make a Thread
2. Get unread message in thread
3. There is no blue dot (unread message indicator) in dark mode
4. In normal mode all fine

Expected behavior Blue dot should be visible

Screenshots Normal mode

Dark mode

In main windows all fine - blue dot visible

Desktop (please complete the following information):

• OS: Windows 10
• Browser Desktop RC version
• Version 2.17.7

Additional context Server 3.6.3

[pbaity]

I thought I had solved this issue by adding this rule:

body.dark-mode div.rcx-box.rcx-box--full[aria-label="Unread"] { 
    background-color: #1d74f5 !important;
}

But of course the aria-label is different in different languages, so this only works when Rocket.Chat is set to English. Reopening this issue so we can find a better solution.

[pbaity]

@ankar84 I think this rule fixes it:

button.rcx-box.rcx-box--full.rcx-contextual-message__follow.rcx-button--small-square.rcx-button--square.rcx-button--small.rcx-button--ghost.rcx-button + div.rcx-box--full {
    background-color: #1d74f5 !important;
}

This selects the unread message indicator by first finding the "Following" button beside of it. Obviously I'm going to see if I can tone that first selector down a bit though.

[pbaity]

@ankar84 It looks like this also works:

body.dark-mode button.rcx-contextual-message__follow + div.rcx-box--full {
    background-color: #1d74f5 !important;
}

Since there's only one button element in all of Rocket.Chat that uses the rcx-contextual-message__follow class (as far as I can tell) and it only has one div sibling with the rcx-box--full class. I'm testing this out before opening a PR, if you also want to test and confirm it works without unexpected results.

[pbaity]

@ankar84 See #78. If there are no objections I'll merge it soon

[ankar84]

@ankar84 See #78. If there are no objections I'll merge it soon

78 works like a charm

Good job, @pbaity