Update the login form for the overlayed view mode

css/converse.css

@@ -5495,6 +5495,9 @@ body.reset {
       text-align: center; }
     #conversejs #controlbox .brand-heading-container .brand-name {
       font-size: 120%; }
+  #conversejs #controlbox #converse-login-panel, #conversejs #controlbox #converse-register-panel {
+    padding-top: 0;
+    padding-bottom: 0; }
   #conversejs #controlbox #converse-login-panel {
     flex-direction: column; }
     #conversejs #controlbox #converse-login-panel .brand-heading {
@@ -5509,7 +5512,7 @@ body.reset {
   #conversejs #controlbox #converse-register legend, #conversejs #controlbox #converse-login legend {
     width: 100%;
     text-align: center;
-    margin: 0 auto 1em auto; }
+    margin: 0 auto 0.5em auto; }
   #conversejs #controlbox #converse-register label, #conversejs #controlbox #converse-login label {
     margin-top: 2em; }
   #conversejs #controlbox #converse-register fieldset.buttons, #conversejs #controlbox #converse-login fieldset.buttons {
@@ -5699,17 +5702,59 @@ body.reset {
   #conversejs.sidebar-open #controlbox .controlbox-pane {
     display: block; } }
 #conversejs:not(.fullscreen) #controlbox {
-  order: -1; }
+  order: -1;
-  #conversejs:not(.fullscreen) #controlbox #converse-register, #conversejs:not(.fullscreen) #controlbox #converse-login {
+  position: relative;
+  width: 100%;
+  min-height: 1px;
+  padding-right: 15px;
+  padding-left: 15px;
   flex: 0 0 100%;
   max-width: 100%; }
+  @media (min-width: 576px) {
+    #conversejs:not(.fullscreen) #controlbox {
+      flex: 0 0 33.3333333333%;
+      max-width: 33.3333333333%; } }
+  @media (min-width: 768px) {
+    #conversejs:not(.fullscreen) #controlbox {
+      flex: 0 0 25%;
+      max-width: 25%; } }
+  @media (min-width: 992px) {
+    #conversejs:not(.fullscreen) #controlbox {
+      flex: 0 0 16.6666666667%;
+      max-width: 16.6666666667%; } }
+  @media (min-width: 1200px) {
+    #conversejs:not(.fullscreen) #controlbox {
+      flex: 0 0 16.6666666667%;
+      max-width: 16.6666666667%; } }
+  #conversejs:not(.fullscreen) #controlbox .controlbox-head {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between; }
+    #conversejs:not(.fullscreen) #controlbox .controlbox-head .brand-heading {
+      position: relative;
+      width: 100%;
+      min-height: 1px;
+      padding-right: 15px;
+      padding-left: 15px;
+      flex: 0 0 66.6666666667%;
+      max-width: 66.6666666667%;
+      order: 1;
+      color: #777;
+      font-size: 2em; }
+    #conversejs:not(.fullscreen) #controlbox .controlbox-head .close-chatbox-button {
+      order: 2; }
+    #conversejs:not(.fullscreen) #controlbox .controlbox-head .chatbox-btn {
+      color: #578EA9;
+      margin: 0; }
+  #conversejs:not(.fullscreen) #controlbox #converse-register, #conversejs:not(.fullscreen) #controlbox #converse-login {
+    flex: 0 0 100%;
+    max-width: 100%;
+    padding-bottom: 0; }
   #conversejs:not(.fullscreen) #controlbox #converse-register .button-cancel {
     font-size: 90%; }
   #conversejs:not(.fullscreen) #controlbox .controlbox-panes {
     border-radius: 4px; }
-  #conversejs:not(.fullscreen) #controlbox .brand-heading-container .brand-heading {
-    font-size: 2em;
-    margin: 1em 0; }
 
 #conversejs #controlbox .available-chatroom.unread-msgs .msgs-indicator {
   border-radius: 10%;

css/inverse.css

@@ -5562,6 +5562,9 @@ body {
       text-align: center; }
     #conversejs #controlbox .brand-heading-container .brand-name {
       font-size: 120%; }
+  #conversejs #controlbox #converse-login-panel, #conversejs #controlbox #converse-register-panel {
+    padding-top: 0;
+    padding-bottom: 0; }
   #conversejs #controlbox #converse-login-panel {
     flex-direction: column; }
     #conversejs #controlbox #converse-login-panel .brand-heading {
@@ -5576,7 +5579,7 @@ body {
   #conversejs #controlbox #converse-register legend, #conversejs #controlbox #converse-login legend {
     width: 100%;
     text-align: center;
-    margin: 0 auto 1em auto; }
+    margin: 0 auto 0.5em auto; }
   #conversejs #controlbox #converse-register label, #conversejs #controlbox #converse-login label {
     margin-top: 2em; }
   #conversejs #controlbox #converse-register fieldset.buttons, #conversejs #controlbox #converse-login fieldset.buttons {

css/theme.css

@@ -260,30 +260,6 @@ a:focus {
     padding: 100px 0;
   }
 }
-.btn {
-  text-transform: uppercase;
-  font-family: FontAwesome;
-  font-weight: 400;
-  -webkit-transition: all 0.3s ease-in-out;
-  -moz-transition: all 0.3s ease-in-out;
-  transition: all 0.3s ease-in-out;
-}
-.btn-default {
-  border: 1px solid #82B397;
-  color: #82B397;
-  background-color: transparent;
-}
-.btn-default:hover,
-.btn-default:focus {
-  border: 1px solid #82B397;
-  outline: none;
-  color: #211018;
-  background-color: #82B397;
-}
-.btn-huge {
-  padding: 25px;
-  font-size: 26px;
-}
 .banner-social-buttons {
     padding-top: 3em;
 }

