settings: Redesign settings/administration panel buttons.

This redesigns all the ugly bold-colored buttons in the settings and
administration pages.

frontend_tests/casper_tests/06-settings.js

@@ -47,7 +47,7 @@ casper.then(function () {
                 new_password: "qwertyuiop",
                 confirm_password: "qwertyuiop",
             });
-            casper.click('input[name="change_settings"]');
+            casper.click('button[name="change_settings"]');
         });
     });
 });
@@ -79,7 +79,7 @@ casper.then(function () {
             new_password: test_credentials.default_user.password,
             confirm_password: test_credentials.default_user.password,
         });
-        casper.click('input[name="change_settings"]');
+        casper.click('button[name="change_settings"]');
     });
 });
 

frontend_tests/casper_tests/10-admin.js

@@ -22,7 +22,7 @@ casper.waitForSelector('#settings_overlay_container.show', function () {
 // Test setting limiting stream creation to administrators
 casper.waitForSelector('input[type="checkbox"][id="id_realm_create_stream_by_admins_only"]', function () {
     casper.click('input[type="checkbox"][id="id_realm_create_stream_by_admins_only"]');
-    casper.click('form.admin-realm-form input.button');
+    casper.click('form.admin-realm-form button.button');
 });
 
 casper.then(function () {
@@ -52,7 +52,7 @@ casper.waitUntilVisible('input[type="checkbox"][id="id_realm_create_stream_by_ad
 
     // Deactivate setting
     casper.click('input[type="checkbox"][id="id_realm_create_stream_by_admins_only"]');
-    casper.click('form.admin-realm-form input.button');
+    casper.click('form.admin-realm-form button.button');
 });
 
 casper.then(function () {
@@ -104,7 +104,7 @@ casper.then(function () {
             pattern: '#(?P<id>[0-9]+)',
             url_format_string: 'https://trac.example.com/ticket/%(id)s',
         });
-        casper.click('form.admin-filter-form input.btn');
+        casper.click('form.admin-filter-form button.button');
     });
 });
 
@@ -134,7 +134,7 @@ casper.then(function () {
             pattern: 'a$',
             url_format_string: 'https://trac.example.com/ticket/%(id)s',
         });
-        casper.click('form.admin-filter-form input.btn');
+        casper.click('form.admin-filter-form button.button');
     });
 });
 
@@ -237,7 +237,7 @@ casper.then(function () {
         casper.evaluate(function () {
             $('#id_realm_default_language').val('de').change();
         });
-        casper.click('form.admin-realm-form input.button');
+        casper.click('form.admin-realm-form button.button');
     });
 });
 
@@ -253,7 +253,7 @@ casper.then(function () {
     casper.click("li[data-section='auth-methods']");
     casper.waitUntilVisible(".method_row[data-method='Email'] input[type='checkbox']", function () {
         casper.click(".method_row[data-method='Email'] input[type='checkbox']");
-        casper.click('form.admin-realm-form input.button');
+        casper.click('form.admin-realm-form button.button');
     });
 });
 
