Remove more images with fonticons

converse.css

@@ -321,11 +321,17 @@ dl.add-converse-contact {
    float: left; 
 }
 
+#fancy-xmpp-status-select span {
+    padding-right: 5px; 
+    padding-left: 5px; 
+}
+
 #fancy-xmpp-status-select a.change-xmpp-status-message {
-    background: url('images/pencil_icon.png') no-repeat right 3px;
     float: right;
     clear: right;
     height: 22px;
+    padding: 5px 5px 0 0;
+    color: rgb(79, 79, 79);
 }
 
 ul#found-users {
@@ -482,10 +488,6 @@ a.configure-chatroom-button {
     padding: 2px 5px 0 0;
 }
 
-.remove-xmpp-contact-dialog .ui-dialog-buttonpane {
-    border: none;
-}
-
 #converse-roster {
     height: 200px;
     overflow-y: auto;
@@ -553,7 +555,6 @@ p.room-info {
 }
 
 a.room-info {
-    background: url('images/information.png') no-repeat right top;
     width: 22px;
     height: 22px;
     float: right;
@@ -570,13 +571,12 @@ a.open-room {
 
 dd.available-chatroom:hover a.room-info {
     display: inline-block;
-}
-
-dd.available-chatroom:hover a.open-room {
-    width: 75%;
+    margin-top: 3px;
+    font-size: 15px;
 }
 
 #converse-roster dd a.remove-xmpp-contact {
+    line-height: 21px;
     float: right;
     width: 22px;
     margin: 0;
@@ -673,7 +673,7 @@ form.add-chatroom input[type=text] {
 
 form.add-chatroom input[type=button],
 form.add-chatroom input[type=submit] {
-    width: 50%;
+    width: 48%;
 }
 
 select#select-xmpp-status {
@@ -771,6 +771,10 @@ form#set-custom-xmpp-status {
     padding: 1px 2px 1px 1px;
 }
 
+#controlbox div.xmpp-status {
+    display: inline;
+}
+
 /* status dropdown styles */
 .chatbox dl.dropdown {
     margin-right: 0.5em;
@@ -796,7 +800,7 @@ form.add-xmpp-contact input {
 .chatbox .dropdown dt a span {
     cursor:pointer; 
     display:block; 
-    padding: 3px 7px 0 5px;
+    padding: 2px 7px 0 5px;
     color: rgb(79, 79, 79);
 }
 

mockup.html

@@ -49,9 +49,10 @@
                     <span id="xmpp-status-holder">
                     <dl id="target" class="dropdown">
                         <dt id="fancy-xmpp-status-select" class="fancy-dropdown">
+                            <span class="icon-bubble"></span>
                             <div class="xmpp-status">
                                 <a class="choose-xmpp-status online" data-value="I am online" href="#" title="Click to change your chat status">I am online</a>
-                                <a class="change-xmpp-status-message" href="#" title="Click here to write a custom status message"></a>
+                                <a class="change-xmpp-status-message icon-pencil" href="#" title="Click here to write a custom status message"></a>
                             </div>
                         </dt>
                         <dd>
@@ -141,10 +142,11 @@
                 <dt>Rooms on conference.opkode.im</dt>
                 <dd class="available-chatroom">
                     <a class="open-room" 
-                    data-room-jid="converse.js@conference.opkode.im"
-                    title="Click to open this room" href="#">converse.js (2)</a>
-                    <a class="room-info" data-room-jid="converse.js@conference.opkode.im" 
-                    title="Show more information on this room" href="#">&nbsp;</a>
+                        data-room-jid="converse.js@conference.opkode.im"
+                        title="Click to open this room" href="#">converse.js (2)</a>
+                    <a class="room-info icon-info-2" 
+                        data-room-jid="converse.js@conference.opkode.im" 
+                        title="Show more information on this room" href="#">&nbsp;</a>
                     <div class="room-info">
                         <p class="room-info"><strong>Description:</strong></p>
                         <p class="room-info"><strong>Occupants:</strong> 2</p>