More CSS/styling updates

- Remove currently unused pure modules (forms and menus)
- Update forms (not all yet) markup and css
- Move all controlbox mockups to mockup/controlbox.html

Forms look much better now in mockups but JS and templates still needs updating.

sass/_controlbox.scss

@@ -73,8 +73,7 @@
         }
 
         #converse-register, #converse-login {
-            margin: 2em 1em 1em 1em;
-            background: white;
+            margin-top: 2em;
             .login-anon {
                 height: auto;
                 white-space: normal;
@@ -91,8 +90,7 @@
             }
             input {
                 width: 100%;
-                height: 30px;
-                margin: 1em 0;
+                margin: 0.5em 0;
             }
         }
         #users {
@@ -102,35 +100,24 @@
         }
 
         #chatrooms {
-            overflow-y: auto;
             form.add-chatroom {
-                background: none;
-                padding: 0.5em;
                 input[type=button],
                 input[type=submit],
                 input[type=text] {
-                    margin: 0;
                     width: 100%;
-                    padding: 0.25em;
-                }
-                span.spinner,
-                input[type=button],
-                input[type=submit] {
-                    margin-top: 0.5em;
-                    display: table-cell;
-                    width: auto;
                 }
                 input[type=submit] {
                     color: $save-button-color;
                 }
             }
             #available-chatrooms {
+                padding: 0 1em 2em 1em;
                 text-align: left;
                 dt {
-                    font-weight: normal;
-                    color: $text-color;
                     border: none;
-                    padding: 0.5em;
+                    color: $text-color;
+                    font-weight: normal;
+                    padding: 0;
                     text-shadow: 0 1px 0 $text-shadow-color;
                 }
                 dd.available-chatroom {
@@ -140,7 +127,8 @@
                     display: block;
                     font-weight: bold;
                     overflow: hidden;
-                    padding: 0.25em 0.5em;
+                    padding: 0;
+                    padding-top: 0.5em;
                     text-overflow: ellipsis;
                     text-shadow: 0 1px 0 $text-shadow-color;
                     white-space: nowrap;
@@ -341,7 +329,7 @@
             width: 100%;
             height: 289px;
             @include calc(height, '100% - #{$chat-head-height}');
-            overflow-y: hidden;
+            overflow-y: scroll;
             overflow-x: hidden;
             label {
                 font-size: $font-size;

sass/_core.scss

@@ -115,10 +115,6 @@
     .error {
         color: red;
     }
-    input.error {
-        border: 1px solid red;
-    }
-
     .reg-feedback {
         font-size: 85%;
     }
@@ -164,14 +160,35 @@
         display: block !important;
     }
 
+    .pure-button {
+        border-radius: $chatbox-border-radius;
+    }
+
     form {
         &.pure-form.converse-form {
-            padding: 1.5em;
+            background: white;
+            margin: 1em;
+            legend {
+                color: $text-color;
+            }
             label {
                 margin-top: 1em;
             }
-            input {
-                margin-bottom: 1em;
+            input[type=text],
+            input[type=password],
+            input[type=number],
+            input[type=button],
+            input[type=submit] {
+                height: 2.2em;
+            }
+            input[type=button],
+            input[type=submit] {
+                padding-left: 1em;
+                padding-right: 1em;
+            }
+            input.error {
+                border: 1px solid red;
+                color: $text-color;
             }
             .form-help {
                 color: gray;

sass/_normalize.scss

 #conversejs {
     @import "pure/base";
-    @import "pure/grids";
     @import "pure/forms";
     @import "pure/buttons";
-    @import "pure/menus";
 
     @include box-sizing(border-box);
     *, *:before, *:after {
@@ -66,17 +64,4 @@
         color: $link-color;
         text-shadow: none;
     }
-
-    form {
-        &.pure-form.converse-form {
-            padding: 1.5em;
-            label {
-                margin-top: 1em;
-            }
-            input {
-                margin-bottom: 1em;
-            }
-        }
-    }
-
 }

src/templates/login_panel.html

-<form class="pure-form pure-form-stacked" id="converse-login" method="post">
+<form class="pure-form pure-form-stacked converse-form" id="converse-login" method="post">
     {[ if (auto_login) { ]}
         <span class="spinner login-submit"/>
     {[ } ]}
@@ -8,7 +8,7 @@
             <input type="text" name="jid" placeholder="{{placeholder_username}}">
             <label>{{label_password}}</label>
             <input type="password" name="password" placeholder="{{placeholder_password}}">
-            <input class="submit" type="submit" value="{{label_login}}">
+            <input class="pure-button" type="submit" value="{{label_login}}">
             <span class="conn-feedback"></span>
         {[ } ]}
         {[ if (authentication == ANONYMOUS) { ]}

src/templates/register_panel.html

-<form id="converse-register" class="pure-form">
+<form id="converse-register" class="pure-form converse-form">
     <span class="reg-feedback"></span>
     <label>{{label_domain}}</label>
     <input type="text" name="domain" placeholder="{{domain_placeholder}}">

src/templates/registration_request.html

 <span class="spinner login-submit"/>
 <p class="info">{{info_message}}</p>
-<button class="cancel hor_centered">{{cancel}}</button>
+<button class="pure-button cancel hor_centered">{{cancel}}</button>

src/templates/room_panel.html

-<form class="add-chatroom" action="" method="post">
+<form class="pure-form pure-form-stacked converse-form add-chatroom" action="" method="post">
+    <fieldset>
         <label>{{label_room_name}}</label>
-    <input type="text" name="chatroom" class="new-chatroom-name"
-        placeholder="{{label_room_name}}"/>
-    <label>{{label_nickname}}</label>
-    <input type="text" name="nick" class="new-chatroom-nick"
-        placeholder="{{label_nickname}}"/>
+        <input type="text" name="chatroom" class="new-chatroom-name" placeholder="{{label_room_name}}"/>
+        <label>{{label_nickname}}</label> <input type="text" name="nick" class="new-chatroom-nick" placeholder="{{label_nickname}}"/>
+        <input type="submit" class="pure-button" name="join" value="{{label_join}}"/>
+    </fieldset>
+    <fieldset>
         {[ if (server_input_type != 'hidden') { ]}
             <label{{server_label_global_attr}}>{{label_server}}</label>
         {[ } ]}
-    <input type="{{server_input_type}}" name="server" class="new-chatroom-server"
-        placeholder="{{label_server}}"/>
-    <div class="button-group">
-        <input type="submit" class="left" name="join" value="{{label_join}}"/>
-        <input type="button" class="right" name="show" id="show-rooms" value="{{label_show_rooms}}"/>
-    </div>
+        <input type="{{server_input_type}}" name="server" class="new-chatroom-server" placeholder="{{label_server}}"/>
+        <input type="button" class="pure-button" name="show" id="show-rooms" value="{{label_show_rooms}}"/>
+    </fieldset>
 </form>
 <dl id="available-chatrooms"></dl>

src/utils.js

@@ -10,7 +10,7 @@
 
     var XFORM_TYPE_MAP = {
         'text-private': 'password',
-        'text-single': 'textline',
+        'text-single': 'text',
         'fixed': 'label',
         'boolean': 'checkbox',
         'hidden': 'hidden',