Converse.js: Highlight selected and hovered conversations

[Nyco]

Screenshot:

Problems:

In this screenshot:

• I can’t tell which conversation is selected (that’s commTeam)
• I have a hard time telling which one I hover (that’s scam, no poor pun, sorry ;-) )

Proposed:

• Maybe keep the font color change when hovered
• Add a background when hovered
• Add a background when selected
• Selected and hovered conversations must have a different background color
• These background colors should cover the whole width of this sidebar
• I can't think of other colors that lighter and darker greys (I haven't tried though, and I don't trust my taste)

Examples:

On Slack, the group "Général" is selected, and the one-to-one chat "David Lakomski" is hovered.

On RockerChat, the one-to-one chat "sylvain" is selected, and the group "infos" is hovered.

[Nyco]

OK, on both Slack and RocketChat:

• hovered: only the background changes to something darker than the default color
• selected: the background changes to something really different than the default color AND the font color goes white-ish (one of the themes of Slack is close to Converse and uses a blue background, could work for Converse as well)

[jcbrand]

Thanks @Nyco, I've updated the conversations to only show the buttons on hover and made the info button available on the conversation view (so that mobile users have access to it).

[jcbrand]

The currently open groupchat is now highlighted in the sidebar.

[jcbrand]

Open private chats are now also highlighted in the sidebar (all of this in fullscreen view_mode).

[jcbrand]

BTW @Nyco, thanks for the effort and the great recommendations. Looks much better now.