Improve style of security tab of category modal

app/assets/javascripts/discourse/templates/modal/edit_category.js.handlebars

@@ -62,20 +62,24 @@
     {{#unless is_uncategorized}}
       <div {{bindAttr class=":modal-tab :options-tab view.securitySelected::invisible"}}>
         <section class='field'>
-          <label>{{i18n category.security}}</label>
           <label>
-          {{view Ember.Checkbox checkedBinding="secure"}}
-          {{i18n category.is_secure}}
+            {{view Ember.Checkbox checkedBinding="secure"}}
+            {{i18n category.is_secure}}
           </label>
           {{#if secure}}
-            <div>
-              {{i18n category.allowed_groups}}
-              {{#each groups}}
-                {{this}} <a {{action removeGroup this target="view"}}>x</a>
-              {{/each}}
+            <div class="secure-category-options">
+              <label>{{i18n category.allowed_groups}}</label>
+              <ul class="badge-list">
+                {{#each groups}}
+                  <li class="badge-group">
+                    {{this}}
+                    <a {{action removeGroup this target="view"}}><i class="icon icon-remove-sign"></i></a>
+                  </li>
+                {{/each}}
+              </ul>
+              {{view Ember.Select contentBinding="availableGroups" valueBinding="view.selectedGroup"}}
+              <button {{action addGroup target="view"}} class="btn btn-small">{{i18n category.add_group}}</button>
             </div>
-            {{view Ember.Select contentBinding="availableGroups" valueBinding="view.selectedGroup"}}
-            <button {{action addGroup target="view"}}>{{i18n category.add_group}}</button>
           {{/if}}
         </section>
       </div>

app/assets/stylesheets/application/modal.css.scss

@@ -201,6 +201,22 @@
   &.small .modal-body {
     height: 290px;
   }
+  .secure-category-options {
+    margin: 10px 0 0 16px;
+    .badge-list {
+      margin: 10px 0;
+      li {
+        margin: 0 4px 8px 0;
+        a {
+          color: #888;
+          cursor: pointer;
+        }
+        a:hover {
+          color: $black;
+        }
+      }
+    }
+  }
 }
 
 .modal-tab {

app/assets/stylesheets/components/badges.css.scss

@@ -75,4 +75,18 @@
   &[href] {
     color: $badge-posts-color;
   }
-}
+}
+
+// Group badge
+// --------------------------------------------------
+
+.badge-group {
+  @extend %badge;
+  padding: 3px 2px 3px 8px;
+  color: $black;
+  text-shadow: 0 1px 0 rgba($white, 0.2);
+  background-color: #ddd;
+  border-color: #aaa;
+  font-size: 12px;
+  @include box-shadow(inset 0 1px 0 rgba($white, 0.52));
+}