More mockup work.

- Added requesting contacts.
- Fix contact width on hover.
- Add tooltips for status icons

converse.css

@@ -592,7 +592,7 @@ dd.available-chatroom:hover a.open-room {
     width: 85%;
 }
 #converse-roster  dd:hover a.open-chat {
-    width: 75%;
+    width: 70%;
 }
 
 .chatbox,

mockup.html

@@ -82,28 +82,44 @@
                     </dd>
                 </dl>
                 <dl id="converse-roster" style="display: block;">
-                    <dt id="xmpp-contact-requests" style="display: none;">Contact requests</dt>
                     <dt id="xmpp-contacts" style="display: block;">My contacts</dt>
                     <dd class="online current-xmpp-contact">
-                        <span class="icon-bubble"></span>
-                        <a class="open-chat" title="Click to chat with this contact" href="#">John Smith</a>
+                        <a class="open-chat" title="Click to chat with this contact" href="#">
+                        <span class="icon-bubble" title="This contact is online"></span>
+                        John Smith</a>
                         <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
                     </dd>
                     <dd class="dnd current-xmpp-contact">
-                        <span class="icon-bubble-2"></span>
-                        <a class="open-chat" title="Click to chat with this contact" href="#">Francois Pienaar</a>
+                        <a class="open-chat" title="Click to chat with this contact" href="#">
+                        <span class="icon-bubble-2" title="this contact is away"></span>
+                        Francois Pienaar</a>
                         <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
                     </dd>
                     <dd class="busy current-xmpp-contact">
-                        <span class="icon-busy"></span>
-                        <a class="open-chat" title="Click to chat with this contact" href="#">Gary Teichmann</a>
-                        <a class="remove-xmpp-contact icon-remove-2" title="Click to remove this contact" href="#"></a>
+                        <a class="open-chat" title="Click to chat with this contact" href="#">
+                        <span class="icon-busy" title="This contact is busy"></span>
+                        Gary Teichmann</a>
+                        <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
                     </dd>
                     <dd class="offline current-xmpp-contact">
-                        <span class="icon-offline"></span>
-                        <a class="open-chat" title="Click to chat with this contact" href="#">Corné Krige</a>
+                        <a class="open-chat" title="Click to chat with this contact" href="#">
+                        <span class="icon-offline" title="This contact is offline"></span>
+                        Corné Krige</a>
                         <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
                     </dd>
+
+                    <dt id="xmpp-contact-requests" style="display: block;">Contact requests</dt>
+                    <dd class="offline requesting-xmpp-contact">
+                        <div>Dominik Beyer</div>
+                        <button type="button" class="accept-xmpp-request">Accept</button>
+                        <button type="button" class="decline-xmpp-request">Decline</button>
+                    </dd>
+                    <dd class="offline requesting-xmpp-contact">
+                        <div>Mohamad Stet</div>
+                        <button type="button" class="accept-xmpp-request">Accept</button>
+                        <button type="button" class="decline-xmpp-request">Decline</button>
+                    </dd>
+
                     <dt id="pending-xmpp-contacts" style="display: block;">Pending contacts</dt>
                     <dd class="offline pending-xmpp-contact"><span>André Vos</span>
                         <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>