Design of home page and settings broken in Rocket.Chat 5.1.0
paulchen opened this issue · comments
Rocket.Chat 5.1.0 introduced major changes to several pages, e.g. the start page or the settings page (Administration -> Settings). The layout of these pages now uses some kind of cards which currently do not look properly in Dark mode:
Start page:
Settings page:
I was able to fix this by adding this to the CSS:
div.rcx-grid div.rcx-box--full {
background-color: var(--color-dark) !important;
}
But I'm unsure whether this causes any side effects. Additionally, I don't know if this is the "right" way to fix this.
Using this setting, the start page looks like this:
And the settings page:
That doesn't look so good and it breaks light mode. Try this:
body.dark-mode div.rcx-box.rcx-box--full div.rcx-css-kmnwgn {
background-color: var(--color-darker) !important;
}
@chotaire Thanks for your input. I agree with you, that looks a lot better:
Looks good, but the 'open' button content should possibly be a little brighter to match:
https://user-images.githubusercontent.com/9246549/188285434-f2900c42-189c-4128-9b8a-df97ba474643.png
Probably OK for a pull request ASAP because the current version is unusable.
That is fixed on my screenshot too. I privately forked this project almost two years ago and improved some dozens of things. As an example, I incorporated a redesign more than a year ago that is similar to the one you guys are planning according to the official Rocket.Chat color template recommendation, along with many other design "fixes" so that this dark theme simply looks a little better. Because of the number of small modifications until now, I should rebase and merge again, then send a bunch of pull requests to give back to the community. I'll see if I can find some time for this soon, lack of time is the only issue.
For now I'll do a quick pull request for the homepage and take a look at the "Apps" page which is now also completely broken, but at least visible only to admins.
Thanks, and looking forward to your version coming out. :)
Thanks to @chotaire for fixing this in #192. And if you do have improvements you want to share, just open a PR! I'm also very short on time (but without complaint, since it's due to my wonderful family!) but I always make time to read every issue and comment, and do my best to merge any PR that helps the community.