Various theming tweaks and improvements

.gitignore

@@ -15,6 +15,7 @@ eggs
 .Python
 
 dev-jc.html
+inverse-dev.html
 
 converse-logs/*.html
 

Makefile

@@ -119,19 +119,19 @@ dev: stamp-bundler stamp-npm
 .PHONY: css
 css: sass/*.scss css/converse.css css/converse.min.css css/mobile.min.css css/theme.min.css css/converse-muc-embedded.min.css css/inverse.css css/inverse.min.css
 
-css/inverse.css:: stamp-bundler sass
+css/inverse.css:: stamp-bundler sass sass/*
 	$(SASS) -I $(BOURBON_TEMPLATES) sass/inverse/inverse.scss css/inverse.css
 
 css/inverse.min.css:: css/inverse.css
 	$(CLEANCSS) css/inverse.css > css/inverse.min.css
 
-css/converse-muc-embedded.css:: stamp-bundler sass
+css/converse-muc-embedded.css:: stamp-bundler sass/*
 	$(SASS) -I $(BOURBON_TEMPLATES) sass/_muc_embedded.scss css/converse-muc-embedded.css
 
 css/converse-muc-embedded.min.css:: stamp-bundler sass css/converse-muc-embedded.css
 	$(CLEANCSS) css/converse-muc-embedded.css > css/converse-muc-embedded.min.css
 
-css/converse.css:: stamp-bundler sass
+css/converse.css:: stamp-bundler sass/*
 	$(SASS) -I $(BOURBON_TEMPLATES) sass/converse/converse.scss css/converse.css
 
 css/converse.min.css:: css/converse.css
@@ -140,7 +140,7 @@ css/converse.min.css:: css/converse.css
 css/theme.min.css:: stamp-npm css/theme.css
 	$(CLEANCSS) css/theme.css > css/theme.min.css
 
-css/mobile.min.css:: stamp-npm sass
+css/mobile.min.css:: stamp-npm sass/*
 	$(CLEANCSS) css/mobile.css > css/mobile.min.css
 
 .PHONY: watch

dev.html

@@ -54,7 +54,7 @@
     require(['converse'], function (converse) {
         converse.initialize({
             auto_away: 300,
-            i18n: locales['af'],
+            i18n: 'en',
             // auto_join_rooms: [
             //     'discuss@conference.conversejs.org',
             //     'prosody@conference.prosody.im',

sass/_chatbox.scss

@@ -19,16 +19,6 @@
         }
     }
     .chat-head {
-        border-top-left-radius: $chatbox-border-radius;
-        border-top-right-radius: $chatbox-border-radius;
-        @media screen and (max-height: $mobile-landscape-height) {
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
-        }
-        @media screen and (max-width: $mobile-portrait-length) {
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
-        }
         color: #ffffff;
         font-size: 100%;
         height: $chat-head-height;

sass/_chatrooms.scss

@@ -42,9 +42,6 @@
             width: $mobile-chat-width;
         }
 
-        .spinner {
-        }
-
         .box-flyout {
             min-width: $chatroom-width;
             width: $chatroom-width;

sass/_controlbox.scss

@@ -114,7 +114,7 @@
         }
         #users {
             .add-converse-contact {
-                margin: 0 1em 0.75em 1em;
+                margin: 0 0 0.75em 0;
             }
         }
 
@@ -125,15 +125,19 @@
                 input[type=text] {
                     width: 100%;
                 }
+                margin: 0;
+                padding: 0;
             }
             .rooms-list-container {
                 text-align: left;
-                margin: 0 1em;
+                margin: 0;
                 .rooms-toggle {
                     display: block;
-                    font-weight: bold;
                     color: $text-color;
                     margin-top: 1em;
+                    &:hover {
+                        color: $dark-gray-color;
+                    }
                 }
                 dl.rooms-list {
                     margin: 0.5em 0;
@@ -155,8 +159,8 @@
                         padding: 0.3em 0;
                         text-shadow: 0 1px 0 $text-shadow-color;
                         word-wrap: break-word;
-                        &:hover {
-                            background-color: $highlight-color;
+                        a:hover {
+                            color: $dark-link-color;
                         }
                         &.unread-msgs {
                             .open-room {
@@ -183,6 +187,9 @@
                         .remove-bookmark {
                             &.button-on {
                                 color: $link-color;
+                                &:hover {
+                                    color: $dark-link-color;
+                                }
                             }
                             color: $subdued-color;
                         }
@@ -278,8 +285,8 @@
                 a {
                     background-color: white;
                     border-bottom: 1px solid $border-color;
-                    border-top-left-radius: $chatbox-border-radius;
-                    border-top-right-radius: $chatbox-border-radius;
+                    border-top-left-radius: $button-border-radius;
+                    border-top-right-radius: $button-border-radius;
                     box-shadow: inset 2px -2px 20px rgba(0, 0, 0, 0.3);
                     color: $text-color;
                     display: block;
@@ -300,7 +307,7 @@
                         }
                     }
                     .msgs-indicator {
-                        border-top-right-radius: $chatbox-border-radius;
+                        border-top-right-radius: $button-border-radius;
                     }
                     &:hover {
                         color: $text-color;
@@ -323,32 +330,43 @@
         .fancy-dropdown {
             border: 1px solid $light-background-border-color;
             height: $controlbox-dropdown-height;
-            border-radius: $chatbox-border-radius;
+            border-radius: $button-border-radius;
             text-align: left;
-            padding: 0.3em 0.3em 0 0.3em;
+
             .choose-xmpp-status,
             .toggle-xmpp-contact-form {
+                line-height: $controlbox-dropdown-height;
                 text-shadow: 0 1px 0 #ffffff;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
                 display: inline-block;
+                &:hover {
+                    color: $dark-link-color;
+                }
+            }
+            .toggle-xmpp-contact-form {
+                padding: 0 0.5em;
+                width: 100%;
             }
             &.no-border {
                 border: 0;
             }
 
         }
+        #fancy-xmpp-status-select {
             .xmpp-status {
-            padding: 0.3em 0.3em 0 0.3em;
+                padding: 0 0.5em;
             }
-        #fancy-xmpp-status-select {
-            padding: 0em;
             a.change-xmpp-status-message {
+                line-height: $controlbox-dropdown-height;
                 float: right;
                 clear: right;
                 width: 12px;
                 color: $link-color;
+                &:hover {
+                    color: $dark-link-color;
+                }
             }
             fieldset {
                 padding: 0;
@@ -368,16 +386,13 @@
         }
 
         .controlbox-pane {
+            padding: $controlbox-pane-padding;
             background-color: white;
-            border-bottom-left-radius: $chatbox-border-radius;
-            border-bottom-right-radius: $chatbox-border-radius;
             border: 0;
             font-size: $font-size;
             position: absolute;
             text-align: center;
             width: 100%;
-            height: 289px;
-            @include calc(height, '100% - #{$chat-head-height}');
             overflow-y: auto;
             overflow-x: hidden;
             label {
@@ -429,7 +444,7 @@
 
         .set-xmpp-status {
             background: none;
-            margin: 1em 1em 0.5em 1em;
+            margin: 1em 0 0.5em 0em;
             .dropdown dd ul {
                 z-index: 22;
             }
@@ -438,8 +453,8 @@
 
     .toggle-controlbox {
         background-color: $link-color;
-        border-top-left-radius: $chatbox-border-radius;
-        border-top-right-radius: $chatbox-border-radius;
+        border-top-left-radius: $button-border-radius;
+        border-top-right-radius: $button-border-radius;
         color: #0a0a0a;
         float: right;
         height: 100%;

sass/_core.scss

@@ -20,8 +20,21 @@
         width: 100vw;
     }
 
+
+	::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+        color: $subdued-color;
+	}
+	::-moz-placeholder { /* Firefox 19+ */
+        color: $subdued-color;
+	}
+	:-ms-input-placeholder { /* IE 10+ */
+        color: $subdued-color;
+	}
+	:-moz-placeholder { /* Firefox 18- */
+        color: $subdued-color;
+	}
     ::placeholder {
-        color: #BBB;
+        color: $subdued-color;
     }
 
     .circle {
@@ -144,7 +157,7 @@
     }
 
     .error {
-        color: red;
+        color: $error-color;
     }
     .reg-feedback {
         font-size: 85%;
@@ -216,7 +229,7 @@
                 border: none;
             }
             input.error {
-                border: 1px solid red;
+                border: 1px solid $error-color;
                 color: $text-color;
             }
             .form-help {

sass/_fonts.scss

@@ -75,6 +75,7 @@
     .icon-legal:before              { content: "\f0e3"; }
     .icon-lock:before               { content: "\e027"; }
     .icon-logout:before             { content: "\e601"; }
+    .icon-leave:before              { content: "\e601"; }
     .icon-minus:before              { content: "\e05a"; }
     .icon-music:before              { content: "\266b"; }
     .icon-new-tab:before            { content: "\e053"; }

sass/_muc_embedded.scss

 @import "bourbon";
-@import "variables";
+@import "converse/variables";
 #converse-embedded-chat {
 
     @include box-sizing(border-box);

sass/_roster.scss

@@ -27,9 +27,8 @@
     }
 
     .roster-filter-form {
-        margin: 0 1em 0.5em 1em;
+        margin: 0 0 0.5em 0;
         width: 100%;
-        padding-right: 1em + 2*$chat-gutter;
         .roster-filter {
             float: left;
             background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg== ) no-repeat right -20px center;
@@ -79,6 +78,7 @@
     }
 
     .roster-contacts {
+        padding: 0;
         margin: 0;
         height: 100%;
         overflow-x: hidden;
@@ -89,13 +89,12 @@
             color: $text-color;
             display: none;
             font-weight: normal;
-            margin-top: 0.5em;
-            padding: 0.5em 1em;
+            margin: 1em 0 0.5em 0;
             text-shadow: 0 1px 0 $text-shadow-color;
+            .group-toggle {
                 &:hover {
-                background-color: $highlight-color;
+                    color: $dark-gray-color;
                 }
-            .group-toggle {
                 color: $text-color;
                 display: block;
                 width: 100%;
@@ -105,21 +104,23 @@
             border: none;
             clear: both;
             color: $text-color;
-            background-color: $light-background-color;
             display: block;
             height: 24px;
             overflow-y: hidden;
-            padding: 0.3em 1em;
             text-shadow: 0 1px 0 $text-shadow-color;
             line-height: $line-height;
             width: 100%;
             height: 30px;
             margin: 0;
-            padding: 0;
+            padding: 0.5em 0 0 0;
+
+            a:hover {
+                color: $dark-link-color;
+            }
 
             .open-chat {
                 margin: auto;
-                padding: 0.5em 0em 0 1em;
+                padding: 0;
                 width: 85%;
                 .pulse {
                     padding: 0;
@@ -178,16 +179,9 @@
                     }
                 }
             }
-
-            &:hover {
-                background-color: $highlight-color;
-            }
             &.requesting-xmpp-contact {
                 .request-actions {
-                    padding-top: 0.5em;
-                    margin-right: 1em;
-                    margin-left: 0.3em;
-                    margin-bottom: 0.3em;
+                    padding: 0 0 0 0.3em;
                     float: right;
                 }
                 .open-chat {
@@ -205,7 +199,6 @@
             &.current-xmpp-contact span {
                 font-size: 16px;
                 float: left;
-                color: $link-color;
                 margin-right: 0.5em;
             }
             &.odd {
@@ -229,9 +222,12 @@
                 &.remove-xmpp-contact {
                     font-size: $font-size-tiny;
                     float: right;
-                    margin-right: 1em;
-                    padding-top: 0.5em;
+                    margin: 0;
+                    padding: 0;
                     color: $subdued-color;
+                    &:hover {
+                        color: $gray-color;
+                    }
                 }
             }
         }

sass/converse/_chatbox.scss

+#converse-embedded-chat,
+#conversejs {
+    .chat-head {
+        border-top-left-radius: $chatbox-border-radius;
+        border-top-right-radius: $chatbox-border-radius;
+        @media screen and (max-height: $mobile-landscape-height) {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+        }
+        @media screen and (max-width: $mobile-portrait-length) {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+        }
+    }
+}

sass/converse/_controlbox.scss

+#conversejs {
+    #controlbox {
+        .controlbox-pane {
+            border-bottom-left-radius: $chatbox-border-radius;
+            border-bottom-right-radius: $chatbox-border-radius;
+            height: 289px;
+            @include calc(height, '100% - #{$controlbox-head-height}');
+        }
+    }
+}

