Various small CSS fixes and improvements.

css/converse.css

@@ -1246,7 +1246,7 @@
   #conversejs .chat-head.chat-head-chatbox {
     background-color: #F4A261; }
 #conversejs .chatbox-btn {
-  border-radius: 5px;
+  border-radius: 4px;
   border: 1px solid white;
   color: white;
   cursor: pointer;
@@ -1671,6 +1671,7 @@
   #conversejs #controlbox .fancy-dropdown {
     border: 1px solid #B1BFC4;
     height: 25px;
+    border-radius: 4px;
     text-align: left; }
     #conversejs #controlbox .fancy-dropdown .choose-xmpp-status {
       width: 155px; }
@@ -1741,7 +1742,7 @@
     color: #D24E2B; }
   #conversejs #controlbox .set-xmpp-status {
     background: none;
-    margin: 0.75em 1em 0.5em 1em; }
+    margin: 1em 1em 0.5em 1em; }
     #conversejs #controlbox .set-xmpp-status .dropdown dd ul {
       z-index: 22; }
 #conversejs .toggle-controlbox {
@@ -1822,14 +1823,15 @@
       color: #818479;
       display: block;
       height: 24px;
-      line-height: 16px;
       overflow-y: hidden;
-      padding: 0.5em 1em;
+      padding: 0.3em 1em;
       text-shadow: 0 1px 0 #FAFAFA; }
       #conversejs #converse-roster .roster-contacts dd:hover {
         background-color: #DCF9F6; }
-        #conversejs #converse-roster .roster-contacts dd:hover a.remove-xmpp-contact {
+        #conversejs #converse-roster .roster-contacts dd:hover .remove-xmpp-contact {
           display: inline-block; }
+        #conversejs #converse-roster .roster-contacts dd:hover .open-chat {
+          width: 80%; }
       #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact.request-actions {
         margin-left: 0.5em;
         float: right; }
@@ -1856,8 +1858,6 @@
         margin: 0;
         display: none;
         color: #818479; }
-      #conversejs #converse-roster .roster-contacts dd a .open-chat {
-        width: 80%; }
   #conversejs #converse-roster span.pending-contact-name {
     width: 80%; }
   #conversejs #converse-roster span.req-contact-name {

mockup/controlbox.html

@@ -136,13 +136,13 @@
                     </dd>
                 </dl>
                 <div id="converse-roster">
-                    <span class="roster-filter-group input-button-group">
+                    <form class="pure-form roster-filter-group input-button-group">
                         <input class="roster-filter" placeholder="Type to filter">
                         <select class="filter-type">
                             <option value="contacts">Contacts</option>
                             <option value="groups">Groups</option>
                         </select>
-                    </span>
+                    </form>
 
                     <dl class="roster-contacts" style="display: block;">
                         <dt class="roster-group" style="display: block;">

mockup/index.html

@@ -97,7 +97,7 @@
                     </dd>
                 </dl>
                 <div id="converse-roster">
-                    <form class="pure-form input-button-group">
+                    <form class="pure-form roster-filter-group input-button-group">
                         <input class="roster-filter" placeholder="Type to filter">
                         <select class="filter-type">
                             <option value="contacts">Contacts</option>

sass/_chatbox.scss

@@ -23,7 +23,7 @@
         }
     }
     .chatbox-btn {
-        border-radius: 5px;
+        border-radius: $chatbox-border-radius;
         border: 1px solid white;
         color: white;
         cursor: pointer;

sass/_controlbox.scss

@@ -268,6 +268,7 @@
         .fancy-dropdown {
             border: 1px solid $light-background-border-color;
             height: $controlbox-dropdown-height;
+            border-radius: 4px;
             text-align: left;
             .choose-xmpp-status {
                 width: 155px;
@@ -362,7 +363,7 @@
 
         .set-xmpp-status {
             background: none;
-            margin: 0.75em 1em 0.5em 1em;
+            margin: 1em 1em 0.5em 1em;
             .dropdown dd ul {
                 z-index: 22;
             }

sass/_roster.scss

@@ -82,15 +82,17 @@
             color: $text-color;
             display: block;
             height: 24px;
-            line-height: 16px;
             overflow-y: hidden;
-            padding: 0.5em 1em;
+            padding: 0.3em 1em;
             text-shadow: 0 1px 0 $text-shadow-color;
             &:hover {
                 background-color: $highlight-color;
-                a.remove-xmpp-contact {
+                .remove-xmpp-contact {
                     display: inline-block;
                 }
+                .open-chat {
+                    width: 80%;
+                }
             }
             &.requesting-xmpp-contact {
                 &.request-actions {
@@ -128,9 +130,6 @@
                     display: none;
                     color: $text-color;
                 }
-                .open-chat {
-                    width: 80%;
-                }
             }
         }
     }

src/templates/roster.html

@@ -1,4 +1,4 @@
-<form class="pure-form input-button-group">
+<form class="pure-form roster-filter-group input-button-group">
     <input style="display: none;" class="roster-filter" placeholder="{{placeholder}}">
     <select style="display: none;" class="filter-type">
         <option value="contacts">{{label_contacts}}</option>