No hover or active styles on the sidebar channel list

[pbaity]

Describe the bug Previously (and still in light mode) when you hover or select a channel or direct message, it is highlighted in some way.

To Reproduce Steps to reproduce the behavior:

1. Hover over any of the channels or direct messages in the sidebar
2. See that there is no hover or active style (without dark mode, there is)

Expected behavior There should be hover and active highlighting as there is in light mode.

Screenshots

With highlighting in light mode (from top to bottom, no hover, active, and hovering):

Same setup but with dark mode:

Desktop (please complete the following information):

• OS: MacOS Catalina 10.15.7
• Browser: using Rocket.Chat desktop app
• Version: server 3.9.3

[bkraul]

Make sure you are using the latest version of the script and CSS. This works with current master:

[iamjameswalters]

@bkraul on what version? I can confirm @pbaity 's bug, but as he said, we're on 3.9.3.

[diggamies]

@bkraul on what version? I can confirm @pbaity 's bug, but as he said, we're on 3.9.3.

Same here, still got the issue, even with the newest version of master.

[bkraul]

Running 3.11-develop here. Let me spin up 3.9.3 and will get back with you.

[bkraul]

So I can confirm this behavior on 3.9.3 all the way latest develop (3.11). My suspicion would be that CSS changes introduced after my initial 3.8 PR started touching the sidebar. Initially I had opted for not touching the sidebar at all because there were a lot of style conflicts. This no longer seems to be the case.

After doing a compare of what I have that works and the current master, my suspicion is that the changes introduced for 3.9.1 (Line 741 and forwards) are breaking the sidebar. I do not have that block on my currently deployed code and mine works fine).

This is the block that my code does not have:

/***** Changes for 3.9.1 *****/

aside.sidebar--main .rcx-sidebar-topbar .rcx-button--small-square {
    width: 1.35rem;
}

body.dark-mode .main-content .rcx-box {
    color: var(--info-font-color) !important;
    background-color: var(--color-darkest) !important;
}

body.dark-mode div[class*="user-card"] {
    color: var(--info-font-color) !important;
    background-color: var(--color-dark) !important;
}

body.dark-mode .rcx-box {
    color: var(--info-font-color) !important;
    background-color: var(--color-dark-medium);
}

body.dark-mode .rcx-status-bullet--online {
  background: #2de0a5 !important;
}

body.dark-mode .rcx-box--full {
    background-color: var(--color-dark);
}

body.dark-mode .rc-box.rcx-box--full.rcx-sidebar-item__title,
body.dark-mode .rc-box.rcx-box--full.rcx-sidebar-item__subtitle,
body.dark-mode .rc-box.rcx-box--full.rcx-sidebar-item__time {
    color: var(--sidebar-item-text-color);
}

body.dark-mode .rcx-sidebar-topbar button.rcx-button-group__item .rcx-icon,
body.dark-mode .rcx-box.rcx-box--full.rcx-icon--name-hashtag,
body.dark-mode .rcx-box.rcx-box--full.rcx-sidebar-title {
    color: var(--sidebar-item-text-color) !important;
}

body.dark-mode .rcx-sidebar-item--highlighted {
    color: #fff !important;
}

body.dark-mode .rcx-sidebar-item__container span.rcx-box.rcx-box--full.rcx-badge {
    background-color: var(--rc-color-alert);
}

[bkraul]

I just removed the mentioned block from my test instance, and the hover behaviors are working:

[pbaity]

This has since been resolved