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

css/converse.css

@@ -172,6 +172,9 @@
 #converse-embedded-chat .icon-logout:before,
 #conversejs .icon-logout:before {
   content: "\e601"; }
+#converse-embedded-chat .icon-leave:before,
+#conversejs .icon-leave:before {
+  content: "\e601"; }
 #converse-embedded-chat .icon-minus:before,
 #conversejs .icon-minus:before {
   content: "\e05a"; }
@@ -1163,9 +1166,25 @@
     #conversejs {
       width: 100%;
       width: 100vw; } }
+  #converse-embedded-chat ::-webkit-input-placeholder,
+  #conversejs ::-webkit-input-placeholder {
+    /* Chrome/Opera/Safari */
+    color: #A8ABA1; }
+  #converse-embedded-chat ::-moz-placeholder,
+  #conversejs ::-moz-placeholder {
+    /* Firefox 19+ */
+    color: #A8ABA1; }
+  #converse-embedded-chat :-ms-input-placeholder,
+  #conversejs :-ms-input-placeholder {
+    /* IE 10+ */
+    color: #A8ABA1; }
+  #converse-embedded-chat :-moz-placeholder,
+  #conversejs :-moz-placeholder {
+    /* Firefox 18- */
+    color: #A8ABA1; }
   #converse-embedded-chat ::placeholder,
   #conversejs ::placeholder {
-    color: #BBB; }
+    color: #A8ABA1; }
   #converse-embedded-chat .circle,
   #conversejs .circle {
     border-radius: 50%; }
@@ -1355,7 +1374,7 @@
     display: table-cell; }
   #converse-embedded-chat .error,
   #conversejs .error {
-    color: red; }
+    color: #D24E2B; }
   #converse-embedded-chat .reg-feedback,
   #conversejs .reg-feedback {
     font-size: 85%; }
@@ -1428,7 +1447,7 @@
       border: none; }
     #converse-embedded-chat form.pure-form.converse-form input.error,
     #conversejs form.pure-form.converse-form input.error {
-      border: 1px solid red;
+      border: 1px solid #D24E2B;
       color: #818479; }
     #converse-embedded-chat form.pure-form.converse-form .form-help,
     #conversejs form.pure-form.converse-form .form-help {
@@ -1481,24 +1500,12 @@
       bottom: 0; } }
 #converse-embedded-chat .chat-head,
 #conversejs .chat-head {
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
   color: #ffffff;
   font-size: 100%;
   height: 55px;
   margin: 0;
   padding: 0.5em;
   position: relative; }
-  @media screen and (max-height: 450px) {
-    #converse-embedded-chat .chat-head,
-    #conversejs .chat-head {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0; } }
-  @media screen and (max-width: 480px) {
-    #converse-embedded-chat .chat-head,
-    #conversejs .chat-head {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0; } }
   #converse-embedded-chat .chat-head .avatar,
   #conversejs .chat-head .avatar {
     margin-right: 0.5em;
@@ -1875,6 +1882,21 @@
       top: 0;
       left: 0; }
 
+#converse-embedded-chat .chat-head,
+#conversejs .chat-head {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px; }
+  @media screen and (max-height: 450px) {
+    #converse-embedded-chat .chat-head,
+    #conversejs .chat-head {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0; } }
+  @media screen and (max-width: 480px) {
+    #converse-embedded-chat .chat-head,
+    #conversejs .chat-head {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0; } }
+
 #conversejs #controlbox {
   margin-right: 1em; }
   @media screen and (max-width: 480px) {
@@ -1964,19 +1986,23 @@
       width: 100%;
       margin: 0.5em 0; }
   #conversejs #controlbox #users .add-converse-contact {
-    margin: 0 1em 0.75em 1em; }
-  #conversejs #controlbox #chatrooms form.add-chatroom input[type=button],
-  #conversejs #controlbox #chatrooms form.add-chatroom input[type=submit],
-  #conversejs #controlbox #chatrooms form.add-chatroom input[type=text] {
-    width: 100%; }
+    margin: 0 0 0.75em 0; }
+  #conversejs #controlbox #chatrooms form.add-chatroom {
+    margin: 0;
+    padding: 0; }
+    #conversejs #controlbox #chatrooms form.add-chatroom input[type=button],
+    #conversejs #controlbox #chatrooms form.add-chatroom input[type=submit],
+    #conversejs #controlbox #chatrooms form.add-chatroom input[type=text] {
+      width: 100%; }
   #conversejs #controlbox #chatrooms .rooms-list-container {
     text-align: left;
-    margin: 0 1em; }
+    margin: 0; }
     #conversejs #controlbox #chatrooms .rooms-list-container .rooms-toggle {
       display: block;
-      font-weight: bold;
       color: #818479;
       margin-top: 1em; }
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-toggle:hover {
+        color: #585B51; }
     #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list {
       margin: 0.5em 0;
       text-align: left; }
