Updated button styles and update buttons all over the place.

converse.js

@@ -3193,8 +3193,8 @@
                 _.each($fields, function (field) {
                     $form.append(utils.xForm2webForm($(field), $stanza));
                 });
-                $form.append('<input type="submit" class="save-submit" value="'+__('Save')+'"/>');
-                $form.append('<input type="button" class="cancel-submit" value="'+__('Cancel')+'"/>');
+                $form.append('<input type="submit" class="pure-button button-primary" value="'+__('Save')+'"/>');
+                $form.append('<input type="button" class="pure-button button-cancel" value="'+__('Cancel')+'"/>');
                 $form.on('submit', this.saveConfiguration.bind(this));
                 $form.find('input[type=button]').on('click', this.cancelConfiguration.bind(this));
             },
@@ -5737,9 +5737,9 @@
                     }.bind(this));
                 }
                 if (this.fields) {
-                    $form.append('<input type="submit" class="save-submit" value="'+__('Register')+'"/>');
+                    $form.append('<input type="submit" class="pure-button button-primary" value="'+__('Register')+'"/>');
                     $form.on('submit', this.submitRegistrationForm.bind(this));
-                    $form.append('<input type="button" class="cancel-submit" value="'+__('Cancel')+'"/>');
+                    $form.append('<input type="button" class="pure-button button-cancel" value="'+__('Cancel')+'"/>');
                     $form.find('input[type=button]').on('click', this.cancelRegistration.bind(this));
                 } else {
                     $form.append('<input type="button" class="submit" value="'+__('Return')+'"/>');

css/converse.css

@@ -1180,10 +1180,13 @@
     display: block !important; }
   #conversejs .pure-button {
     border-radius: 4px; }
-  #conversejs .button-success {
+  #conversejs .button-primary {
     color: white;
     background-color: #2AC611; }
-  #conversejs .button-warn {
+  #conversejs .button-secondary {
+    color: white;
+    background-color: #83A0D6; }
+  #conversejs .button-cancel {
     color: white;
     background-color: #D24E2B; }
   #conversejs form.pure-form.converse-form {
@@ -1529,11 +1532,6 @@
     #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
       height: auto;
       white-space: normal; }
-    #conversejs #controlbox #converse-register .cancel-submit, #conversejs #controlbox #converse-register .save-submit, #conversejs #controlbox #converse-login .cancel-submit, #conversejs #controlbox #converse-login .save-submit {
-      width: 45%;
-      margin: 5px 3px 5px 3px; }
-    #conversejs #controlbox #converse-register .cancel, #conversejs #controlbox #converse-register .cancel-submit, #conversejs #controlbox #converse-login .cancel, #conversejs #controlbox #converse-login .cancel-submit {
-      color: #D24E2B; }
     #conversejs #controlbox #converse-register .save-submit, #conversejs #controlbox #converse-login .save-submit {
       color: #436F64; }
     #conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {

mockup/chatroom.html

@@ -83,8 +83,8 @@
                             <input name="muc#roomconfig_historylength" type="number" value="20">
                         </fieldset>
                         <fieldset>
-                            <input type="submit" class="pure-button save-submit" value="Save">
-                            <input type="button" class="pure-button cancel-submit" value="Cancel"></form>
+                            <input type="submit" class="pure-button button-primary" value="Save">
+                            <input type="button" class="pure-button button-cancel" value="Cancel"></form>
                         </fieldset>
                 </div>
             </div>

mockup/controlbox.html

@@ -44,7 +44,7 @@
                     <input type="text" name="jid" placeholder="user@server">
                     <label>Password:</label>
                     <input type="password" name="password" placeholder="password">
-                    <input class="pure-button button-success" type="submit" value="Log In">
+                    <input class="pure-button button-primary" type="submit" value="Log In">
                     <span class="conn-feedback"></span>
                 </form>
                 </div>
@@ -57,7 +57,7 @@
                             Tip: A list of public XMPP providers is available 
                             <a href="https://xmpp.net/directory.php" class="url" target="_blank">here</a>.
                         </p>
-                        <input class="pure-button submit" type="submit" value="Fetch registration form">
+                        <input class="pure-button button-primary" type="submit" value="Fetch registration form">
                     </form>
                 </div>
             </div>
@@ -252,7 +252,7 @@
                             <input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name">
                             <label>Nickname</label>
                             <input type="text" name="nick" class="new-chatroom-nick" placeholder="Nickname">
-                            <input type="submit" class="pure-button button-success" name="join" value="Open Room">
+                            <input type="submit" class="pure-button button-primary" name="join" value="Open Room">
                         </fieldset>
 
                         <fieldset>
@@ -261,7 +261,7 @@
                             <p class="form-help">Rooms are hosted on XMPP servers. You need to specify a server on which the room you want to join is hosted. </p>
                             -->
                             <input type="text" name="server" class="new-chatroom-server" placeholder="Server">
-                            <input type="button" class="pure-button button-success" name="show" id="show-rooms" value="Show rooms">
+                            <input type="button" class="pure-button button-secondary" name="show" id="show-rooms" value="Show rooms">
                         </fieldset>
                     </form>
                     <dl id="available-chatrooms">