sass/converse/_variables.scss

@@ -4,6 +4,8 @@
     http://paletton.com/#uid=53f0u0knsvIdILAj5Cftgu3uBmZ
  */
 $link-color: #2A9D8F !default;
+$dark-link-color: #015158 !default;
+
 $inverse-link-color: white !default;
 $link-shadow-color: #FAFAFA !default;
 $text-shadow-color: #FAFAFA !default;
@@ -16,6 +18,7 @@ $chat-textarea-height: 70px !default;
 $send-button-height: 27px !default;
 $send-button-margin: 3px !default;
 $message-them-color: #1A9707 !default;
+
 $roster-height: 194px !default;
 $roster-item-height: 60px !default;
 
@@ -27,8 +30,14 @@ $chat-head-height: 55px !default;
 $input-focus-color: #1A9707 !default;
 $highlight-color: #DCF9F6 !default;
 
-$controlbox-head-color: #577BDD !default;
+$subdued-color: #A8ABA1 !default;
+$gray-color: #818479 !default;
+$dark-gray-color: #585B51!default;
+
 $controlbox-dropdown-height: 25px !default;
+$controlbox-head-color: #577BDD !default;
+$controlbox-head-height: 55px !default;
+$controlbox-pane-padding: 1em !default;
 
 $primary-color: #2AC611 !default;
 $secondary-color: #83A0D6 !default;
