More CSS and markup fixes after looking in FF.

Changed the icon-* selector to apply only to :before (fixes ugly font rendering in FF).

css/converse.css

@@ -229,7 +229,7 @@
   /* Better Font Rendering =========== */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale; }
-#conversejs [class^="icon-"], #conversejs [class*=" icon-"] {
+#conversejs [class^="icon-"]:before, #conversejs [class*=" icon-"]:before {
   background-position: 14px 14px;
   background-image: none;
   font-family: 'Converse-js';
@@ -1026,8 +1026,6 @@
     font-size: 14px;
     padding: 0.25em;
     min-height: 0; }
-  #conversejs input[type=text] {
-    height: 26px; }
   #conversejs strong {
     font-weight: 700; }
   #conversejs ol, #conversejs ul {
@@ -1235,7 +1233,7 @@
   float: right;
   font-size: 9px;
   margin: 0 0.2em;
-  padding: 5px;
+  padding: 0.5em;
   text-decoration: none; }
   #conversejs .chatbox-btn:active {
     position: relative;
@@ -1656,13 +1654,11 @@
     border: 1px solid #B1BFC4;
     height: 25px;
     border-radius: 4px;
-    text-align: left; }
+    text-align: left;
+    padding: 0;
+    padding-left: 0.3em; }
     #conversejs #controlbox .fancy-dropdown .choose-xmpp-status {
       width: 155px; }
-      #conversejs #controlbox .fancy-dropdown .choose-xmpp-status span {
-        padding-right: 5px;
-        padding-left: 5px;
-        float: left; }
     #conversejs #controlbox .fancy-dropdown .choose-xmpp-status,
     #conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form {
       text-shadow: 0 1px 0 #ffffff;
@@ -1670,14 +1666,11 @@
       text-overflow: ellipsis;
       white-space: nowrap;
       display: inline; }
-    #conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form span {
-      float: left; }
   #conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message {
     float: right;
     clear: right;
-    height: 22px;
     width: 12px;
-    margin: 0px 5px 0 0;
+    margin-right: 0.3em;
     color: #2A9D8F; }
   #conversejs #controlbox .controlbox-pane {
     background-color: white;

mockup/controlbox.html

@@ -79,47 +79,37 @@
             <div id="users" class="controlbox-pane" style="display: block;">
                 <form class="set-xmpp-status" action="" method="post">
                     <span id="xmpp-status-holder">
-                    <dl id="target" class="dropdown">
-                        <dt id="fancy-xmpp-status-select" class="fancy-dropdown">
-                            <div class="xmpp-status">
-                                <a class="choose-xmpp-status online" data-value="I am online" href="#" title="Click to change your chat status">
-                                    <span class="icon-online"></span>
-                                    I am online
-                                </a>
-                                <a class="change-xmpp-status-message icon-pencil" href="#" title="Click here to write a custom status message"></a>
-                            </div>
-                        </dt>
-                        <dd>
-                            <ul style="display: none;" class="xmpp-status-menu">
-                                <li>
-                                    <a href="#" class="online" data-value="online">
-                                    <span class="icon-online"></span>
-                                    Online</a>
-                                </li>
-                                <li>
-                                    <a href="#" class="dnd" data-value="dnd">
-                                    <span class="icon-dnd"></span>
-                                    Busy</a>
-                                </li>
-                                <li>
-                                    <a href="#" class="away" data-value="away">
-                                    <span class="icon-away"></span>
-                                    Away</a>
-                                </li>
-                                <li>
-                                    <a href="#" class="offline" data-value="offline">
-                                    <span class="icon-offline"></span>
-                                    Offline</a>
-                                </li>
-                            </ul>
-                        </dd>
-                    </dl>
+                        <dl id="target" class="dropdown">
+                            <dt id="fancy-xmpp-status-select" class="fancy-dropdown">
+                                <div class="xmpp-status">
+                                    <a class="choose-xmpp-status online icon-online" data-value="I am online" href="#" title="Click to change your chat status">
+                                        I am online
+                                    </a>
+                                    <a class="change-xmpp-status-message icon-pencil" href="#" title="Click here to write a custom status message"></a>
+                                </div>
+                            </dt>
+                            <dd>
+                                <ul style="display: none;" class="xmpp-status-menu">
+                                    <li>
+                                        <a href="#" class="online icon-online" data-value="online">Online</a>
+                                    </li>
+                                    <li>
+                                        <a href="#" class="dnd icon-dnd" data-value="dnd">Busy</a>
+                                    </li>
+                                    <li>
+                                        <a href="#" class="away icon-away" data-value="away">Away</a>
+                                    </li>
+                                    <li>
+                                        <a href="#" class="offline icon-offline" data-value="offline">Offline</a>
+                                    </li>
+                                </ul>
+                            </dd>
+                        </dl>
                     </span>
                 </form>
                 <dl class="add-converse-contact dropdown">
                     <dt id="xmpp-contact-search" class="fancy-dropdown">
