Update chatbox headers and buttons

css/converse.css

@@ -5119,6 +5119,19 @@ body.reset {
     #converse-embedded-chat .flyout,
     #conversejs .flyout {
       bottom: 0; } }
+#converse-embedded-chat .chatbox-btn,
+#conversejs .chatbox-btn {
+  border-radius: 25%;
+  border: none;
+  cursor: pointer;
+  font-size: 12px;
+  margin: 0 0.2em;
+  padding: 0.3em;
+  text-decoration: none; }
+  #converse-embedded-chat .chatbox-btn:active,
+  #conversejs .chatbox-btn:active {
+    position: relative;
+    top: 1px; }
 #converse-embedded-chat .chat-head,
 #conversejs .chat-head {
   flex-wrap: nowrap;
@@ -5136,8 +5149,7 @@ body.reset {
     margin-right: 0.5em; }
   #converse-embedded-chat .chat-head .chatbox-buttons,
   #conversejs .chat-head .chatbox-buttons {
-    flex-direction: row-reverse;
-    float: right; }
+    flex-direction: row-reverse; }
   #converse-embedded-chat .chat-head .user-custom-message,
   #conversejs .chat-head .user-custom-message {
     color: white;
@@ -5148,26 +5160,33 @@ body.reset {
     white-space: nowrap;
     margin: 0;
     padding-top: 0.2em; }
-#converse-embedded-chat .chatbox-btn,
-#conversejs .chatbox-btn {
-  border-radius: 25%;
-  border: none;
-  color: white;
-  cursor: pointer;
-  display: inline-block;
-  float: right;
-  font-size: 12px;
-  margin: 0 0.2em;
-  padding: 0.3em;
-  text-decoration: none; }
-  #converse-embedded-chat .chatbox-btn:active,
-  #conversejs .chatbox-btn:active {
-    position: relative;
-    top: 1px; }
-  #converse-embedded-chat .chatbox-btn.button-on,
-  #conversejs .chatbox-btn.button-on {
-    background-color: white;
-    color: #3AA569; }
+  #converse-embedded-chat .chat-head a.chatbox-btn.fa, #converse-embedded-chat .chat-head a:visited.chatbox-btn.fa, #converse-embedded-chat .chat-head a:hover.chatbox-btn.fa, #converse-embedded-chat .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa,
+  #conversejs .chat-head a.chatbox-btn.fa,
+  #conversejs .chat-head a:visited.chatbox-btn.fa,
+  #conversejs .chat-head a:hover.chatbox-btn.fa,
+  #conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa {
+    color: white; }
+    #converse-embedded-chat .chat-head a.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head a:visited.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head a:hover.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa.button-on,
+    #conversejs .chat-head a.chatbox-btn.fa.button-on,
+    #conversejs .chat-head a:visited.chatbox-btn.fa.button-on,
+    #conversejs .chat-head a:hover.chatbox-btn.fa.button-on,
+    #conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa.button-on {
+      background-color: white;
+      color: #3AA569; }
+  #converse-embedded-chat .chat-head .chatbox-btn,
+  #conversejs .chat-head .chatbox-btn {
+    color: white; }
+    #converse-embedded-chat .chat-head .chatbox-btn.fa,
+    #conversejs .chat-head .chatbox-btn.fa {
+      color: white; }
+    #converse-embedded-chat .chat-head .chatbox-btn:active,
+    #conversejs .chat-head .chatbox-btn:active {
+      position: relative;
+      top: 1px; }
+    #converse-embedded-chat .chat-head .chatbox-btn.button-on,
+    #conversejs .chat-head .chatbox-btn.button-on {
+      background-color: white;
+      color: #3AA569; }
 #converse-embedded-chat .chatbox,
 #conversejs .chatbox {
   text-align: left;
@@ -5965,8 +5984,8 @@ body.reset {
   padding: 10px 8px 0 8px; }
   #conversejs .toggle-controlbox span {
     color: white; }