@@ -43,8 +52,8 @@ $toolbar-color: #FFF5EE !default;
 $moderator-color: #D24E2B !default;
 $online-color: #1A9707 !default;
 $error-color: #D24E2B !default;
-$subdued-color: #BBB !default;
 
+$button-border-radius: 5px !default;
 $chatbox-border-radius: 4px !default;
 $bottom-gutter-height: 35px !default;
 $chatbox-hover-height: 6px !default;

sass/converse/converse.scss

@@ -12,7 +12,9 @@
 @import "../normalize";
 @import "../core";
 @import "../chatbox";
+@import "chatbox";
 @import "../controlbox";
+@import "controlbox";
 @import "../roomslist";
 @import "../roster";
 @import "../chatrooms";

sass/inverse/_chatbox.scss

 #conversejs {
     .chatbox-btn {
         font-size: $font-size-large;
+        margin: 0 0.3em;
     }
     .flyout {
         border: 1em solid $chat-head-color;
         border-top: 0.8em solid $chat-head-color;
         border-radius: 0;
         bottom: 0;
-        bottom: 0;
     }
     .chat-head {
         font-size: 20px;
@@ -17,6 +17,11 @@
             height: auto;
             line-height: $line-height;
         }
+        &.chat-head-chatbox {
+            .close-chatbox-button {
+                display: none;
+            }
+        }
         .avatar {
             border-radius: 25%;
         }