-                        <a class="toggle-xmpp-contact-form" href="#" title="Click to add new chat contacts">
-                            <span class="icon-plus"></span>
+                        <a class="toggle-xmpp-contact-form icon-plus" href="#" title="Click to add new chat contacts">
                             Add a contact
                         </a>
                     </dt>
@@ -127,7 +117,7 @@
                         <ul>
                             <li>
                                 <form class="pure-form add-xmpp-contact">
-                                    <input type="text" name="identifier" class="username" placeholder="Contact username">
+                                    <input type="text" name="identifier" class="username" placeholder="e.g. user@example">
                                     <button class="pure-button button-primary" type="submit">Add</button>
                                 </form>
                             </li>
@@ -146,7 +136,7 @@
 
                     <dl class="roster-contacts" style="display: block;">
                         <dt class="roster-group" style="display: block;">
-                            <a href="#" data-group="Colleagues" class="group-toggle icon-opened" title="Click to hide these contacts">Colleagues</a>
+                        <a href="#" data-group="Colleagues" class="group-toggle" title="Click to hide these contacts"><i class="icon-opened"></i>Colleagues</a>
                         </dt>
                         <dd class="online current-xmpp-contact">
                             <a class="open-chat" title="Name: Victor Matfield JID: victor.matfield@localhost Click to chat with this contact" href="#">
@@ -170,7 +160,7 @@
                             <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
                         </dd>
                         <dt class="roster-group" style="display: block;">
-                            <a href="#" data-group="Family" class="group-toggle icon-opened" title="Click to hide these contacts">Family</a>
+                            <a href="#" data-group="Family" class="group-toggle" title="Click to hide these contacts"><i class="icon-opened"></i>Family</a>
                         </dt>
                         <dd class="away current-xmpp-contact">
                             <a class="open-chat" title="Click to chat with this contact" href="#">
@@ -187,7 +177,7 @@
                             <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
                         </dd>
                         <dt class="roster-group" style="display: block;">
-                            <a href="#" data-group="Friends" class="group-toggle icon-opened" title="Click to hide these contacts">Friends</a>
+                            <a href="#" data-group="Friends" class="group-toggle" title="Click to hide these contacts"><i class="icon-opened"></i>Friends</a>
                         </dt>
                         <dd class="online current-xmpp-contact">
                             <a class="open-chat" title="Click to chat with this contact" href="#">
@@ -204,7 +194,7 @@
                             <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
                         </dd>
                         <dt class="roster-group" style="display: block;">
-                            <a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Ungrouped</a>
+                            <a href="#" class="group-toggle" title="Click to hide these contacts"><i class="icon-opened"></i>Ungrouped</a>
                         </dt>
                         <dd class="online current-xmpp-contact">
                             <a class="open-chat" title="Click to chat with this contact" href="#">
@@ -214,7 +204,7 @@
                             <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
                         </dd>
                         <dt class="roster-group" id="xmpp-contact-requests" style="display: block;">
-                            <a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Contact Requests</a>
+                            <a href="#" class="group-toggle" title="Click to hide these contacts"><i class="icon-opened"></i>Contact Requests</a>
                         </dt>
                         <dd class="offline requesting-xmpp-contact">
                             <span class="req-contact-name" title="Name: Bob Skinstad JID: bob.skinstad@localhost">Bob Skinstad</span>

mockup/index.html

@@ -43,8 +43,7 @@
                     <dl id="target" class="dropdown">
                         <dt id="fancy-xmpp-status-select" class="fancy-dropdown">
                             <div class="xmpp-status">
-                                <a class="choose-xmpp-status online" data-value="I am online" href="#" title="Click to change your chat status">
-                                    <span class="icon-online"></span>
+                                <a class="choose-xmpp-status online icon-online" data-value="I am online" href="#" title="Click to change your chat status">
                                     I am online
                                 </a>
                                 <a class="change-xmpp-status-message icon-pencil" href="#" title="Click here to write a custom status message"></a>
@@ -53,23 +52,16 @@
                         <dd>
                             <ul style="display: none;" class="xmpp-status-menu">
                                 <li>
-                                    <a href="#" class="online" data-value="online">
-                                    <span class="icon-online"></span>
-                                    Online</a>
+                                    <a href="#" class="online icon-online" data-value="online">Online</a>
                                 </li>
                                 <li>
-                                    <a href="#" class="dnd" data-value="dnd">
-                                    <span class="icon-dnd"></span>
-                                    Busy</a>
+                                    <a href="#" class="dnd icon-dnd" data-value="dnd">Busy</a>
                                 </li>
                                 <li>
-                                    <a href="#" class="away" data-value="away">
-                                    <span class="icon-away"></span>
-                                    Away</a>
+                                    <a href="#" class="away icon-away" data-value="away">Away</a>
                                 </li>
                                 <li>
