Styling changes now that we don't have tabs.

css/converse.css

@@ -17,6 +17,7 @@
   font-weight: normal;
   font-style: normal; }
 .icon-conversejs {
+  padding-right: 0.2em;
   font-family: 'Converse-js';
   speak: none;
   font-style: normal;
@@ -1927,6 +1928,10 @@
       #conversejs #controlbox .controlbox-head {
         border-top-left-radius: 0;
         border-top-right-radius: 0; } }
+  #conversejs #controlbox.logged-out .controlbox-head {
+    background-color: white; }
+    #conversejs #controlbox.logged-out .controlbox-head .chatbox-btn {
+      color: #578EA9; }
   #conversejs #controlbox form.search-xmpp-contact {
     margin: 0;
     padding-left: 5px;
@@ -1983,15 +1988,19 @@
       font-size: 85%; }
       #conversejs #controlbox #converse-register .instructions:hover {
         color: #777; }
-  #conversejs #controlbox .conn-feedback {
-    padding-top: 2em; }
-    #conversejs #controlbox .conn-feedback p {
-      color: #578EA9;
-      padding-bottom: 0.5em; }
-      #conversejs #controlbox .conn-feedback p.feedback-subject.error {
-        font-weight: bold; }
-      #conversejs #controlbox .conn-feedback p.error {
-        color: #A53214; }
+  #conversejs #controlbox .conn-feedback p {
+    color: #578EA9;
+    padding-bottom: 0.5em; }
+    #conversejs #controlbox .conn-feedback p.feedback-subject.error {
+      font-weight: bold; }
+    #conversejs #controlbox .conn-feedback p.error {
+      color: #A53214; }
+  #conversejs #controlbox #login-dialog .brand-heading {
+    font-size: 150%; }
+  #conversejs #controlbox #login-dialog .brand-name {
+    font-size: 120%; }
+  #conversejs #controlbox #login-dialog .register-account {
+    font-weight: bold; }
   #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
     margin-top: 2em; }
     #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {

css/inverse.css

@@ -17,6 +17,7 @@
   font-weight: normal;
   font-style: normal; }
 .icon-conversejs {
+  padding-right: 0.2em;
   font-family: 'Converse-js';
   speak: none;
   font-style: normal;
@@ -1995,6 +1996,10 @@ body {
       #conversejs #controlbox .controlbox-head {
         border-top-left-radius: 0;
         border-top-right-radius: 0; } }
+  #conversejs #controlbox.logged-out .controlbox-head {
+    background-color: white; }
+    #conversejs #controlbox.logged-out .controlbox-head .chatbox-btn {
+      color: #578EA9; }
   #conversejs #controlbox form.search-xmpp-contact {
     margin: 0;
     padding-left: 5px;
@@ -2051,15 +2056,19 @@ body {
       font-size: 85%; }
       #conversejs #controlbox #converse-register .instructions:hover {
         color: #777; }
-  #conversejs #controlbox .conn-feedback {
-    padding-top: 2em; }
-    #conversejs #controlbox .conn-feedback p {
-      color: #578EA9;
-      padding-bottom: 0.5em; }
-      #conversejs #controlbox .conn-feedback p.feedback-subject.error {
-        font-weight: bold; }
-      #conversejs #controlbox .conn-feedback p.error {
-        color: #A53214; }
+  #conversejs #controlbox .conn-feedback p {
+    color: #578EA9;
+    padding-bottom: 0.5em; }
+    #conversejs #controlbox .conn-feedback p.feedback-subject.error {
+      font-weight: bold; }
+    #conversejs #controlbox .conn-feedback p.error {
+      color: #A53214; }
+  #conversejs #controlbox #login-dialog .brand-heading {
+    font-size: 150%; }
+  #conversejs #controlbox #login-dialog .brand-name {
+    font-size: 120%; }
+  #conversejs #controlbox #login-dialog .register-account {
+    font-weight: bold; }
   #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
     margin-top: 2em; }
     #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