mockup/index.html

@@ -213,7 +213,7 @@
                             <input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name">
                             <label>Nickname</label>
                             <input type="text" name="nick" class="new-chatroom-nick" placeholder="Nickname">
-                            <input type="submit" class="pure-button button-success" name="join" value="Open Room">
+                            <input type="submit" class="pure-button button-primary" name="join" value="Open Room">
                         </fieldset>
 
                         <fieldset>
@@ -222,7 +222,7 @@
                             <p class="form-help">Rooms are hosted on XMPP servers. You need to specify a server on which the room you want to join is hosted. </p>
                             -->
                             <input type="text" name="server" class="new-chatroom-server" placeholder="Server">
-                            <input type="button" class="pure-button button-success" name="show" id="show-rooms" value="Show rooms">
+                            <input type="button" class="pure-button button-secondary" name="show" id="show-rooms" value="Show rooms">
                         </fieldset>
                     </form>
                     <dl id="available-chatrooms">
@@ -423,6 +423,9 @@
                             <label>Password:</label>
                             <input type="password" name="password">
                         </fieldset>
+                        <fieldset>
+                            <input class="pure-button button-primary" type="submit" value="Submit"/>
+                        </fieldset>
                     </form>
                 </div>
             </div>

sass/_controlbox.scss

@@ -78,13 +78,6 @@
                 height: auto;
                 white-space: normal;
             }
-            .cancel-submit, .save-submit {
-                width: 45%;
-                margin: 5px 3px 5px 3px;
-            }
-            .cancel, .cancel-submit {
-                color: $warning-color;
-            }
             .save-submit {
                 color: $save-button-color;
             }

sass/_core.scss

@@ -161,11 +161,15 @@
     .pure-button {
         border-radius: $chatbox-border-radius;
     }
-    .button-success {
+    .button-primary {
         color: white;
-        background-color: $success-color;
+        background-color: $primary-color;
     }
-    .button-warn {
+    .button-secondary {
+        color: white;
+        background-color: $secondary-color;
+    }
+    .button-cancel {
         color: white;
         background-color: $warning-color;
     }

sass/_variables.scss

@@ -24,7 +24,8 @@ $roster-height: 194px !default;
 $controlbox-head-color: #577BDD !default;
 $controlbox-dropdown-height: 25px !default;
 
-$success-color: #2AC611 !default;
+$primary-color: #2AC611 !default;
+$secondary-color: #83A0D6 !default;
 $warning-color: #D24E2B !default;
 
 $light-background-border-color: #B1BFC4 !default;

src/templates/chatroom_password_form.html

@@ -4,7 +4,10 @@
             <legend>{{heading}}</legend>
             <label>{{label_password}}</label>
             <input type="password" name="password"/>
-            <input type="submit" value="{{label_submit}}"/>
+            <input class="pure-button button-primary" type="submit" value=""/>
+        </fieldset>
+        <fieldset>
+            <input class="pure-button button-primary" type="submit" value="{{label_submit}}"/>
         </fieldset>
     </form>
 </div>

src/templates/login_panel.html

@@ -8,11 +8,11 @@
             <input type="text" name="jid" placeholder="{{placeholder_username}}">
             <label>{{label_password}}</label>
             <input type="password" name="password" placeholder="{{placeholder_password}}">
-            <input class="pure-button" type="submit" value="{{label_login}}">
+            <input class="pure-button button-primary" type="submit" value="{{label_login}}">
             <span class="conn-feedback"></span>
         {[ } ]}
         {[ if (authentication == ANONYMOUS) { ]}
-            <input type="pure-button button-success" class="submit login-anon" value="{{label_anon_login}}"/>
+            <input type="pure-button button-primary" class="submit login-anon" value="{{label_anon_login}}"/>
         {[ } ]}
         {[ if (authentication == PREBIND) { ]}
             <p>Disconnected.</p>

src/templates/register_panel.html

@@ -3,5 +3,5 @@
     <label>{{label_domain}}</label>
     <input type="text" name="domain" placeholder="{{domain_placeholder}}">
     <p class="form-help">{{help_providers}} <a href="{{href_providers}}" class="url" target="_blank">{{help_providers_link}}</a>.</p>
-    <input class="pure-button submit" type="submit" value="{{label_register}}">
+    <input class="pure-button button-primary" type="submit" value="{{label_register}}">
 </form>

src/templates/registration_request.html

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

src/templates/room_panel.html

@@ -3,14 +3,14 @@
         <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="submit" class="pure-button button-success" name="join" value="{{label_join}}"/>
+        <input type="submit" class="pure-button button-primary" 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}}"/>
-        <input type="button" class="pure-button button-success" name="show" id="show-rooms" value="{{label_show_rooms}}"/>
+        <input type="button" class="pure-button button-secondary" name="show" id="show-rooms" value="{{label_show_rooms}}"/>
     </fieldset>
 </form>
 <dl id="available-chatrooms"></dl>