-#conversejs .xmpp-status .online, #conversejs .xmpp-status-menu .online {
-  color: #3AA569; }
+#conversejs .xmpp-status .online, #conversejs .xmpp-status .fa-circle, #conversejs .xmpp-status-menu .online, #conversejs .xmpp-status-menu .fa-circle {
+  color: #33925d; }
 #conversejs .xmpp-status .dnd, #conversejs .xmpp-status-menu .dnd {
   color: #E77051; }
 #conversejs .xmpp-status .away, #conversejs .xmpp-status-menu .away {
@@ -6150,6 +6169,19 @@ body.reset {
     white-space: nowrap;
     overflow-y: hidden;
     text-overflow: ellipsis; }
+  #converse-embedded-chat .chat-head-chatroom a.chatbox-btn.fa, #converse-embedded-chat .chat-head-chatroom a:visited.chatbox-btn.fa, #converse-embedded-chat .chat-head-chatroom a:hover.chatbox-btn.fa, #converse-embedded-chat .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa,
+  #conversejs .chat-head-chatroom a.chatbox-btn.fa,
+  #conversejs .chat-head-chatroom a:visited.chatbox-btn.fa,
+  #conversejs .chat-head-chatroom a:hover.chatbox-btn.fa,
+  #conversejs .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa {
+    color: white; }
+    #converse-embedded-chat .chat-head-chatroom a.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head-chatroom a:visited.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head-chatroom a:hover.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on,
+    #conversejs .chat-head-chatroom a.chatbox-btn.fa.button-on,
+    #conversejs .chat-head-chatroom a:visited.chatbox-btn.fa.button-on,
+    #conversejs .chat-head-chatroom a:hover.chatbox-btn.fa.button-on,
+    #conversejs .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on {
+      background-color: white;
+      color: #E77051; }
   #converse-embedded-chat .chat-head-chatroom .chatbox-btn.button-on,
   #conversejs .chat-head-chatroom .chatbox-btn.button-on {
     background-color: white;

css/inverse.css

@@ -5175,6 +5175,19 @@ body {
     #converse-embedded-chat .flyout,
     #conversejs .flyout {
       bottom: 0; } }
+#converse-embedded-chat .chatbox-btn,
+#conversejs .chatbox-btn {
+  border-radius: 25%;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  margin: 0 0.2em;
+  padding: 0.3em;
+  text-decoration: none; }
+  #converse-embedded-chat .chatbox-btn:active,
+  #conversejs .chatbox-btn:active {
+    position: relative;
+    top: 1px; }
 #converse-embedded-chat .chat-head,
 #conversejs .chat-head {
   flex-wrap: nowrap;
@@ -5192,8 +5205,7 @@ body {
     margin-right: 0.5em; }
   #converse-embedded-chat .chat-head .chatbox-buttons,
   #conversejs .chat-head .chatbox-buttons {
-    flex-direction: row-reverse;
-    float: right; }
+    flex-direction: row-reverse; }
   #converse-embedded-chat .chat-head .user-custom-message,
   #conversejs .chat-head .user-custom-message {
     color: white;
@@ -5204,26 +5216,33 @@ body {
     white-space: nowrap;
     margin: 0;
     padding-top: 0.2em; }
