Converse.js: Bring color codes of users' status in line with other clients

[alexara]

Hi! I got a little confused by the current color codings of the users' status. I was really concerned that my contacts are all offline, until I looked very very closely to see that there is a tiny difference between "away" and "offline":

• Offline: Gray with a X
• Away: Gray with a O
• DND: Red with -
• Online: Green

Do you mind to bring it in line with other chat clients e.g. Conversations, i.e.

• Offline: Gray
• Away: Orange
• DND: Red with -
• Online: Green

Regards

[laurenmayers]

Happy to work on this if I can!

[jcbrand]

Go for it!

[laurenmayers]

Hey @jcbrand, where's the best place to contact you/the right people for help?
I'm having trouble locating the file/code that sets the background color of the users' status.

[jcbrand]

@laurenmayers Asking here is fine, alternatively you can ask in the our chatroom. You'll need an XMPP account for that, you can register one at conversejs.org. Pretty soon it'll also be possible to log in via Github.

For this ticket, we need to modify the CSS to make sure that the away status renders orange.
However, we use Sass to generate our CSS, so the source file where we need to make a change is in the sass folder.

I don't know the relevant CSS class that determines the style, so I used the browser's DOM inspector to look at the DOM element in question. I saw that it has the class .fa-dot-circle.

I then used grep to search for files containing fa-dot-circle in the sass directory and I found the file file _controlbox.scss.

By looking at the place where the string fa-dot-circle appears, I immediately saw the bug (in part because I have context, due to having worked on this before).

In the Sass file, the class is fa-dot-circle-o, not fa-dot-circle. Recently some FontAwesome classes were renamed, but the Sass file didn't update accordingly. The away status was actually shown in orange originally.

So by renaming .fa-dot-circle-o to .fa-dot-circle in that file, the bug is fixed. Now it's just a matter of running make watch to regenerate the CSS file.

[laurenmayers]

Thanks for the guidance @jcbrand. I noticed the difference in the class name too, which was part of my confusion! I just submitted the pull request, thanks for your help.