CSS: set groupchat owner badge to groupchat color

css/converse.css

@@ -9354,6 +9354,7 @@ readers do not read off random characters that represent icons */
   --heading-display: block;
   --heading-color: white;
   --chatroom-head-color: #E77051;
+  --chatroom-head-color-dark: #D24E2B;
   --chatroom-head-color-lighten-25-percent: #f6ccc1;
   --chatroom-head-button-color: var(--chatroom-head-color);
   --chatroom-head-title-font-weight: normal;
@@ -9902,8 +9903,9 @@ body.reset {
     border-color: var(--primary-color-dark); }
   #conversejs .badge {
     text-shadow: none; }
+  #conversejs .badge {
+    color: white; }
   #conversejs .btn-primary, #conversejs .button-primary, #conversejs .badge-primary {
-    color: white;
     background-color: var(--primary-color);
     border-color: transparent; }
     #conversejs .btn-primary:hover, #conversejs .button-primary:hover, #conversejs .badge-primary:hover {
@@ -9912,8 +9914,16 @@ body.reset {
     #conversejs .btn-primary.active, #conversejs .button-primary.active, #conversejs .badge-primary.active {
       background-color: var(--primary-color-dark) !important;
       border-color: transparent !important; }
+  #conversejs .badge-groupchat {
+    background-color: var(--chatroom-head-color);
+    border-color: transparent; }
+    #conversejs .badge-groupchat:hover {
+      background-color: var(--chatroom-head-color-dark);
+      border-color: transparent; }
+    #conversejs .badge-groupchat.active {
+      background-color: var(--chatroom-head-color-dark) !important;
+      border-color: transparent !important; }
   #conversejs .btn-info, #conversejs .badge-info {
-    color: white;
     background-color: var(--primary-color);
     border-color: var(--primary-color); }
     #conversejs .btn-info:hover, #conversejs .badge-info:hover {

dist/converse.js

@@ -93577,7 +93577,7 @@ __e(o.hint_show) +
 __e(o.nick || o.jid) +
 '</span>\n            <span class="occupant-badges">\n                ';
  if (o.affiliation === "owner") { ;
-__p += '\n                    <span class="badge badge-primary">' +
+__p += '\n                    <span class="badge badge-groupchat">' +
 __e(o.label_owner) +
 '</span>\n                ';
  } ;

mockup/chatroom.html

@@ -28,8 +28,8 @@
                             <p class="chatroom-description">Two households, both alike in dignity, In fair Verona, where we lay our scene.</p>
                         </div>
                         <div class="chatbox-buttons row no-gutters">
-                            <a class="chatbox-btn fa fa-close"></a>
-                            <a class="chatbox-btn fa fa-wrench"></a>
+                            <a class="chatbox-btn fa fa-sign-out-alt" title="Leave this groupchat"></a>
+                            <a class="chatbox-btn fa fa-wrench" title="Configure this groupchat"></a>
                         </div>
                     </div>
 
@@ -292,7 +292,7 @@
                             <form class="sendXMPPMessage">
                                 <ul class="chat-toolbar no-text-select">
                                     <li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
-                                    <li class="toggle-occupants"><a class="fa fa-user-times" title="Hide the list of occupants"></a></li>
+                                    <li class="toggle-occupants"><a class="fa fa-angle-double-right" title="Hide the list of occupants"></a></li>
                                 </ul>
                                 <textarea class="chat-textarea form-control" placeholder="Message"></textarea>
                             </form>
@@ -314,7 +314,7 @@
                                         <div class="col occupant-nick-badge">
                                             <span class="occupant-nick">Juliet Capulet</span>
                                             <span class="occupant-badges">
-                                                <span class="badge badge-danger">Owner</span>
+                                                <span class="badge badge-groupchat">Owner</span>
                                                 <span class="badge badge-info">Moderator</span>
                                             </span>
                                         </div>
@@ -456,7 +456,7 @@
                                         <div class="col occupant-nick-badge">
                                             <span class="occupant-nick">Escalus, Prince of Verona and then some</span>
                                             <span class="occupant-badges">
-                                                <span class="badge badge-danger">Admin</span>
+                                                <span class="badge badge-info">Admin</span>
                                                 <span class="badge badge-info">Moderator</span>
                                             </span>
                                         </div>

sass/_chatrooms.scss

@@ -1,7 +1,6 @@
 #conversejs.converse-embedded,
 #conversejs {
 
-
     .badge-room-color {
         background-color: var(--chatroom-head-color);
     }

sass/_core.scss

@@ -470,8 +470,11 @@ body.reset {
         text-shadow: none;
     }
 
-    .btn-primary, .button-primary, .badge-primary {
+    .badge {
         color: white;
+    }
+
+    .btn-primary, .button-primary, .badge-primary {
         background-color: var(--primary-color);
         border-color: transparent;
         &:hover {
@@ -484,8 +487,20 @@ body.reset {
         }
     }
 
+    .badge-groupchat {
+        background-color: var(--chatroom-head-color);
+        border-color: transparent;
+        &:hover {
+            background-color: var(--chatroom-head-color-dark);
+            border-color: transparent;
+        }
+        &.active {
+            background-color: var(--chatroom-head-color-dark) !important;
+            border-color: transparent !important;
+        }
+    }
+
     .btn-info, .badge-info {
-        color: white;
         background-color: var(--primary-color);
         border-color: var(--primary-color);
         &:hover {

sass/_variables.scss

@@ -97,7 +97,8 @@ $font-path: "webfonts/icomoon/fonts/" !default;
     --heading-display: block;
     --heading-color: white;
 
-    --chatroom-head-color: #E77051; // $red
+    --chatroom-head-color: #E77051; // $orange
+    --chatroom-head-color-dark: #D24E2B; // $red
     --chatroom-head-color-lighten-25-percent: #f6ccc1; // lighten($red, 25%)
     --chatroom-head-button-color: var(--chatroom-head-color);
     --chatroom-head-title-font-weight: normal;
@@ -112,7 +113,7 @@ $font-path: "webfonts/icomoon/fonts/" !default;
     --chatroom-correcting-color: #fadfd7; // lighten($red, 30%)
 
     --headline-head-color: #E7A151; // $orange
-    --headline-message-color: #D2842B; // $dark-orange
+    --headline-message-color: #D2842B;
 
     --chatbox-button-size: 14px;
     --fullpage-chatbox-button-size: 16px;

src/templates/occupant.html

@@ -19,7 +19,7 @@
             <span class="occupant-nick">{{{o.nick || o.jid}}}</span>
             <span class="occupant-badges">
                 {[ if (o.affiliation === "owner") { ]}
-                    <span class="badge badge-primary">{{{o.label_owner}}}</span>
+                    <span class="badge badge-groupchat">{{{o.label_owner}}}</span>
                 {[ } ]}
                 {[ if (o.affiliation === "admin") { ]}
                     <span class="badge badge-info">{{{o.label_admin}}}</span>