mockup: configure close and configure buttons

converse.css

@@ -362,11 +362,11 @@ form.search-xmpp-contact input {
 
 a.configure-chatroom-button,
 a.close-chatbox-button {
-    margin-top: 0.2em;
-    margin-right: 0.5em;
+    font-size: 13px;
+    padding: 2px 2px 1px 2px;
+    margin-right: 3px;
     cursor: pointer;
     float: right;
-    width: 12px;
     -moz-box-shadow:inset 0 1px 0 0 #ffffff;
     -webkit-box-shadow:inset 0 1px 0 0 #ffffff;
     box-shadow:inset 0 1px 0 0 #ffffff;
@@ -379,18 +379,10 @@ a.close-chatbox-button {
     border:1px solid #888;
     display:inline-block;
     color: #666 !important;
-    font-family:arial;
-    font-size:12px;
-    font-weight:bold;
     text-decoration:none;
     text-shadow:1px 1px 0 #ffffff;
 }
 
-a.configure-chatroom-button {
-    padding:0 4px;
-    background: #ffffff url('images/preferences-system.png') no-repeat center center;
-}
-
 .close-chatbox-button {
     padding: 0 2px 0 6px;
 }
@@ -424,7 +416,7 @@ a.configure-chatroom-button {
 .chatroom-form {
     background: white;
     font-size: 12px;
-    padding: 0;
+    padding: 10px 5px;
 }
 
 .chat-body p {

mockup.html

@@ -23,7 +23,10 @@
     <div id="collective-xmpp-chat-data">
         <div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
             <div class="chat-head oc-chat-head">
-                <ul id="controlbox-tabs"><li><a class="current" href="#login">Sign in</a></li></ul><a class="close-chatbox-button">X</a></div>
+                <ul id="controlbox-tabs">
+                    <li><a class="current" href="#login">Sign in</a></li>
+                </ul>
+                <a class="close-chatbox-button icon-close"></a></div>
                 <div id="controlbox-panes">
                     <div id="login-dialog">
                     <form id="converse-login">
@@ -41,7 +44,7 @@
                     <li><a class="s current" href="#users">Contacts</a></li>
                     <li><a class="s" href="#chatrooms">Rooms</a></li>
                 </ul>
-                <a class="close-chatbox-button">X</a>
+                <a class="close-chatbox-button icon-close"></a>
             </div>
         <div id="controlbox-panes">
             <div id="users" class="oc-chat-content" style="display: block;">
@@ -166,7 +169,7 @@
 
     <div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f" style="opacity: 1; display: inline;">
         <div class="chat-head chat-head-chatbox">
-            <a class="close-chatbox-button">X</a>
+            <a class="close-chatbox-button icon-close"></a>
             <a href="" target="_blank" class="user">
                 <div class="chat-title">John Smith</div>
             </a>
@@ -186,8 +189,8 @@
 
     <div class="chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392" style="opacity: 1; display: inline;">
         <div class="chat-head chat-head-chatroom">
-            <a class="close-chatbox-button">X</a>
-            <a class="configure-chatroom-button" style="">&nbsp;</a>
+            <a class="close-chatbox-button icon-close"></a>
+            <a class="configure-chatroom-button icon-wrench" style=""></a>
             <div class="chat-title"> converse.js </div>
             <p class="chatroom-topic"></p>
             <p></p>
@@ -222,7 +225,7 @@
 
     <div class="chatroom" id="6d8627960a0cb066d9216742f3edccc3dbbf85a9" style="opacity: 1; display: inline;">
         <div class="chat-head chat-head-chatroom">
-            <a class="close-chatbox-button">X</a>
+            <a class="close-chatbox-button icon-close"></a>
             <a class="configure-chatroom-button" style="display:none">&nbsp;</a>
             <div class="chat-title"> problematic </div>
             <p class="chatroom-topic"></p>