@@ -1996,8 +2022,8 @@
         padding: 0.3em 0;
         text-shadow: 0 1px 0 #FAFAFA;
         word-wrap: break-word; }
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom:hover {
-          background-color: #DCF9F6; }
+        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom a:hover {
+          color: #015158; }
         #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom.unread-msgs .open-room {
           max-width: 50%;
           width: auto;
@@ -2012,9 +2038,11 @@
           white-space: nowrap;
           padding-right: 0.5em; }
         #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom .remove-bookmark {
-          color: #BBB; }
+          color: #A8ABA1; }
           #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom .remove-bookmark.button-on {
             color: #2A9D8F; }
+            #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom .remove-bookmark.button-on:hover {
+              color: #015158; }
         #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom .room-info {
           font-size: 12px;
           font-style: normal;
@@ -2081,8 +2109,8 @@
       #conversejs #controlbox #controlbox-tabs li a {
         background-color: white;
         border-bottom: 1px solid #CCC;
-        border-top-left-radius: 4px;
-        border-top-right-radius: 4px;
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
         box-shadow: inset 2px -2px 20px rgba(0, 0, 0, 0.3);
         color: #818479;
         display: block;
@@ -2097,7 +2125,7 @@
         #conversejs #controlbox #controlbox-tabs li a.rooms-tab .msgs-indicator {
           background-color: #E76F51; }
         #conversejs #controlbox #controlbox-tabs li a .msgs-indicator {
-          border-top-right-radius: 4px; }
+          border-top-right-radius: 5px; }
         #conversejs #controlbox #controlbox-tabs li a:hover {
           color: #818479; }
           #conversejs #controlbox #controlbox-tabs li a:hover .msgs-indicator {
@@ -2111,52 +2139,55 @@
   #conversejs #controlbox .fancy-dropdown {
     border: 1px solid #B1BFC4;
     height: 25px;
-    border-radius: 4px;
-    text-align: left;
-    padding: 0.3em 0.3em 0 0.3em; }
+    border-radius: 5px;
+    text-align: left; }
     #conversejs #controlbox .fancy-dropdown .choose-xmpp-status,
     #conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form {
+      line-height: 25px;
       text-shadow: 0 1px 0 #ffffff;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       display: inline-block; }
+      #conversejs #controlbox .fancy-dropdown .choose-xmpp-status:hover,
+      #conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form:hover {
+        color: #015158; }
+    #conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form {
+      padding: 0 0.5em;
+      width: 100%; }
     #conversejs #controlbox .fancy-dropdown.no-border {
       border: 0; }
-  #conversejs #controlbox .xmpp-status {
-    padding: 0.3em 0.3em 0 0.3em; }
-  #conversejs #controlbox #fancy-xmpp-status-select {
-    padding: 0em; }
-    #conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message {
-      float: right;
-      clear: right;
-      width: 12px;
-      color: #2A9D8F; }
-    #conversejs #controlbox #fancy-xmpp-status-select fieldset {
-      padding: 0;
-      margin-top: -1px; }
-    #conversejs #controlbox #fancy-xmpp-status-select input {
-      height: 26px;
-      width: -webkit-calc(100% - 40px);
-      width: calc(100% - 40px);
-      padding: 0 0 0 0.5em; }
-    #conversejs #controlbox #fancy-xmpp-status-select input[type=submit] {
-      height: 26px;
-      width: 40px;
-      padding: 1px;
-      float: right; }
+  #conversejs #controlbox #fancy-xmpp-status-select .xmpp-status {
+    padding: 0 0.5em; }
+  #conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message {
+    line-height: 25px;
+    float: right;
+    clear: right;
+    width: 12px;
+    color: #2A9D8F; }
+    #conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message:hover {
+      color: #015158; }
+  #conversejs #controlbox #fancy-xmpp-status-select fieldset {
+    padding: 0;
+    margin-top: -1px; }
+  #conversejs #controlbox #fancy-xmpp-status-select input {
+    height: 26px;
+    width: -webkit-calc(100% - 40px);
+    width: calc(100% - 40px);
+    padding: 0 0 0 0.5em; }
+  #conversejs #controlbox #fancy-xmpp-status-select input[type=submit] {
+    height: 26px;
+    width: 40px;
+    padding: 1px;
+    float: right; }
   #conversejs #controlbox .controlbox-pane {
+    padding: 1em;
     background-color: white;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
     border: 0;
     font-size: 14px;
     position: absolute;
     text-align: center;
     width: 100%;
-    height: 289px;
-    height: -webkit-calc(100% - 55px);
-    height: calc(100% - 55px);
     overflow-y: auto;
     overflow-x: hidden; }
     #conversejs #controlbox .controlbox-pane label {
@@ -2192,13 +2223,13 @@
     color: #D24E2B; }
   #conversejs #controlbox .set-xmpp-status {
     background: none;