@@ -27,15 +32,24 @@
         @include calc(width, '100% - #{$controlbox-width}');
         margin: 0;
         .box-flyout {
+            background-color: $chat-head-color;
             @include calc(width, '100% - #{$controlbox-width}');
             box-shadow: none;
             min-width: auto;
         }
+        .chat-body {
+            background-color: $chat-head-color;
+            border-top-left-radius: $chatbox-border-radius;
+            border-top-right-radius: $chatbox-border-radius;
+        }
         .chat-content {
             padding: 0 $padding $padding $padding;
+            border-top-left-radius: $chatbox-border-radius;
+            border-top-right-radius: $chatbox-border-radius;
         }
         .chat-title {
-            line-height: 17px;
+            font-size: $font-size-huge;
+            line-height: $font-size-huge;
         }
 
         form.sendXMPPMessage {

sass/inverse/_chatrooms.scss

@@ -2,11 +2,12 @@
     .chat-head-chatroom {
         height: $chatroom-head-height;
         font-size: 20px;
-
+        .close-chatbox-button:before {
+            content: "\e601"; // Leave icon
+        }
         .chatroom-description {
             font-size: 66%;
             margin-top: 3px;
-            margin-top: 0.5em;
         }
     }
 
@@ -60,6 +61,11 @@
                                 width: 100%;
                             }
                         }
+                        li {
+                            &.feature {
+                                font-size: $font-size-small;
+                            }
+                        }
                     }
                 }
             }

sass/inverse/_controlbox.scss

@@ -63,6 +63,8 @@
         }
         .controlbox-pane {
             @include calc(height, '100% - #{$controlbox-head-height}');
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
         }
     }
 }

sass/inverse/_core.scss

