From 1d55b131f661e61d92a4e970865ab0b86b53ff57 Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Mon, 10 Dec 2018 14:49:54 +0100
Subject: [PATCH] CSS: set groupchat owner badge to groupchat color

---
 css/converse.css            | 14 ++++++++++++--
 dist/converse.js            |  2 +-
 mockup/chatroom.html        | 10 +++++-----
 sass/_chatrooms.scss        |  1 -
 sass/_core.scss             | 19 +++++++++++++++++--
 sass/_variables.scss        |  5 +++--
 src/templates/occupant.html |  2 +-
 7 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/css/converse.css b/css/converse.css
index 743d2c678..2af7560d3 100644
--- a/css/converse.css
+++ b/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 {
diff --git a/dist/converse.js b/dist/converse.js
index 70049dade..bb724070f 100644
--- a/dist/converse.js
+++ b/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                ';
  } ;
diff --git a/mockup/chatroom.html b/mockup/chatroom.html
index 86ffb94c6..d2dcf98bc 100644
--- a/mockup/chatroom.html
+++ b/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>
diff --git a/sass/_chatrooms.scss b/sass/_chatrooms.scss
index 99b2fb98d..4ef3b8872 100644
--- a/sass/_chatrooms.scss
+++ b/sass/_chatrooms.scss
@@ -1,7 +1,6 @@
 #conversejs.converse-embedded,
 #conversejs {
 
-
     .badge-room-color {
         background-color: var(--chatroom-head-color);
     }
diff --git a/sass/_core.scss b/sass/_core.scss
index a912d969d..c04cf3891 100644
--- a/sass/_core.scss
+++ b/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 {
diff --git a/sass/_variables.scss b/sass/_variables.scss
index 4aaf81388..75baa6e92 100644
--- a/sass/_variables.scss
+++ b/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;
diff --git a/src/templates/occupant.html b/src/templates/occupant.html
index fe7e45b9f..4e9928987 100644
--- a/src/templates/occupant.html
+++ b/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>