Fix styling issue for the unread badge

sass/_chatrooms.scss

 #conversejs.converse-embedded,
 #conversejs {
-    .badge-room-color {
-        background-color: var(--chatroom-head-bg-color);
+    .badge--muc {
+        background-color: var(--groupchats-header-color);
     }
 
     .add-chatroom {

sass/_roster.scss

@@ -134,7 +134,7 @@
                         background-color: var(--chat-head-color);
                         opacity: 1;
                         border-radius: 10%;
-                        padding: 0.2em;
+                        padding: 0.2em 0.4em;
                         font-size: var(--font-size-small);
                     }
 

src/templates/rooms_list.js

@@ -12,7 +12,7 @@ const i18n_open = __('Click to open this groupchat');
 const i18n_rooms = __('Open Groupchats');
 
 
-const unread_indicator = (o) => html`<span class="list-item-badge badge badge-room-color msgs-indicator">${ o.room.get('num_unread') }</span>`;
+const unread_indicator = (o) => html`<span class="list-item-badge badge badge--muc msgs-indicator">${ o.room.get('num_unread') }</span>`;
 
 
 const bookmark = (o) => {