Mockup: add chatroom with error, fix box heights.

converse.css

@@ -55,7 +55,7 @@ span.spinner.hor_centered {
 
 #toggle-controlbox {
     position: fixed;
-    font-size: 80%;
+    font-size: 70%;
     bottom: 0;
     right: 0;
     border-top-right-radius: 4px;
@@ -63,9 +63,9 @@ span.spinner.hor_centered {
     background: #e3e2e2;
     border: 1px solid #c3c3c3;
     border-bottom: none;
-    padding: 0.25em 0.5em;
-    margin-right: 1em;
-    height: 1.1em;
+    padding: 1px 3px;
+    margin-right: 15px;
+    height: 16px;
 }
 
 #connecting-to-chat {
@@ -222,7 +222,7 @@ li.chat-info {
 div#settings,
 div#chatrooms,
 div#login-dialog {
-    height: 272px;
+    height: 274px;
 }
 
 p.not-implemented {
@@ -605,18 +605,12 @@ dd.available-chatroom:hover a.open-room {
     border-radius: 4px;
 }
 
-.chatbox {
-    width: 201px;
-}
-
 .chatroom {
     width: 300px;
-    height: 311px;
 }
 
 .oc-chat-content {
-    height:272px;
-    width: 199px;
+    height:274px;
     padding: 0;
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
@@ -742,7 +736,6 @@ div#login-dialog,
 div#settings {
     border: 0;
     font-size: 14px;
-    width: 199px;
     background-color: white;
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;

mockup.html

@@ -171,18 +171,15 @@
             <p class="user-custom-message"></p>
             <p></p>
         </div>
-    <div class="chat-content">
-        <div class="chat-message"><span class="chat-message-me">19:39 me:&nbsp;</span><span class="chat-message-content">Hello world</span></div>
-    </div>
-    <form class="sendXMPPMessage" action="" method="post">
-        <textarea type="text" class="chat-textarea" placeholder="Personal message"></textarea>
-    </form>
-    </div>
-    </div>
-    <div id="toggle-controlbox">
-        <a href="#" class="chat toggle-online-users">
-            <strong class="conn-feedback">Toggle chat</strong> <strong style="display: none" id="online-count">(0)</strong>
-        </a>
+        <div class="chat-content">
+            <div class="chat-message">
+                <span class="chat-message-me">19:39 me:&nbsp;</span>
+                <span class="chat-message-content">Hello world</span>
+            </div>
+        </div>
+        <form class="sendXMPPMessage" action="" method="post">
+            <textarea type="text" class="chat-textarea" placeholder="Personal message"></textarea>
+        </form>
     </div>
 
     <div class="chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392" style="opacity: 1; display: inline;">
@@ -221,6 +218,32 @@
         </div>
     </div>
 
+    <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="configure-chatroom-button" style="display:none">&nbsp;</a>
+            <div class="chat-title"> problematic </div>
+            <p class="chatroom-topic"></p>
+            <p></p>
+        </div>
+        <div class="chat-body">
+            <div class="chatroom-form-container">
+                <form class="chatroom-form">
+                    <legend>This chatroom requires a password</legend>
+                    <label>Password: <input type="password" name="password"></label>
+                </form>
+            </div>
+        </div>
+    </div>
+
+
+    </div>
+    <div id="toggle-controlbox">
+        <a href="#" class="chat toggle-online-users">
+            <strong class="conn-feedback">Toggle chat</strong> <strong style="display: none" id="online-count">(0)</strong>
+        </a>
+    </div>
+
 </div>
 
 </body>