Kanban filter UI

www/kanban/app-kanban.less

@@ -3,6 +3,7 @@
 @import (reference) "../../customize/src/less2/include/tools.less";
 @import (reference) "../../customize/src/less2/include/markdown.less";
 @import (reference) "../../customize/src/less2/include/avatar.less";
+@import (reference) "../../customize/src/less2/include/buttons.less";
 
 // body
 &.cp-app-kanban {
@@ -309,30 +310,46 @@
         position: relative;
         min-height: 50px;
         .cp-kanban-filterTags {
+            .buttons_main();
             display: inline-flex;
-            align-items: baseline;
+            align-items: center;
             flex: 1;
             //max-width: 80%;
             min-width: 150px;
             .cp-kanban-filterTags-toggle {
                 min-width: 100px;
+                display: flex;
+                flex-flow: column;
+                flex-shrink: 0;
+                & > * {
+                    visibility: hidden;
+                }
+                & > span {
+                    display: inline-block;
+                    height: 38px;
+                    line-height: 38px;
+                }
+                & > button {
+                    margin-top: -38px;
+                }
             }
-            .cp-kanban-filterTags-reset {
+            button.cp-kanban-filterTags-reset {
                 cursor: pointer;
-                .tools_unselectable();
+                white-space: normal !important;
                 font-weight: bold;
+                .tools_unselectable();
                 i {
                     margin-right: 5px;
                 }
             }
-            .cp-kanban-filterTags-reset, .cp-kanban-filterTags-name {
-                flex-shrink: 0;
-            }
             .cp-kanban-filterTags-list {
                 margin-right: 10px;
                 margin-left: 10px;
                 display: flex;
                 flex-wrap: wrap;
+                &:not(:empty) {
+                    margin-top: -5px;
+                }
                 em {
                     font-size: 14px;
                     color: lighten(@cryptpad_text_col, 10%);

www/kanban/inner.js

@@ -874,8 +874,8 @@ define([
             // Tags filter
             var existing = getExistingTags(kanban.options.boards);
             var list = h('div.cp-kanban-filterTags-list');
-            var reset = h('span.cp-kanban-filterTags-reset', [
+            var reset = h('button.btn.btn-secondary.cp-kanban-filterTags-reset', [
-                //h('i.fa.fa-times'), // XXX creates vertical alignment issues
+                h('i.fa.fa-times'),
                 Messages.kanban_clearFilter
             ]);
             var hint = h('span.cp-kanban-filterTags-name', Messages.kanban_tags);
@@ -891,8 +891,8 @@ define([
             var $hint = $(hint);
 
             var setTagFilterState = function (bool) {
-                $hint.css('display', bool? 'none': 'inherit');
+                $hint.css('visibility', bool? 'hidden': 'visible');
-                $reset.css('display', bool? 'inherit': 'none');
+                $reset.css('visibility', bool? 'visible': 'hidden');
             };
             setTagFilterState();