mockup/overlayed-login.html

@@ -16,13 +16,14 @@
 
     <div id="conversejs">
         <div class="row no-gutters">
-            <div id="controlbox" class="chatbox col col-lg-2 col-md-3 col-sm-4 col-sx-12">
+            <div id="controlbox" class="chatbox">
                 <div class="flyout box-flyout">
+                    <div class="chat-head controlbox-head">
+                        <a class="chatbox-btn close-chatbox-button fa fa-close"></a>
+                        <div class="brand-heading"><i class="icon-conversejs"></i><span class="brand-name">converse</span></div>
+                    </div>
                     <div class="controlbox-panes">
                         <div id="login-dialog" class="controlbox-pane row">
-                            <div class="brand-heading-container">
-                                <h1 class="brand-heading"><i class="icon-conversejs"></i> converse</h1>
-                            </div>
                             <form id="converse-login" class="pure-form converse-form">
                                 <div class="form-group">
                                     <label for="jid">XMPP Username:</label>

sass/_controlbox.scss

@@ -159,6 +159,11 @@
             }
         }
 
+        #converse-login-panel, #converse-register-panel {
+            padding-top: 0;
+            padding-bottom: 0;
+        }
+
         #converse-login-panel {
             flex-direction: column;
 
@@ -183,7 +188,7 @@
             legend {
                 width: 100%;
                 text-align: center;
-                margin: 0 auto 1em auto;
+                margin: 0 auto 0.5em auto;
             }
             label {
                 margin-top: 2em;

sass/converse/_controlbox.scss

@@ -1,9 +1,50 @@
 #conversejs:not(.fullscreen) {
     #controlbox {
         order: -1;
+        @include make-col-ready();
+        @include media-breakpoint-up(xs) {
+            @include make-col(12);
+        }
+        @include media-breakpoint-up(sm) {
+            @include make-col(4);
+        }
+        @include media-breakpoint-up(md) {
+            @include make-col(3);
+        }
+        @include media-breakpoint-up(lg) {
+            @include make-col(2);
+        }
+        @include media-breakpoint-up(xl) {
+            @include make-col(2);
+        }
+
+        .controlbox-head {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            justify-content: space-between;
+
+            .brand-heading {
+                @include make-col-ready();
+                @include make-col(8);
+
+                order: 1;
+                color: $text-color;
+                font-size: 2em;
+            }
+
+            .close-chatbox-button {
+                order: 2;
+            }
+            .chatbox-btn {
+                color: $controlbox-head-color;
+                margin: 0;
+            }
+        }
 
         #converse-register, #converse-login {
             @include make-col(12);
+            padding-bottom: 0;
         }
 
         #converse-register {
@@ -15,12 +56,5 @@
         .controlbox-panes {
             border-radius: $chatbox-border-radius;
         }
-
-        .brand-heading-container {
-            .brand-heading {
-                font-size: 2em;
-                margin: 1em 0;
-            }
-        }
     }
 }

src/converse-controlbox.js

@@ -251,7 +251,6 @@
                 },
 
                 render () {
-                    this.setClasses();
                     if (this.model.get('connected')) {
                         if (_.isUndefined(this.model.get('closed'))) {
                             this.model.set('closed', !_converse.show_controlbox_by_default);
@@ -278,17 +277,6 @@
                     return this;
                 },
 
-                setClasses () {
-                    if (_converse.view_mode !== 'fullscreen') {
-                        this.el.classList.add('col');
-                        this.el.classList.add('col-lg-2');
-                        this.el.classList.add('col-md-3');
-                        this.el.classList.add('col-sm-4');
-                        this.el.classList.add('col-sx-12');
-                        this.el.classList.add('w-100');
-                    }
-                },
-
                 onConnected () {
                     if (this.model.get('connected')) {
                         this.render();

src/templates/brand_heading.html

@@ -1,3 +0,0 @@
-<div class="brand-heading-container">
-    <h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
-<div>

src/templates/controlbox.html

@@ -1,7 +1,7 @@
 <div class="flyout box-flyout">
     <div class="chat-head controlbox-head">
         {[ if (!o.sticky_controlbox) { ]}
-            <a class="chatbox-btn close-chatbox-button icon-close"></a>
+            <a class="chatbox-btn close-chatbox-button fa fa-close"></a>
         {[ } ]}
     </div>
     <div class="controlbox-panes"></div>

src/templates/converse_brand_heading.html

@@ -1,6 +1 @@
-<span class="brand-heading-container">
+<div class="brand-heading"><i class="icon-conversejs"></i><span class="brand-name">converse</span></div>
-    <div class="brand-heading">
-        <i class="icon-conversejs"></i>
-        <span class="brand-name">converse</span>
-    </div>
-</span>

src/templates/login_panel.html

@@ -1,6 +1,5 @@
 <div id="converse-login-panel" class="controlbox-pane fade-in row">
     <form id="converse-login" class="converse-form" method="post">
-        <legend>{{{o.__("Login")}}}</legend>
         <div class="conn-feedback fade-in {[ if (!o.conn_feedback_subject) { ]} hidden {[ } ]} {{{o.conn_feedback_class}}}">
             <p class="feedback-subject">{{{ o.conn_feedback_subject }}}</p>
             <p class="feedback-message {[ if (!o.conn_feedback_message) { ]} hidden {[ } ]}">{{{o.conn_feedback_message}}}</p>