-#converse-embedded-chat .chatbox-btn,
-#conversejs .chatbox-btn {
-  border-radius: 25%;
-  border: none;
-  color: white;
-  cursor: pointer;
-  display: inline-block;
-  float: right;
-  font-size: 16px;
-  margin: 0 0.2em;
-  padding: 0.3em;
-  text-decoration: none; }
-  #converse-embedded-chat .chatbox-btn:active,
-  #conversejs .chatbox-btn:active {
-    position: relative;
-    top: 1px; }
-  #converse-embedded-chat .chatbox-btn.button-on,
-  #conversejs .chatbox-btn.button-on {
-    background-color: white;
-    color: #3AA569; }
+  #converse-embedded-chat .chat-head a.chatbox-btn.fa, #converse-embedded-chat .chat-head a:visited.chatbox-btn.fa, #converse-embedded-chat .chat-head a:hover.chatbox-btn.fa, #converse-embedded-chat .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa,
+  #conversejs .chat-head a.chatbox-btn.fa,
+  #conversejs .chat-head a:visited.chatbox-btn.fa,
+  #conversejs .chat-head a:hover.chatbox-btn.fa,
+  #conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa {
+    color: white; }
+    #converse-embedded-chat .chat-head a.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head a:visited.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head a:hover.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa.button-on,
+    #conversejs .chat-head a.chatbox-btn.fa.button-on,
+    #conversejs .chat-head a:visited.chatbox-btn.fa.button-on,
+    #conversejs .chat-head a:hover.chatbox-btn.fa.button-on,
+    #conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa.button-on {
+      background-color: white;
+      color: #3AA569; }
+  #converse-embedded-chat .chat-head .chatbox-btn,
+  #conversejs .chat-head .chatbox-btn {
+    color: white; }
+    #converse-embedded-chat .chat-head .chatbox-btn.fa,
+    #conversejs .chat-head .chatbox-btn.fa {
+      color: white; }
+    #converse-embedded-chat .chat-head .chatbox-btn:active,
+    #conversejs .chat-head .chatbox-btn:active {
+      position: relative;
+      top: 1px; }
+    #converse-embedded-chat .chat-head .chatbox-btn.button-on,
+    #conversejs .chat-head .chatbox-btn.button-on {
+      background-color: white;
+      color: #3AA569; }
 #converse-embedded-chat .chatbox,
 #conversejs .chatbox {
   text-align: left;
@@ -5624,6 +5643,7 @@ body {
   font-size: 18px;
   margin: 0 0.3em; }
 #conversejs.fullscreen .flyout {
+  border-radius: 0;
   border: 1.2em solid #3AA569;
   border-top: 0.8em solid #3AA569;
   bottom: 0; }
@@ -6036,8 +6056,8 @@ body {
   padding: 10px 8px 0 8px; }
   #conversejs .toggle-controlbox span {
     color: white; }
-#conversejs .xmpp-status .online, #conversejs .xmpp-status-menu .online {
-  color: #3AA569; }
+#conversejs .xmpp-status .online, #conversejs .xmpp-status .fa-circle, #conversejs .xmpp-status-menu .online, #conversejs .xmpp-status-menu .fa-circle {
+  color: #33925d; }
 #conversejs .xmpp-status .dnd, #conversejs .xmpp-status-menu .dnd {
   color: #E77051; }
 #conversejs .xmpp-status .away, #conversejs .xmpp-status-menu .away {
@@ -6283,6 +6303,19 @@ body {
     white-space: nowrap;
     overflow-y: hidden;
     text-overflow: ellipsis; }
+  #converse-embedded-chat .chat-head-chatroom a.chatbox-btn.fa, #converse-embedded-chat .chat-head-chatroom a:visited.chatbox-btn.fa, #converse-embedded-chat .chat-head-chatroom a:hover.chatbox-btn.fa, #converse-embedded-chat .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa,
+  #conversejs .chat-head-chatroom a.chatbox-btn.fa,
+  #conversejs .chat-head-chatroom a:visited.chatbox-btn.fa,
+  #conversejs .chat-head-chatroom a:hover.chatbox-btn.fa,
+  #conversejs .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa {
+    color: white; }
+    #converse-embedded-chat .chat-head-chatroom a.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head-chatroom a:visited.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head-chatroom a:hover.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on,
+    #conversejs .chat-head-chatroom a.chatbox-btn.fa.button-on,
+    #conversejs .chat-head-chatroom a:visited.chatbox-btn.fa.button-on,
+    #conversejs .chat-head-chatroom a:hover.chatbox-btn.fa.button-on,
+    #conversejs .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on {
+      background-color: white;
+      color: #E77051; }
   #converse-embedded-chat .chat-head-chatroom .chatbox-btn.button-on,
   #conversejs .chat-head-chatroom .chatbox-btn.button-on {
     background-color: white;