@@ -288,7 +288,7 @@ casper.then(function () {
 // Deactivate setting--default is checked
 casper.then(function () {
     casper.click(".method_row[data-method='Email'] input[type='checkbox']");
-    casper.click('form.admin-realm-form input.button');
+    casper.click('form.admin-realm-form button.button');
     casper.waitUntilVisible('#admin-realm-authentication-methods-status', function () {
         casper.test.assertSelectorHasText('#admin-realm-authentication-methods-status', 'Authentication methods saved!');
         casper.test.assertEval(function () {

frontend_tests/casper_tests/12-toggle-message-editing.js

@@ -82,7 +82,7 @@ casper.then(function () {
 // deactivate "allow message editing"
 casper.waitUntilVisible('input[type="checkbox"][id="id_realm_allow_message_editing"]', function () {
     casper.click('input[type="checkbox"][id="id_realm_allow_message_editing"]');
-    casper.click('form.admin-realm-form input.button');
+    casper.click('form.admin-realm-form button.button');
 });
 
 casper.then(function () {
@@ -144,7 +144,7 @@ casper.then(function () {
 });
 casper.waitUntilVisible('input[type="checkbox"][id="id_realm_allow_message_editing"]', function () {
     casper.click('input[type="checkbox"][id="id_realm_allow_message_editing"]');
-    casper.click('form.admin-realm-form input.button');
+    casper.click('form.admin-realm-form button.button');
     casper.waitUntilVisible('#admin-realm-message-editing-status', function () {
         casper.test.assertSelectorHasText('#admin-realm-message-editing-status', 'Users can now edit topics for all their messages, and the content of messages which are less than 10 minutes old.');
         casper.test.assertEval(function () {
@@ -196,7 +196,7 @@ casper.then(function () {
     casper.test.assertExists('#settings_overlay_container.show', 'Organization page is active');
 });
 
-casper.waitUntilVisible('form.admin-realm-form input.button');
+casper.waitUntilVisible('form.admin-realm-form button.button');
 
 // deactivate message editing
 casper.waitUntilVisible('input[type="checkbox"][id="id_realm_allow_message_editing"]', function () {
@@ -204,7 +204,7 @@ casper.waitUntilVisible('input[type="checkbox"][id="id_realm_allow_message_editi
         $('input[type="text"][id="id_realm_message_content_edit_limit_minutes"]').val('4');
     });
     casper.click('input[type="checkbox"][id="id_realm_allow_message_editing"]');
-    casper.click('form.admin-realm-form input.button');
+    casper.click('form.admin-realm-form button.button');
 });
 
 casper.then(function () {
@@ -223,7 +223,7 @@ casper.then(function () {
     // allow message editing again, and check that the old edit limit is still there
     casper.waitUntilVisible('input[type="checkbox"][id="id_realm_allow_message_editing"]', function () {
         casper.click('input[type="checkbox"][id="id_realm_allow_message_editing"]');
-        casper.click('form.admin-realm-form input.button');
+        casper.click('form.admin-realm-form button.button');
     });
 });
 
@@ -245,7 +245,7 @@ casper.then(function () {
         casper.evaluate(function () {
             $('input[type="text"][id="id_realm_message_content_edit_limit_minutes"]').val('0');
         });
-        casper.click('form.admin-realm-form input.button');
+        casper.click('form.admin-realm-form button.button');
     });
 });
 
@@ -268,7 +268,7 @@ casper.then(function () {
             $('input[type="text"][id="id_realm_message_content_edit_limit_minutes"]').val('moo');
         });
         casper.click('input[type="checkbox"][id="id_realm_allow_message_editing"]');
-        casper.click('form.admin-realm-form input.button');
+        casper.click('form.admin-realm-form button.button');
     });
 });
 

frontend_tests/node_tests/templates.js

@@ -290,7 +290,7 @@ function render(template_name, args) {
     html += "</table>";
 
     buttons = $(html).find('.button');
-    assert.equal($(buttons).length, 0);
+    assert.equal($(buttons).length, 6);
 
     global.write_handlebars_output("admin_user_list", html);
 }());

static/styles/components.css

@@ -56,32 +56,7 @@
     border-radius: 2px;
 
     cursor: pointer;
-    transition: all 0.3s ease;
-}
-
-/* -- button states -- */
-.new-style .button:hover {
-    -webkit-filter: brightness(1.1);
-    -moz-filter: brightness(1.1);
-    filter: brightness(1.1);
-}
-
-.new-style .button.white:hover {
-    border-color: #888;
-    background-color: #e4e4e4;
-}
-
-.new-style .button:active {
-    -webkit-filter: brightness(0.9);
-    -moz-filter: brightness(0.9);
-    filter: brightness(0.9);
-}
-
-.new-style .button[disabled="disabled"] {
-    cursor: not-allowed;
-    -webkit-filter: saturate(0);
-    -moz-filter: saturate(0);
-    filter: saturate(0);
+    transition: all 0.2s ease;
 }
 
 /* -- button style variations -- */
@@ -125,28 +100,89 @@
     padding: 6px 10px;
 }
 
-.new-style .button.btn-danger {
-    color: #fff;
-    background-color: #d9534f;
-    border-color: #d43f3a;
-}
-
-.new-style .button.btn-warning {
-    color: #fff;
-    background-color: #f0ad4e;
-    border-color: #eea236;
-}
-
-.new-style .button.sea-green {
-    background-color: #24cac2;
-    color: #fff;
-}
-
 .new-style .button.small-flex {
     width: auto;
     min-width: inherit;
 }
 
+/* -- button states -- */
+.new-style .button:hover {
+    -webkit-filter: brightness(1.1);
+    -moz-filter: brightness(1.1);
+    filter: brightness(1.1);
+}
+
+.new-style .button.white:hover {
+    border-color: #888;
+    background-color: #e4e4e4;
+}
+
+.new-style .button:active {
+    -webkit-filter: brightness(0.94);
+    -moz-filter: brightness(0.94);
+    filter: brightness(0.94);
+}
+
+.new-style .button[disabled="disabled"] {
+    cursor: not-allowed;
+    -webkit-filter: saturate(0);
+    -moz-filter: saturate(0);
+    filter: saturate(0);
+    background-color: #eee;
+    color: #888181;
+}
+
+.new-style .button.sea-green {
+    color: #5bb792;
+    border-color: #addcc9;
+}
+
+.new-style .button.btn-warning {
+    color: #f1a02e;
+    border-color: #ffdfb1;
+}
+
+.new-style .button.btn-danger {
+    color: #e6898d;
+    border-color: #f5d0ce;
+}
+
+.new-style .button.btn-danger:hover {
+    background-color: rgba(245, 179, 179, 0.05);
+    color: #d1686c;
+    border: 1px solid #e2a7a5;
+}
+
+.new-style .button.btn-warning:hover {
+    background-color: rgba(238, 162, 54, 0.05);
+    color: #ff9600;
+    border: 1px solid #eea236;
+}
+
+.new-style .button.sea-green:hover {
+    background-color: rgba(91,183,146,0.05);
+    border: 1px solid #52c2af;
+    color: #1daf93;
+}
+
+.new-style .button.sea-green:active {
+    color: #1daf93;
+    background-color: rgba(91, 183, 146, 0.2);
+    border: 1px solid #52c2af;
+}
+
+.new-style .button.btn-danger:active {
+    color: #d1686c;
+    background-color: rgba(245, 179, 179, 0.2);
+    border: 1px solid #e2a7a5;
+}
+
+.new-style .button.btn-warning:active {
+    color: #eea236;
+    background-color: rgba(238, 162, 54, 0.2);
+    border: 1px solid #eea236;
+}
+
 /* -- tab switcher -- */
 
 .new-style .tab-switcher {

static/templates/admin_default_streams_list.handlebars

@@ -6,7 +6,7 @@
     </td>
     {{#if ../can_modify}}
     <td>
-        <button class="button remove-default-stream btn-danger">
+        <button class="button white rounded remove-default-stream btn-danger">
             {{t "Remove from default" }}
         </button>
     </td>

static/templates/admin_emoji_list.handlebars

@@ -15,8 +15,8 @@
     </td>
     {{#if is_admin}}
     <td>
-        <button class="button delete btn-danger" data-emoji-name="{{name}}">
-            {{t "Delete" }}
+        <button class="button white rounded small delete btn-danger" data-emoji-name="{{name}}">
+            <i class="icon-vector-trash" aria-hidden="true"></i>
         </button>
     </td>
     {{/if}}

static/templates/admin_filter_list.handlebars

@@ -8,8 +8,8 @@
     </td>
     {{#if ../can_modify}}
     <td>
-        <button class="btn delete btn-danger" data-filter-id="{{id}}">
-            {{t "Delete" }}
+        <button class="button white small delete btn-danger" data-filter-id="{{id}}">
+            <i class="icon-vector-trash" aria-hidden="true"></i>
         </button>
     </td>
     {{/if}}

static/templates/admin_streams_list.handlebars

@@ -5,8 +5,8 @@
         <span class="stream_name">{{name}}</span>
     </td>
     <td>
-        <button class="button deactivate btn-danger">
-            {{t "Delete stream" }}
+        <button class="button white small btn-danger deactivate btn-danger">
+            <i class="icon-vector-trash" aria-hidden="true"></i>
         </button>
     </td>
 </tr>

static/templates/admin_user_list.handlebars

@@ -18,11 +18,11 @@
     <td>
       <span class="user-status-settings">
         {{#if is_active}}
-          <button class="button deactivate btn-danger">
+          <button class="button white rounded small deactivate btn-danger">
             {{t "Deactivate" }}
           </button>
         {{else}}
-          <button class="button reactivate btn-warning">
+          <button class="button white rounded small reactivate btn-warning">
             {{t "Reactivate" }}
           </button>
         {{/if}}
@@ -30,17 +30,17 @@
       <span class="user-admin-settings">
         {{#if is_active_human}}
           {{#if is_admin}}
-            <button class="button remove-admin btn-danger">
+            <button class="button white rounded small remove-admin btn-danger">
               {{t "Remove admin" }}
             </button>
           {{else}}
-            <button class="button make-admin btn-warning">
+            <button class="button white rounded small make-admin btn-warning">
               {{t "Make admin" }}
             </button>
           {{/if}}
         {{/if}}
       </span>
-      <button class="button btn-primary open-user-form{{#unless is_active}} display-none{{/unless}}" title="{{t 'Edit user' }}" data-user-id="{{user_id}}">
+      <button class="button white rounded small btn-warning open-user-form{{#unless is_active}} display-none{{/unless}}" title="{{t 'Edit user' }}" data-user-id="{{user_id}}">
           <i class="icon-vector-pencil"></i>
       </button>
       <div class='admin-user-status'>
@@ -62,8 +62,10 @@
         </div>
       {{/if}}
       <div class="input-group">
-        <input type="button" class="btn btn-primary submit_name_changes" value="{{t 'Save changes' }}" />
-        <button type="button" class="btn btn-default reset_edit_user">{{t 'Cancel' }}</button>
+        <button type="button" class="button white rounded sea-green submit_name_changes">
+          {{t 'Save changes' }}
+        </button>
+        <button type="button" class="button white rounded btn-danger reset_edit_user">{{t 'Cancel' }}</button>
       </div>
     </form>
   </td>

static/templates/alert_word_settings_item.handlebars

@@ -17,7 +17,7 @@
                         </button>
                         <span>{{t "Alert words can't be empty!"}}</span>
                     </div>
-                    <button class="button sea-green add-alert-word" id="create_alert_word_button" type="button">
+                    <button class="button white rounded sea-green add-alert-word" id="create_alert_word_button" type="button">
                         {{t 'Add alert word'}}
                     </button>
                 </div>
@@ -30,7 +30,7 @@
             <span class="value">{{word}}</span>
         </div>
         <div class="edit-alert-word-buttons">
-            <button type="submit" class="button small btn-small btn-danger remove-alert-word" title="{{t 'Delete alert word' }}" data-word="{{word}}">
+            <button type="submit" class="button small white btn-danger remove-alert-word" title="{{t 'Delete alert word' }}" data-word="{{word}}">
                 <i class="icon-vector-trash"></i>
             </button>
         </div>

static/templates/bot_avatar_row.handlebars

@@ -36,7 +36,7 @@
             </div>
             <div id="bot_delete_error{{id_suffix}}" class="alert alert-error hide"></div>
         {{else}}
-            <button class="button button-primary reactivate_bot" title="{{t 'Reactivate bot' }}" data-email="{{email}}">{{t "Reactivate bot" }}</button>
+            <button class="button white round btn-warning reactivate_bot" title="{{t 'Reactivate bot' }}" data-email="{{email}}">{{t "Reactivate bot" }}</button>
         {{/if}}
     </div>
 </li>

static/templates/settings/account-settings.handlebars

@@ -53,7 +53,7 @@
           {{#if page_params.password_auth_enabled}}
           <div class="input-group" id="pw_change_link">
             <label for="change_password_button" class="inline-block title">{{t "Password" }}</label>
-            <button class="change_password_button grey button inline-block input-size" data-dismiss="modal" aria-hidden="true">{{t "Change password" }}</button>
+            <button class="change_password_button button white rounded inline-block input-size" data-dismiss="modal" aria-hidden="true">{{t "Change password" }}</button>
           </div>
 
           <div id="pw_change_controls">
@@ -84,11 +84,15 @@
 
           <div class="input-group no-border">
             <label for="" class="inline-block"></label>
-            <input type="submit" class="button w-200 sea-green input-size" name="change_settings" value="{{t 'Save changes' }}" />
+            <button type="submit" class="button white rounded w-200 sea-green input-size" name="change_settings">
+              {{t 'Save changes'}}
+            </button>
           </div>
           <div class="input-group">
             <label for="" class="inline-block"></label>
-            <button type="submit" class="button w-200 btn-danger input-size" id="user_deactivate_account_button">{{t 'Deactivate account' }}</button>
+            <button type="submit" class="button white rounded w-200 btn-danger input-size" id="user_deactivate_account_button">
+              {{t 'Deactivate account' }}
+            </button>
           </div>
         </div>
       </div>
@@ -105,8 +109,12 @@
           <div id="upload_avatar_spinner"></div>
         </div>
         <div class="inline-block">
-            <button class="button sea-green w-200 m-t-20 block" id="user_avatar_upload_button">{{t 'Upload new avatar' }}</button>
-            <button class="button btn-danger w-200 m-t-20 block" id="user_avatar_delete_button">{{t 'Delete avatar' }}</button>
+            <button class="button white rounded sea-green w-200 m-t-20 block" id="user_avatar_upload_button">
+              {{t 'Upload new avatar' }}
+            </button>
+            <button class="button white rounded btn-danger w-200 m-t-20 block" id="user_avatar_delete_button">
+              {{t 'Delete avatar' }}
+            </button>
         </div>
       </div>
       <div class="clear-float"></div>

static/templates/settings/auth-methods-settings-admin.handlebars

@@ -16,7 +16,9 @@
         {{#if is_admin}}
         <div class="input-group">
             <div class="organization-submission">
-                <input type="submit" class="button" value="{{t 'Save changes' }}" />
+                <button type="submit" class="button white rounded sea-green">
+                    {{t 'Save changes'}}
+                </button>
             </div>
         </div>
         {{/if}}

static/templates/settings/bot-settings.handlebars

@@ -48,13 +48,15 @@
                     <div class="input-group">
                         <div id="bot_avatar_file"></div>
                         <input type="file" name="bot_avatar_file_input" class="notvisible" id="bot_avatar_file_input" value="{{t 'Upload avatar' }}" />
-                        <button class="btn btn-default display-none" id="bot_avatar_clear_button">{{t "Clear avatar" }}</button>
-                        <button class="button white" id="bot_avatar_upload_button">{{t "Customize avatar" }}</button> ({{t "Optional" }})
+                        <button class="button white rounded small btn-danger display-none" id="bot_avatar_clear_button">{{t "Clear avatar" }}</button>
+                        <button class="button white rounded" id="bot_avatar_upload_button">{{t "Customize avatar" }}</button> ({{t "Optional" }})
                     </div>
                     <p>
                         <div id="bot_avatar_file_input_error" class="text-error"></div>
                     </p>
-                    <input type="submit" class="button sea-green" id="create_bot_button" value="{{t 'Create bot' }}" />
+                    <button type="submit" class="button white rounded sea-green" id="create_bot_button">
+                        {{t 'Create bot' }}
+                    </button>
                 </div>
             </form>
         </div>
@@ -71,7 +73,7 @@
                     messages, you should use your personal API key.
                     {{/tr}}
                 </p>
-                <button class="button white" id="api_key_button">{{t "Show/change your API key" }}</button>
+                <button class="button white rounded" id="api_key_button">{{t "Show/change your API key" }}</button>
             </div>
         </div>
         <div id="get_api_key_box" class="side-padded-container">

static/templates/settings/deactivation-stream-modal.handlebars

@@ -7,7 +7,7 @@
         <p>{{t "Deleting this stream will immediately unsubscribe everyone, and the stream's content will not be recoverable." }} <strong>{{t "Are you sure you want to do this?" }}</strong></p>
     </div>
     <div class="modal-footer">
-        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">{{t "Cancel" }}</button>
-        <button class="button btn-danger" id="do_deactivate_stream_button">{{t "Yes, delete this stream" }}</button>
+        <button class="button white rounded" data-dismiss="modal" aria-hidden="true">{{t "Cancel" }}</button>
+        <button class="button white rounded btn-danger" id="do_deactivate_stream_button">{{t "Yes, delete this stream" }}</button>
     </div>
 </div>

static/templates/settings/deactivation-user-modal.handlebars

@@ -8,7 +8,7 @@
     <p>{{t "Their password will be cleared from our systems, and any bots they maintain will be disabled." }}</p>
   </div>
   <div class="modal-footer">
-    <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">{{t "Cancel" }}</button>
-    <button class="button btn-danger" id="do_deactivate_user_button">{{t "Deactivate now" }}</button>
+    <button class="button white rounded" data-dismiss="modal" aria-hidden="true">{{t "Cancel" }}</button>
+    <button class="button white rounded btn-danger" id="do_deactivate_user_button">{{t "Deactivate now" }}</button>
   </div>
 </div>

static/templates/settings/default-streams-list-admin.handlebars

@@ -18,7 +18,7 @@
 <div id="admin_page_default_streams_loading_indicator"></div>
 {{#if is_admin}}
   <form class="form-horizontal default-stream-form">
-    <div class="add-new-default-stream-box grey-bg green-bg">
+    <div class="add-new-default-stream-box grey-bg">
       <div class="new-default-stream-section-title">{{t "Add new default stream" }}</div>
       <div class="control-group" id="default_stream_inputs">
         <label for="default_stream_name" class="control-label">{{t "Stream name" }}</label>

static/templates/settings/emoji-settings-admin.handlebars

@@ -26,7 +26,9 @@
                     <label for="emoji_url">{{t "Emoji URL" }}</label>
                     <input type="text" name="url" id="emoji_url" placeholder="http://emojipedia-us.s3.amazonaws.com/cache/46/7f/467fe69069c408e07517621f263ea9b5.png" />
                 </div>
-                <input type="submit" class="button" value="{{t 'Add emoji' }}" />
+                <button type="submit" class="button white rounded sea-green">
+                    {{t 'Add emoji' }}
+                </button>
             </div>
         </div>
     </form>

static/templates/settings/notification-settings.handlebars

@@ -159,9 +159,11 @@
 
     <div class="input-group no-border">
       <div class="controls notification-submission">
-        <input type="submit" id="change_notification_settings"
-               name="change_notification_settings" value="{{t 'Save changes' }}"
-               class="button sea-green" />
+        <button type="submit" id="change_notification_settings"
+               name="change_notification_settings"
+               class="button white rounded sea-green">
+          {{t 'Save changes' }}
+        </button>
       </div>
     </div>
   </form>

static/templates/settings/organization-settings-admin.handlebars

@@ -177,7 +177,9 @@
     </div>
     {{#if is_admin }}
     <div class="input-group organization-submission">
-      <input type="submit" class="button" value="{{t 'Save changes' }}" />
+      <button type="submit" class="button white rounded sea-green">
+        {{t 'Save changes' }}
+      </button>
     </div>
     {{/if}}
     </div>
@@ -190,9 +192,9 @@
         <div id="upload_icon_spinner"></div>
       </div>
       <div class="inline-block">
-        <button class="button sea-green w-200 m-t-10 block input-size"
+        <button class="button white rounded sea-green w-200 m-t-10 block input-size"
                 id="realm_icon_upload_button">{{t 'Upload new icon' }}</button>
-        <button class="button btn-danger w-200 m-t-10 block input-size"
+        <button class="button white rounded btn-danger w-200 m-t-10 block input-size"
                 id="realm_icon_delete_button">{{t 'Delete icon' }}</button>
       </div>
     </div>

static/templates/settings/realm-filter-settings-admin.handlebars

@@ -52,7 +52,9 @@
           </div>
           <div class="control-group">
             <div class="controls">
-              <input type="submit" class="btn btn-big btn-primary" value="{{t 'Add filter' }}" />
+              <button type="submit" class="button white rounded sea-green">
+                {{t 'Add filter' }}
+              </button>
             </div>
           </div>
         </div>

static/templates/settings/ui-settings.handlebars

@@ -32,7 +32,7 @@
     </div>
     <div class="input-group no-border">
       <div class="ui-submission">
-        <input type="submit" name="change_settings" value="{{t 'Save changes' }}" class="button sea-green" />
+        <input type="submit" name="change_settings" value="{{t 'Save changes' }}" class="button white rounded sea-green" />
       </div>
     </div>
   </form>