Style toolbar for OTR support

converse.css

@@ -124,12 +124,13 @@ span.spinner.hor_centered {
     white-space: nowrap;
     display: block;
     font-size: 12px;
+    font-weight: bold;
     padding: 0.5em 0 0 0.5em;
     cursor: default;
 }
 
 ul.participant-list li.moderator {
-    color: #FE0007;
+    color: #8f2831;
 }
 
 .chatroom .participant-list {
@@ -181,7 +182,7 @@ ul.participant-list li.moderator {
 }
 
 .chat-message-them {
-    color: #F62817;
+    color: #8f2831;
 }
 
 .chat-message-me {
@@ -772,6 +773,22 @@ ul.chat-toolbar {
     height: 20px;
 }
 
+.chat-toolbar-text {
+    font-size: 12px;
+}
+
+.not-private {
+    color: #8f2831;
+}
+
+.unverified {
+    color: #cf5300;
+}
+
+.private {
+    color: #4B7003
+}
+
 ul.chat-toolbar li {
     display: inline-block;
     list-style: none;

mockup.html

@@ -227,9 +227,12 @@
         <form class="sendXMPPMessage" action="" method="post">
             <ul class="chat-toolbar">
                 <li class="icon-happy" title="Insert a smilery"></li>
-                <li class="icon-unlocked" title="Turn on 'off-the-record' chat encryption"></li>
                 <li class="icon-camera-2" title="Enable video chat"></li>
                 <li class="icon-newspaper" title="Fetch and show this user's vCard"></li>
+                <li class="otr" title="Turn on 'off-the-record' chat encryption">
+                    <span class="chat-toolbar-text not-private">Not private</span>
+                    <span class="icon-unlocked not-private"/>
+                </li>
             </ul>
             <textarea type="text" class="chat-textarea" placeholder="Personal message"></textarea>
         </form>