@@ -2353,6 +2362,8 @@ body {
   width: 200px;
   float: left;
   margin: 0; }
+  #conversejs #controlbox .conn-feedback {
+    padding-top: 2em; }
   #conversejs #controlbox #login-dialog .brand-heading {
     font-size: 600%;
     margin: 0.5em 0 0 0;
@@ -2360,13 +2371,11 @@ body {
     color: #387592; }
   #conversejs #controlbox #login-dialog .brand-subtitle {
     font-size: 90%; }
-  #conversejs #controlbox #login-dialog .register-account {
-    font-weight: bold; }
-  #conversejs #controlbox.fullscreen {
+  #conversejs #controlbox.logged-out {
     width: 100%; }
-    #conversejs #controlbox.fullscreen .box-flyout {
+    #conversejs #controlbox.logged-out .box-flyout {
       width: 100%; }
-      #conversejs #controlbox.fullscreen .box-flyout .controlbox-head {
+      #conversejs #controlbox.logged-out .box-flyout .controlbox-head {
         background-color: white; }
   #conversejs #controlbox .box-flyout {
     border: 0;

css/theme.css

@@ -20,9 +20,6 @@ h6 {
   font-weight: 700;
   letter-spacing: 1px;
 }
-h1 {
-  text-transform: uppercase;
-}
 p {
   margin: 0 0 25px;
   font-size: 18px;

dev.html

@@ -37,7 +37,7 @@
             <div class="container">
                 <div class="row">
                     <div class="col-md-8 col-md-offset-2">
-                        <h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
+                        <h1 class="brand-heading"><i class="icon-conversejs"></i>converse</h1>
                         <p class="intro-text">Developer page.</p>
                         <p class="intro-text">
                             Converse.js will only work on this page if you have 

index.html

@@ -67,7 +67,7 @@
 
     <section class="intro" class="container">
         <div class="row">
-            <h1 class="brand-heading"><i class="icon-conversejs"></i> Converse.js</h1>
+            <h1 class="brand-heading"><i class="icon-conversejs"></i> converse</h1>
             <div class="col-md-8 col-md-offset-2">
                 <p class="intro-text">A free and open-source XMPP chat client in your browser</p>
                 <p>Now also available in a fullscreen version.

sass/_controlbox.scss

@@ -27,6 +27,16 @@
             margin: 0;
             padding: 6px 6px 6px 0;
         }
+
+        &.logged-out {
+            .controlbox-head {
+                background-color: white;
+                .chatbox-btn {
+                    color: $controlbox-head-color;
+                }
+            }
+        }
+
         form.search-xmpp-contact {
             margin: 0;
             padding-left: 5px;
@@ -105,7 +115,6 @@
         }
 
         .conn-feedback {
-            padding-top: 2em;
             p {
                 color: $controlbox-head-color;
                 padding-bottom: 0.5em;
@@ -118,6 +127,18 @@
             }
         }
 