@@ -31,146 +31,9 @@ div.content {
 #conversejs {
     width: 100vw;
     height: 100vh;
-    position: fixed;
-    bottom: 0;
-    color: $text-color;
-    direction: ltr;
-    display: block;
-    font-size: $font-size;
-    right: 0;
-    z-index: 1031; // One more than bootstrap navbar
-    @media screen and (max-height: $mobile-landscape-height) {
-        width: 100%;
-        width: 100vw;
-    }
-    @media screen and (max-width: $mobile-portrait-length) {
-        width: 100%;
-        width: 100vw;
-    }
-
-    ::selection {
-        background-color: $highlight-color;
-    }
-    ::-moz-selection {
-        background-color: $highlight-color;
-    }
-    .circle {
-        border-radius: 50%;
-    }
-    .no-text-select {
-        -webkit-touch-callout: none;
-        @include user-select(none);
-    }
-    .emoticon {
-        font-size: $font-size;
-    }
-    .left {
-        float: left;
-    }
-    .right {
-        float: right;
-    }
-    .centered {
-        text-align: center;
-        display: block;
-        margin: 5em auto;
-    }
-    .hor_centered {
-        text-align: center;
-        display: block;
-        margin: 0 auto;
-        clear: both;
-    }
-    .hidden {
-        display: none;
-    }
-    .locked {
-        padding-right: 22px;
-    }
-
-    @include keyframes(spin) {
-        from {
-            @include transform(rotate(0deg));
-        }
-        to {
-            @include transform(rotate(359deg));
-        }
-    }
-
-    .spinner {
-        @include animation(spin 2s infinite, linear);
-        display: block;
-        text-align: center;
-        margin: 5px;
-        &:before {
-            font-size: 24px;
-            font-family: 'Converse-js' !important;
-            content: "\231b";
-        }
-    }
-
-    .button-group,
-    .input-button-group {
-        display: table;
-    }
-    .button-group {
-        width: 100%;
-    }
-    .input-button-group button,
-    .input-button-group input {
-        display: table-cell;
-    }
-
-    .error {
-        color: red;
-    }
-    .reg-feedback {
-        font-size: 85%;
-    }
-
-    .reg-feedback,
-    #converse-login .conn-feedback {
-        display: block;
-        text-align: center;
-        width: 100%;
-    }
-
-    a.restore-chat {
-        padding: 1px 0 1px 5px;
-        color: $chat-head-text-color;
-        line-height: 15px;
-        display: block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    a.restore-chat:visited {
-        color: $chat-head-text-color;
-    }
-
-    .activated {
-        display: block !important;
-    }
-    .pure-button {
-        border-radius: $button-border-radius;
-    }
-    .button-primary {
-        color: white;
-        background-color: $primary-color;
-    }
-    .button-secondary {
-        color: white;
-        background-color: $secondary-color;
-    }
-    .button-cancel {
-        color: white;
-        background-color: $warning-color;
-    }
 
     form {
         &.pure-form.converse-form {
-            background: white;
             margin: 1em;
             legend {
                 color: $text-color;
@@ -191,33 +54,6 @@ div.content {
                 padding-right: 1em;
                 margin-right: 1em;
             }
-            input.error {
-                border: 1px solid red;
-                color: $text-color;
-            }
-            .form-help {
-                color: gray;
-                font-size: 85%;
-                padding-top: 0.5em;
-                &:hover {
-                    color: $text-color;
         }
     }
-        }
-    }
-
-    .chat-textarea-chatbox-selected {
-        border: 1px solid #578308;
-        margin: 0;
-    }
-    .chat-textarea-chatroom-selected {
-        border: 2px solid $link-color;
-        margin: 0;
-    }
-
-    .dropdown dt,
-    .dropdown ul {
-        margin: 0;
-        padding: 0;
-    }
 }

sass/inverse/_variables.scss

@@ -5,7 +5,9 @@
  */
 $global-background-color: #17818B !default;
 
-$link-color: #587BDD !default;
+$link-color: #2A9D8F !default;
+$dark-link-color: #015158 !default;
+
 $inverse-link-color: white !default;
 $link-shadow-color: #FAFAFA !default;
 $text-shadow-color: #FAFAFA !default;
@@ -18,6 +20,7 @@ $chat-textarea-height: 70px !default;
 $send-button-height: 27px !default;
 $send-button-margin: 3px !default;
 $message-them-color: #1A9707 !default;
+
 $roster-height: 194px !default;
 $roster-item-height: 30px !default;
 
@@ -25,14 +28,19 @@ $chat-head-color: #F4A261 !default;
 $chat-head-text-color: white !default;
 $chat-head-inverse-text-color: white !default;
 $chat-head-height: 55px !default;
-$controlbox-head-height: 63px !default;
 $chatroom-head-height: 55px !default;
 
 $input-focus-color: #1A9707 !default;
 $highlight-color: #DCF9F6 !default;
 
+$subdued-color: #A8ABA1 !default;
+$gray-color: #818479 !default;
+$dark-gray-color: #585B51!default;
+
+$controlbox-dropdown-height: 30px !default;
 $controlbox-head-color: #577BDD !default;
-$controlbox-dropdown-height: 25px !default;
+$controlbox-head-height: 63px !default;
+$controlbox-pane-padding: 1.2em !default;
 
 $primary-color: #2AC611 !default;
 $secondary-color: #83A0D6 !default;
@@ -47,10 +55,9 @@ $toolbar-color: #FFF5EE !default;
 $moderator-color: #D24E2B !default;
 $online-color: #1A9707 !default;
 $error-color: #D24E2B !default;
-$subdued-color: #BBB !default;
 
-$button-border-radius: 4px !default;
-$chatbox-border-radius: 0 !default;
+$button-border-radius: 5px !default;
+$chatbox-border-radius: 7px !default;
 $bottom-gutter-height: 35px !default;
 $chatbox-hover-height: 6px !default;
 
@@ -60,8 +67,9 @@ $mobile_portrait_length: 480px !default;
 $font-size-tiny: 10px !default;
 $font-size-small: 14px !default;
 $font-size: 15px !default;
-$font-size-large: 17px !default;
-$legend-font-size: 17px !default;
+$font-size-large: 18px !default;
+$font-size-huge: 26px !default;
+$legend-font-size: 18px !default;
 
 $line-height:  16px !default;
 
@@ -77,8 +85,7 @@ $mobile-chat-width: 100% !default;
 $mobile-chat-height: 400px !default;
 $small-mobile-chat-height: 300px !default;
 
-/* $font-path: "../fonticons/fonts/" !default; */
-$font-path: "https://cdn.conversejs.org/fonticons/fonts/" !default;
+$font-path: "../fonticons/fonts/" !default;
 
 $chatroom-width: 300px !default;
 $chatroom-head-color: #E76F51 !default;

sass/inverse/inverse.scss

@@ -10,6 +10,7 @@
 @import "variables";
 @import "../fonts";
 @import "normalize";
+@import "../core";
 @import "core";
 @import "../chatbox";
 @import "chatbox";

src/converse-inverse.js

@@ -103,8 +103,8 @@
 
             this.updateSettings({
                 blacklisted_plugins: ['converse-minimize', 'converse-dragresize'],
-                chatview_avatar_height: 42,
-                chatview_avatar_width: 42,
+                chatview_avatar_height: 44,
+                chatview_avatar_width: 44,
                 hide_open_bookmarks: true,
                 notification_icon: '/node_modules/converse.js/logo/conversejs128.png', // New default
                 show_controlbox_by_default: true,

src/templates/rooms_list_item.html

@@ -3,7 +3,7 @@
     <span class="msgs-indicator">{{{ num_unread }}}</span>
 {[ } ]}
 <a class="open-room" data-room-jid="{{{jid}}}" title="{{{open_title}}}" href="#">{{{name}}}</a>
-<a class="right close-room icon-remove"
+<a class="right close-room icon-leave"
    data-room-jid="{{{jid}}}" title="{{{info_leave_room}}}" href="#">&nbsp;</a>
 <a class="right remove-bookmark icon-pushpin {[ if (bookmarked) { ]} button-on {[ } ]}"
    data-room-jid="{{{jid}}}" data-bookmark-name="{{{name}}}"

src/templates/toolbar.html

@@ -21,5 +21,5 @@
 <li class="toggle-call"><a class="icon-phone" title="{{{label_start_call}}}"></a></li>
 {[ } ]}
 {[ if (show_clear_button)  { ]}
-<li class="toggle-clear"><a class="icon-remove" title="{{{label_clear}}}"></a></li>
+<li class="toggle-clear"><a class="icon-trash" title="{{{label_clear}}}"></a></li>
 {[ } ]}