Update chatbox head with new markup

css/converse.css

@@ -5128,8 +5128,7 @@ body.reset {
     background-color: #3AA569; }
   #converse-embedded-chat .chat-head .avatar,
   #conversejs .chat-head .avatar {
-    margin-right: 0.5em;
-    float: left; }
+    margin-right: 0.5em; }
   #converse-embedded-chat .chat-head .chatbox-buttons,
   #conversejs .chat-head .chatbox-buttons {
     flex-direction: row-reverse;

css/inverse.css

@@ -5184,8 +5184,7 @@ body {
     background-color: #3AA569; }
   #converse-embedded-chat .chat-head .avatar,
   #conversejs .chat-head .avatar {
-    margin-right: 0.5em;
-    float: left; }
+    margin-right: 0.5em; }
   #converse-embedded-chat .chat-head .chatbox-buttons,
   #conversejs .chat-head .chatbox-buttons {
     flex-direction: row-reverse;
@@ -5622,7 +5621,6 @@ body {
 #conversejs.fullscreen .flyout {
   border: 1.2em solid #3AA569;
   border-top: 0.8em solid #3AA569;
-  border-radius: 0;
   bottom: 0; }
 #conversejs.fullscreen .chat-head {
   font-size: 20px;
@@ -6058,6 +6056,8 @@ body {
   margin: 0; }
   #conversejs.fullscreen #controlbox .controlbox-pane {
     border-radius: 0; }
+  #conversejs.fullscreen #controlbox .flyout {
+    border-radius: 0; }
   #conversejs.fullscreen #controlbox #login-dialog {
     border-radius: 0; }
     #conversejs.fullscreen #controlbox #login-dialog .converse-form {

sass/_chatbox.scss

@@ -33,7 +33,6 @@
 
         .avatar {
             margin-right: 0.5em;
-            float: left;
         }
 
         .chatbox-buttons {

sass/inverse/_chatbox.scss

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

sass/inverse/_controlbox.scss

@@ -6,6 +6,10 @@
             border-radius: 0;
         }
 
+        .flyout {
+            border-radius: 0;
+        }
+
         #login-dialog {
             border-radius: 0;
             .converse-form {

src/converse-fullscreen.js

@@ -61,8 +61,8 @@
 
         initialize () {
             this._converse.api.settings.update({
-                chatview_avatar_height: 44,
-                chatview_avatar_width: 44,
+                chatview_avatar_height: 50,
+                chatview_avatar_width: 50,
                 hide_open_bookmarks: true,
                 show_controlbox_by_default: true,
                 sticky_controlbox: true

src/templates/chatbox_head.html

@@ -1,19 +1,28 @@
-<div class="chat-head chat-head-chatbox">
-    <a class="chatbox-btn close-chatbox-button icon-close" title="{{{o.info_close}}}"></a>
-    {[ if (o.show_avatar) { ]}
-        <img alt="User Avatar"
-            class="avatar"
-            height="{{{o.avatar_height}}}px" width="{{{o.avatar_width}}}px"
-            src="data:{{{o.image_type}}};base64,{{{o.image}}}"/>
-    {[ } ]}
-    <div class="chat-title">
-        {[ if (o.url) { ]}
-            <a href="{{{o.url}}}" target="_blank" rel="noopener" class="user">
-        {[ } ]}
-                {{{ o.fullname }}}
-        {[ if (o.url) { ]}
-            </a>
-        {[ } ]}
-        <p class="user-custom-message">{{{ o.status }}}</p>
+<div class="chat-head chat-head-chatbox row no-gutters">
+    <div class="col-9">
+        <div class="row no-gutters">
+            {[ if (o.show_avatar) { ]}
+            <div class="col-auto">
+                <img alt="User Avatar"
+                    class="avatar"
+                    height="{{{o.avatar_height}}}px" width="{{{o.avatar_width}}}px"
+                    src="data:{{{o.image_type}}};base64,{{{o.image}}}"/>
+            </div>
+            {[ } ]}
+            <div class="col chat-title" title="{{{o.jid}}}">
+                {[ if (o.url) { ]}
+                    <a href="{{{o.url}}}" target="_blank" rel="noopener" class="user">
+                {[ } ]}
+                        {{{ o.fullname }}}
+                {[ if (o.url) { ]}
+                    </a>
+                {[ } ]}
+                <p class="user-custom-message">{{{ o.status }}}</p>
+            </div>
+        </div>
+    </div>
+    <div class="col-3">
+        <a class="chatbox-btn close-chatbox-button fa fa-close" title={{{o.info_close}}}></a>
+        <a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
     </div>
 </div>