@@ -6520,8 +6553,6 @@ body {
 #conversejs.fullscreen .chat-head-chatroom {
   height: 62px;
   font-size: 20px; }
-  #conversejs.fullscreen .chat-head-chatroom .close-chatbox-button:before {
-    content: "\e601"; }
   #conversejs.fullscreen .chat-head-chatroom .chat-title .chatroom-description {
     font-size: 65%; }
 #conversejs.fullscreen .chatroom .box-flyout {

mockup/user-panel.html

@@ -3,8 +3,9 @@
     <div class="d-flex">
         <canvas height="20" width="20" class="avatar align-self-center"></canvas>
         <span class="username w-100 align-self-center">Walter White</span>
-        <a class="chatbox-btn fa fa-vcard align-self-center" title="Your profile" data-toggle="modal" data-target="#userProfileModal"></a>
-        <a class="chatbox-btn fa fa-cog align-self-center" title="Change settings" data-toggle="modal" data-target="#settingsModal"></a>
+        <!-- <a class="chatbox-btn fa fa-vcard align-self-center" title="Your profile" data-toggle="modal" data-target="#userProfileModal"></a> -->
+        <!-- <a class="chatbox-btn fa fa-cog align-self-center" title="Change settings" data-toggle="modal" data-target="#settingsModal"></a> -->
+        <a class="chatbox-btn fa fa-sign-out align-self-center" title="Log out"></a>
     </div>
     <div class="d-flex xmpp-status">
         <span class="online w-100 align-self-center" data-value="online">

sass/_chatbox.scss

@@ -18,6 +18,22 @@
             bottom: 0;
         }
     }