-    margin: 1em 1em 0.5em 1em; }
+    margin: 1em 0 0.5em 0em; }
     #conversejs #controlbox .set-xmpp-status .dropdown dd ul {
       z-index: 22; }
 #conversejs .toggle-controlbox {
   background-color: #2A9D8F;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
   color: #0a0a0a;
   float: right;
   height: 100%;
@@ -2207,6 +2238,13 @@
   #conversejs .toggle-controlbox span {
     color: white; }
 
+#conversejs #controlbox .controlbox-pane {
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  height: 289px;
+  height: -webkit-calc(100% - 55px);
+  height: calc(100% - 55px); }
+
 #conversejs #controlbox .available-chatroom .pulse {
   padding: 0;
   margin: 0; }
@@ -2232,9 +2270,8 @@
   #conversejs #converse-roster .search-xmpp ul li.chat-info {
     padding-left: 10px; }
   #conversejs #converse-roster .roster-filter-form {
-    margin: 0 1em 0.5em 1em;
+    margin: 0 0 0.5em 0;
     width: 100%;
-    padding-right: 2em;
     /* (jQ addClass:) if input has value: */
     /* (jQ addClass:) if mouse is over the 'x' input area*/ }
     #conversejs #converse-roster .roster-filter-form .roster-filter {
@@ -2275,6 +2312,7 @@
       border-radius: 0;
       border: 1px solid; }
   #conversejs #converse-roster .roster-contacts {
+    padding: 0;
     margin: 0;
     height: 100%;
     overflow-x: hidden;
@@ -2285,33 +2323,32 @@
       color: #818479;
       display: none;
       font-weight: normal;
-      margin-top: 0.5em;
-      padding: 0.5em 1em;
+      margin: 1em 0 0.5em 0;
       text-shadow: 0 1px 0 #FAFAFA; }
-      #conversejs #converse-roster .roster-contacts dt.roster-group:hover {
-        background-color: #DCF9F6; }
       #conversejs #converse-roster .roster-contacts dt.roster-group .group-toggle {
         color: #818479;
         display: block;
         width: 100%; }
+        #conversejs #converse-roster .roster-contacts dt.roster-group .group-toggle:hover {
+          color: #585B51; }
     #conversejs #converse-roster .roster-contacts dd {
       border: none;
       clear: both;
       color: #818479;
-      background-color: #FCFDFD;
       display: block;
       height: 24px;
       overflow-y: hidden;
-      padding: 0.3em 1em;
       text-shadow: 0 1px 0 #FAFAFA;
       line-height: 16px;
       width: 100%;
       height: 30px;
       margin: 0;
-      padding: 0; }
+      padding: 0.5em 0 0 0; }
+      #conversejs #converse-roster .roster-contacts dd a:hover {
+        color: #015158; }
       #conversejs #converse-roster .roster-contacts dd .open-chat {
         margin: auto;
-        padding: 0.5em 0em 0 1em;
+        padding: 0;
         width: 85%; }
         #conversejs #converse-roster .roster-contacts dd .open-chat .pulse {
           padding: 0;
@@ -2356,13 +2393,8 @@
           height: 60px; }
           #conversejs #converse-roster .roster-contacts dd .open-chat .avatar .status-icon {
             color: #2A9D8F; }
-      #conversejs #converse-roster .roster-contacts dd:hover {
-        background-color: #DCF9F6; }
       #conversejs #converse-roster .roster-contacts dd.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; }
       #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .open-chat {
         max-width: 70%; }
@@ -2375,7 +2407,6 @@
       #conversejs #converse-roster .roster-contacts dd.current-xmpp-contact span {
         font-size: 16px;
         float: left;
-        color: #2A9D8F;
         margin-right: 0.5em; }
       #conversejs #converse-roster .roster-contacts dd.odd {
         background-color: #DCEAC5;
@@ -2393,9 +2424,11 @@
       #conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact {
         font-size: 10px;
         float: right;
-        margin-right: 1em;
-        padding-top: 0.5em;
-        color: #BBB; }
+        margin: 0;
+        padding: 0;
+        color: #A8ABA1; }
+        #conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact:hover {
+          color: #818479; }
   #conversejs #converse-roster span.pending-contact-name {
     line-height: 16px;
     width: 100%; }

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;
             }
 
         }
-        .xmpp-status {
-            padding: 0.3em 0.3em 0 0.3em;
-        }
         #fancy-xmpp-status-select {
-            padding: 0em;
+            .xmpp-status {
+                padding: 0 0.5em;
+            }
             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

@@ -1,5 +1,5 @@
 @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;
-            &:hover {
-                background-color: $highlight-color;
-            }
             .group-toggle {
+                &:hover {
+                    color: $dark-gray-color;
+                }
                 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

@@ -0,0 +1,15 @@
+#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

@@ -0,0 +1,10 @@
+#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

@@ -1,13 +1,13 @@
 #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

@@ -1,11 +1,13 @@
-/* 
+/*
     Color scheme helpers:
     https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
     http://paletton.com/#uid=53f0u0knsvIdILAj5Cftgu3uBmZ
  */
 $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>
 {[ } ]}