From bf3891569e1a3e30746b8ad921763f8aa711329c Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Fri, 30 Oct 2015 18:47:13 +0000
Subject: [PATCH] Various small CSS fixes and improvements.

---
 css/converse.css          | 14 +++++++-------
 mockup/controlbox.html    |  4 ++--
 mockup/index.html         |  2 +-
 sass/_chatbox.scss        |  2 +-
 sass/_controlbox.scss     |  3 ++-
 sass/_roster.scss         | 11 +++++------
 src/templates/roster.html |  2 +-
 7 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/css/converse.css b/css/converse.css
index 6ee4e096c..1a20d1049 100644
--- a/css/converse.css
+++ b/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 {
diff --git a/mockup/controlbox.html b/mockup/controlbox.html
index 0b236a091..9e19fa0f0 100644
--- a/mockup/controlbox.html
+++ b/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;">
diff --git a/mockup/index.html b/mockup/index.html
index 145d44a6f..ccc236b65 100644
--- a/mockup/index.html
+++ b/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>
diff --git a/sass/_chatbox.scss b/sass/_chatbox.scss
index 884fe628c..0b2af6672 100644
--- a/sass/_chatbox.scss
+++ b/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;
diff --git a/sass/_controlbox.scss b/sass/_controlbox.scss
index 3d9f99b05..cefb096c6 100644
--- a/sass/_controlbox.scss
+++ b/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;
             }
diff --git a/sass/_roster.scss b/sass/_roster.scss
index 3a3d95d37..545b64daf 100644
--- a/sass/_roster.scss
+++ b/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%;
-                }
             }
         }
     }
diff --git a/src/templates/roster.html b/src/templates/roster.html
index 0c03f2e56..d488b66d4 100644
--- a/src/templates/roster.html
+++ b/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>