Give proper names and tweak font colors

converse.css

@@ -8,6 +8,14 @@
 
 @import url("fonticons/style.css");
 
+#collective-xmpp-chat-data {
+  color: rgb(89, 89, 89);
+}
+
+#collective-xmpp-chat-data input {
+  color: rgb(89, 89, 89);
+}
+
 .hidden {
     display: none
 }
@@ -144,7 +152,7 @@ ul.participant-list li.moderator {
 .chat-content {
     padding: 0.3em;
     font-size: 13px;
-    color: #333333;
+    color: rgb(89, 89, 89);
     height:193px;
     overflow-y:auto;
     border:1px solid #999;
@@ -570,7 +578,7 @@ dd.available-chatroom:hover a.open-room {
     width: 22px;
     margin: 0;
     display: none;
-    color: rgb(102, 102, 102);
+    color: rgb(89, 89, 89);
 }
 
 #converse-roster  dd:hover a.remove-xmpp-contact {
@@ -721,7 +729,6 @@ ul#controlbox-tabs li a {
 
 ul#controlbox-tabs a.current, ul#controlbox-tabs a.current:hover {
     box-shadow: none;
-    color: #000;
     border-bottom: 0;
     height: 35px;
 }
@@ -794,7 +801,7 @@ form.add-xmpp-contact input {
     cursor:pointer; 
     display:block; 
     padding: 3px 7px 0 5px;
-    color: rgb(102, 102, 102);
+    color: rgb(89, 89, 89);
 }
 
 .chatbox .dropdown dd ul {

mockup.html

@@ -96,29 +96,29 @@
                     <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="#">opkode@jabber.org</a>
+                        <a class="open-chat" title="Click to chat with this contact" href="#">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="#">manuela@opkode.im</a>
+                        <a class="open-chat" title="Click to chat with this contact" href="#">Sarah Robertson</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="#">opkode@jappix.com</a>
+                        <a class="open-chat" title="Click to chat with this contact" href="#">Ian Blakey</a>
                         <a class="remove-xmpp-contact icon-remove-2" 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="#">johndoe777@jappix.com</a>
+                        <a class="open-chat" title="Click to chat with this contact" href="#">Gordon McMillan</a>
                         <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
                     </dd>
                     <dt id="pending-xmpp-contacts" style="display: block;">Pending contacts</dt>
-                    <dd class="offline pending-xmpp-contact"><span>763bec9a@area51.gigaspeedsurfer.de</span>
+                    <dd class="offline pending-xmpp-contact"><span>Frank Grey</span>
                         <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
                     </dd>
-                    <dd class="offline pending-xmpp-contact"><span>ufon@jabbim.cz</span>
+                    <dd class="offline pending-xmpp-contact"><span>Benedict Cumberpatch</span>
                         <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
                     </dd>
                 </dl>
@@ -139,7 +139,7 @@
         <div class="chat-head chat-head-chatbox">
             <a class="close-chatbox-button">X</a>
             <a href="" target="_blank" class="user">
-                <div class="chat-title">opkode@jabber.org</div>
+                <div class="chat-title">John Smith</div>
             </a>
             <p class="user-custom-message"></p>
             <p></p>