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 {

mockup/chatbox.html

@@ -25,7 +25,12 @@
                     <div class="chat-head chat-head-chatbox row no-gutters">
                         <div class="col-9">
                             <div class="row no-gutters">
-                                <div class="col-auto"><canvas height="44" width="44" class="avatar"></canvas></div>
+                                <div class="col-auto">
+                                    <img alt="User Avatar"
+                                        class="avatar"
+                                        height="50px" width="50px"
+                                        src="data:image/png;base64,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"/>
+                                </div>
                                 <div class="col chat-title" title="j@chat.example.org">JC Brand
                                     <p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
                                 </div>

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

-<div class="chat-head chat-head-chatbox">
-    <a class="chatbox-btn close-chatbox-button icon-close" title="{{{o.info_close}}}"></a>
+<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="chat-title">
+            <div class="col chat-title" title="{{{o.jid}}}">
                 {[ if (o.url) { ]}
                     <a href="{{{o.url}}}" target="_blank" rel="noopener" class="user">
                 {[ } ]}
@@ -16,4 +19,10 @@
                 {[ } ]}
                 <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>