+
+    .chatbox-btn {
+        border-radius: 25%;
+        border: none;
+        cursor: pointer;
+        font-size: $box-close-font-size;
+        margin: 0 0.2em;
+        padding: 0.3em;
+        text-decoration: none;
+
+        &:active {
+            position: relative;
+            top: 1px;
+        }
+    }
+
     .chat-head {
         flex-wrap: nowrap;
         color: #ffffff;
@@ -37,7 +53,6 @@
 
         .chatbox-buttons {
             flex-direction: row-reverse;
-            float: right;
         }
 
         .user-custom-message {
@@ -50,27 +65,35 @@
             margin: 0;
             padding-top: 0.2em;
         }
-    }
-    .chatbox-btn {
-        border-radius: 25%;
-        border: none;
-        color: white;
-        cursor: pointer;
-        display: inline-block;
-        float: right;
-        font-size: $box-close-font-size;
-        margin: 0 0.2em;
-        padding: 0.3em;
-        text-decoration: none;
-        &:active {
-            position: relative;
-            top: 1px;
+
+        a, a:visited, a:hover, a:not([href]):not([tabindex]) {
+            &.chatbox-btn {
+                &.fa {
+                    color: white;
+                    &.button-on {
+                        background-color: white;
+                        color: $chat-head-color;
+                    }
+                }
+            }
         }
-        &.button-on {
-            background-color: white;
-            color: $chat-head-color;
+
+        .chatbox-btn {
+            color: white;
+            &.fa  {
+                color: white;
+            }
+            &:active {
+                position: relative;
+                top: 1px;
+            }
+            &.button-on {
+                background-color: white;
+                color: $chat-head-color;
+            }
         }
     }
+
     .chatbox {
         text-align: left;
         margin: 0 $chat-gutter;

sass/_chatrooms.scss

@@ -20,6 +20,18 @@
             text-overflow: ellipsis;
         }
 
+        a, a:visited, a:hover, a:not([href]):not([tabindex]) {
+            &.chatbox-btn {
+                &.fa {
+                    color: $chat-head-text-color;
+                    &.button-on {
+                        background-color: $chat-head-text-color;
+                        color: $chatroom-head-color;
+                    }
+                }
+            }
+        }
+
         .chatbox-btn {
             &.button-on {
                 background-color: $chat-head-text-color;

sass/_controlbox.scss

@@ -491,8 +491,8 @@
     }
 
     .xmpp-status, .xmpp-status-menu {
-        .online {
-            color: $green;
+        .online, .fa-circle {
+            color: darken($green, 5%);
         }
         .dnd {
             color: $red

sass/inverse/_chatbox.scss

@@ -4,6 +4,7 @@
         margin: 0 0.3em;
     }
     .flyout {
+        border-radius: 0;
         border: $flyout-padding solid $chat-head-color;
         border-top: 0.8em solid $chat-head-color;
         bottom: 0;

sass/inverse/_chatrooms.scss

@@ -3,9 +3,6 @@
     .chat-head-chatroom {
         height: $chatroom-head-height;
         font-size: 20px;
-        .close-chatbox-button:before {
-            content: "\e601"; // Leave icon
-        }
         .chat-title {
             .chatroom-description {
                 font-size: 65%;

src/templates/chatroom.html

@@ -1,4 +1,4 @@
 <div class="flyout box-flyout">
-    <div class="chat-head chat-head-chatroom"></div>
+    <div class="chat-head chat-head-chatroom row no-gutters"></div>
     <div class="chat-body chatroom-body"></div>
 </div>

src/templates/chatroom_bookmark_toggle.html

@@ -1,4 +1,2 @@
-<a class="chatbox-btn toggle-bookmark icon-pushpin
-   {[ if (o.bookmarked) {]}
-    button-on
-   {[ } ]}" title="{{{o.info_toggle_bookmark}}}"></a>
+<a class="chatbox-btn toggle-bookmark fa fa-bookmark
+   {[ if (o.bookmarked) {]} button-on {[ } ]}" title="{{{o.info_toggle_bookmark}}}"></a>

src/templates/chatroom_head.html

@@ -1,12 +1,19 @@
-<a class="chatbox-btn close-chatbox-button icon-close" title="{{{o.info_close}}}"></a>
-{[ if (o.affiliation == 'owner') { ]}
-    <a class="chatbox-btn configure-chatroom-button icon-wrench" title="{{{o.info_configure}}} "></a>
-{[ } ]}
-<div class="chat-title" title="{{{o.jid}}}">
-    {[ if (o.name && o.name !== o.Strophe.getNodeFromJid(o.jid)) { ]}
-        <span class="chatroom-name">{{{ o.name }}}</span>
-    {[ } else { ]}
-        <span class="chatroom-name">{{{ o.Strophe.getNodeFromJid(o.jid) }}}</span>@{{{ o.Strophe.getDomainFromJid(o.jid) }}}
-    {[ } ]}
-    <p class="chatroom-description">{{{ o.description }}}<p/>
+<div class="col-sm-9 col-lg-9">
+    <div class="chat-title" title="{{{o.jid}}}">
+        {[ if (o.name && o.name !== o.Strophe.getNodeFromJid(o.jid)) { ]}
+            <span class="chatroom-name">{{{ o.name }}}</span>
+        {[ } else { ]}
+            <span class="chatroom-name">{{{ o.Strophe.getNodeFromJid(o.jid) }}}</span>@{{{ o.Strophe.getDomainFromJid(o.jid) }}}
+        {[ } ]}
+        <p class="chatroom-description">{{{ o.description }}}<p/>
+    </div>
 </div>
+<div class="col-sm-3 col-lg-3">
+    <div class="chatbox-buttons row no-gutters">
+        <a class="chatbox-btn close-chatbox-button fa fa-sign-out" title="{{{o.info_close}}}"></a>
+        {[ if (o.affiliation == 'owner') { ]}
+        <a class="chatbox-btn configure-chatroom-button fa fa-wrench" title="{{{o.info_configure}}} "></a>
+        {[ } ]}
+    </div>
+</div>
+