+        #login-dialog {
+            .brand-heading {
+                font-size: 150%;
+            }
+            .brand-name {
+                font-size: 120%;
+            }
+            .register-account {
+                font-weight: bold;
+            }
+        }
+
         #converse-register, #converse-login {
             margin-top: 2em;
             .login-anon {

sass/_fonts.scss

@@ -10,6 +10,7 @@
 }
 
 .icon-conversejs {
+    padding-right: 0.2em;
     font-family: 'Converse-js';
     speak: none;
     font-style: normal;

sass/inverse/_controlbox.scss

@@ -5,6 +5,10 @@
         float: left;
         margin: 0;
 
+        .conn-feedback {
+            padding-top: 2em;
+        }
+
         #login-dialog {
             .brand-heading {
                 font-size: 600%;
@@ -15,12 +19,9 @@
             .brand-subtitle {
                 font-size: 90%;
             }
-            .register-account {
-                font-weight: bold;
-            }
         }
 
-        &.fullscreen {
+        &.logged-out {
             width: 100%;
             .box-flyout {
                 width: 100%;

src/converse-controlbox.js

@@ -12,6 +12,7 @@
             "lodash.fp",
             "tpl!add_contact_dropdown",
             "tpl!add_contact_form",
+            "tpl!converse_brand_heading",
             "tpl!change_status_message",
             "tpl!chat_status",
             "tpl!choose_status",
@@ -31,6 +32,7 @@
             fp,
             tpl_add_contact_dropdown,
             tpl_add_contact_form,
+            tpl_brand_heading,
             tpl_change_status_message,
             tpl_chat_status,
             tpl_choose_status,
@@ -267,12 +269,21 @@
                     return this;
                 },
 
+                 createBrandHeadingElement () {
+                    const div = document.createElement('div');
+                    div.innerHTML = tpl_brand_heading();
+                    return div.firstChild;
+                },
+
                 renderLoginPanel () {
                     this.loginpanel = new _converse.LoginPanel({
                         '$parent': this.$el.find('.controlbox-panes'),
                         'model': this
                     });
                     this.loginpanel.render();
+                    this.el.classList.add("logged-out");
+                    const el = document.getElementById('converse-login');
+                    el.parentNode.insertBefore(this.createBrandHeadingElement(), el.parentNode.firstChild);
                     return this;
                 },
 
@@ -289,6 +300,7 @@
                         'model': _converse.xmppstatus
                     });
                     _converse.xmppstatusview.render();
+                    this.el.classList.remove("logged-out");
                 },
 
                 close (ev) {
@@ -415,6 +427,11 @@
                     const klass = _converse.connfeedback.get('klass');
                     function insert (text, el) {
                         el.textContent = text;
+                        if (!text) {
+                            el.classList.add('hidden');
+                        } else {
+                            el.classList.remove('hidden');
+                        }
                         el.classList.remove('error');
                         if (klass) {
                             el.classList.add(klass);

src/converse-inverse.js

@@ -8,7 +8,7 @@
 
 (function (root, factory) {
     define(["converse-core",
-            "tpl!brand_heading",
+            "tpl!inverse_brand_heading",
             "converse-chatview",
             "converse-controlbox",
             "converse-muc",
@@ -18,12 +18,6 @@
     "use strict";
     const { Strophe, _ } = converse.env;
 
-    function createBrandHeadingElement () {
-        const div = document.createElement('div');
-        div.innerHTML = tpl_brand_heading();
-        return div.firstChild;
-    }
-
      function isMessageToHiddenChat (_converse, message) {
         const jid = Strophe.getBareJidFromJid(message.getAttribute('from'));
         const model = _converse.chatboxes.get(jid);
@@ -57,18 +51,10 @@
             },
 
             ControlBoxView: {
-                renderContactsPanel () {
-                    this.__super__.renderContactsPanel.apply(this, arguments);
-                    this.el.classList.remove("fullscreen");
-                    return this;
-                },
-
-                renderLoginPanel () {
-                    this.__super__.renderLoginPanel.apply(this, arguments);
-                    this.el.classList.add("fullscreen");
-                    const el = document.getElementById('converse-login');
-                    el.parentNode.insertBefore(createBrandHeadingElement(), el.parentNode.firstChild);
-                    return this;
+                 createBrandHeadingElement () {
+                    const div = document.createElement('div');
+                    div.innerHTML = tpl_brand_heading();
+                    return div.firstChild;
                 }
             },
 

src/templates/login_panel.html

@@ -1,6 +1,6 @@
 <div class="conn-feedback">
-    <p class="feedback-subject {{{ conn_feedback_class }}}">{{{ conn_feedback_subject }}}</p>
-    <p class="feedback-message {{{ conn_feedback_class }}}">{{{ conn_feedback_message }}}</p>
+    <p class="feedback-subject hidden {{{ conn_feedback_class }}}">{{{ conn_feedback_subject }}}</p>
+    <p class="feedback-message hidden {{{ conn_feedback_class }}}">{{{ conn_feedback_message }}}</p>
 </div>
 
 <form class="pure-form pure-form-stacked converse-form" id="converse-login" method="post">