Room Information - Prune warning text not visible in Dark Mode

[RAurelian]

Hello,

When in Dark Mode, the Prune warning text on the Room Information page on any channel is not visible due to the color of the background and the text being similarly light.

Steps to reproduce the behavior:

1. Open a channel / room (you need to have pruning enabled)
2. Click on Room Information
3. Scroll down to the end of the page
4. Observe the prune warning text which is of a light color over a bright yellow background

Expected behavior There should be enough contrast between the text and the background so as for it to be visible. For example, either darken the background for that warning or darken the text.

Screenshots

Server version: 4.4.2 / Ubuntu Snaps

Desktop (please complete the following information):

• OS: WINDOWS 10
• Browser: Does not matter, but tested on Vivaldi v5.4.2567.57 and FireFox v97.0.2
• RC Desktop client (RocketChat Electron) v3.7.8

Mobile client: Not Applicable, the pruning warning does not appear there

[Austinsuyoyo]

Set background-color like below

body.dark-mode .rcx-callout--type-warning{
    background-color: #433d1d !important;
}

example:

[pbaity]

Sorry I haven't responded so far - I was able to take a quick peek at this issue. We can fix it by resetting the color variable it uses:

body.dark-mode {
    /* ... */

    --rcx-color-warning-200: var(--rc-color-alert);

    /* ... */
}

Here I used --rc-color-alert which makes it a nice red, but I'm open to a different color (light mode uses that hard-coded yellowish color; it seems that --rcx-color-warning-200 is not specified in light mode). However the text is still grey, and unforunately it's a little tricky to change that with the way we're having to override font colors with !important, which I hate using for this reason. If I have more time to look into it I will, or someone else can use what I've got here to get a PR started.

[ae5960e8-a6fc-491f-b252-898ecf59af95]

Waiting for this to be implemented, looking great. :)

[TBG-FR]

I'm working on some modifications, but I can't get that message you're showing in your screenshot, what do you need to do to enable it ?

I've managed to display another one (in room settings)

[pbaity]

@TBG-FR I think you have to turn this on in the settings under "Retention Policy," but I'm not 100% sure because I'm scared to turn it on and accidentally wipe out my message history 😅 but in the few places I've found those boxes, they've all had the same CSS classes (.rcx-callout--type-warning and .rcx-callout, though sometimes it's one a div directly and sometimes on a different parent element) so hopefully fixing one will fix them all.

[TBG-FR]

I always use a dummy RocketChat instance with Docker to try things like the dark theme ! But I already tried all "Retention Policy" options, non of them displayed that specific element 😞

Let's hope that !

[pbaity]

Fixed by #185. If anybody sees the issue reoccur just reopen this issue!