-                                    <a href="#" class="offline" data-value="offline">
-                                    <span class="icon-offline"></span>
+                                    <a href="#" class="offline icon-offline" data-value="offline">
                                     Offline</a>
                                 </li>
                             </ul>
@@ -79,8 +71,7 @@
                 </form>
                 <dl class="add-converse-contact dropdown">
                     <dt id="xmpp-contact-search" class="fancy-dropdown">
-                        <a class="toggle-xmpp-contact-form" href="#" title="Click to add new chat contacts">
-                            <span class="icon-plus"></span>
+                        <a class="toggle-xmpp-contact-form icon-plus" href="#" title="Click to add new chat contacts">
                             Add a contact
                         </a>
                     </dt>
@@ -247,13 +238,13 @@
             <div class="dragresize dragresize-topleft"></div>
             <div class="dragresize dragresize-left"></div>
             <div class="chat-head chat-head-chatbox">
-                <a class="chatbox-btn close-chatbox-button icon-close" title="Close this chat box"></a>
-                <a class="chatbox-btn toggle-chatbox-button icon-minus" title="Minimize this chat box"></a>
-                <a class="chatbox-btn toggle-chatbox-button icon-eye" title="View more information on this person"></a>
+                <a class="chatbox-btn close-chatbox-button icon-close"></a>
+                <a class="chatbox-btn toggle-chatbox-button icon-minus"></a>
+                <a class="chatbox-btn toggle-chatbox-button icon-eye"></a>
                 <canvas height="31px" width="31px" class="avatar" style="background-color: black"></canvas>
                 <div class="chat-title">
                     <a href="http://opkode.com" target="_blank" class="user">
-                        Jan-Carel Brand
+                        JC Brand
                     </a>
                 </div>
                 <p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>

sass/_chatbox.scss

@@ -44,7 +44,7 @@
         float: right;
         font-size: $box-close-font-size;
         margin: 0 0.2em;
-        padding: 5px;
+        padding: 0.5em;
         text-decoration: none;
         &:active {
             position: relative;

sass/_controlbox.scss

@@ -268,15 +268,12 @@
         .fancy-dropdown {
             border: 1px solid $light-background-border-color;
             height: $controlbox-dropdown-height;
-            border-radius: 4px;
+            border-radius: $chatbox-border-radius;
             text-align: left;
+            padding: 0;
+            padding-left: 0.3em;
             .choose-xmpp-status {
                 width: 155px;
-                span {
-                    padding-right: 5px;
-                    padding-left: 5px;
-                    float: left;
-                }
             }
             .choose-xmpp-status,
             .toggle-xmpp-contact-form {
@@ -286,17 +283,13 @@
                 white-space: nowrap;
                 display: inline;
             }
-            .toggle-xmpp-contact-form span {
-                float: left;
-            }
         }
         #fancy-xmpp-status-select {
             a.change-xmpp-status-message {
                 float: right;
                 clear: right;
-                height: 22px;
                 width: 12px;
-                margin: 0px 5px 0 0;
+                margin-right: 0.3em;
                 color: $link-color;
             }
         }

sass/_fonts.scss

@@ -132,7 +132,7 @@
         -moz-osx-font-smoothing: grayscale;
     }
 
-    [class^="icon-"], [class*=" icon-"] {
+    [class^="icon-"]:before, [class*=" icon-"]:before {
         background-position: 14px 14px;
         background-image: none;
         font-family: 'Converse-js';

sass/_normalize.scss

@@ -38,10 +38,6 @@
         min-height: 0;
     }
 
-    input[type=text] {
-        height: 26px;
-    }
-
     strong {
         font-weight: 700;
     }

src/templates/add_contact_dropdown.html

@@ -1,8 +1,6 @@
 <dl class="add-converse-contact dropdown">
     <dt id="xmpp-contact-search" class="fancy-dropdown">
-        <a class="toggle-xmpp-contact-form" href="#"
-            title="{{label_click_to_chat}}">
-        <span class="icon-plus"></span>{{label_add_contact}}</a>
+        <a class="toggle-xmpp-contact-form icon-plus" href="#" title="{{label_click_to_chat}}"> {{label_add_contact}}</a>
     </dt>
     <dd class="search-xmpp" style="display:none"><ul></ul></dd>
 </dl>

src/templates/chat_status.html

@@ -1,11 +1,6 @@
 <div class="xmpp-status">
-    <a class="choose-xmpp-status {{chat_status}}"
-       data-value="{{status_message}}"
-       href="#" title="{{desc_change_status}}">
-
-        <span class="icon-{{chat_status}}"></span>{{status_message}}
+    <a class="choose-xmpp-status {{chat_status}} icon-{{chat_status}}" data-value="{{status_message}}" href="#" title="{{desc_change_status}}">
+        {{status_message}}
     </a>
-    <a class="change-xmpp-status-message icon-pencil"
-        href="#"
-        title="{{desc_custom_status}}"></a>
+    <a class="change-xmpp-status-message icon-pencil" href="#" title="{{desc_custom_status}}"></a>
 </div>