UX: make adding permissions more visible and intuitive to click. (#6999)

app/assets/javascripts/discourse/templates/components/edit-category-security.hbs

@@ -27,7 +27,7 @@
                   content=category.availablePermissions
                   value=selectedPermission}}
       <button {{action "addPermission" selectedGroup selectedPermission}} class="btn btn-default add-permission">
-        {{i18n 'category.add_permission'}}
+        {{d-icon 'plus' class="add-permission-icon"}}
       </button>
     {{/if}}
   {{else}}

app/assets/stylesheets/common/base/modal.scss

@@ -147,6 +147,7 @@
 .modal-form {
   margin-bottom: 0;
 }
+
 .modal-footer {
   padding: 14px 15px 10px;
   border-top: 1px solid $primary-low;
@@ -154,11 +155,13 @@
     margin: 0 5px 5px 0;
   }
 }
+
 .modal-footer:before,
 .modal-footer:after {
   display: table;
   content: "";
 }
+
 .modal-footer:after {
   clear: both;
 }
@@ -315,6 +318,7 @@
     }
   }
 }
+
 .d-modal-cancel {
   margin-left: 1em;
   color: $primary-medium;
@@ -431,8 +435,17 @@
     }
   }
 
+  .permission-selector {
+    margin-right: 0.25em;
+  }
+
   .add-permission {
-    margin-top: 12px;
+    position: relative;
+    top: 0.1em;
+  }
+
+  .add-permission-icon {
+    margin: 0;
   }
 }
 

config/locales/client.en.yml

@@ -2399,7 +2399,6 @@ en:
       default_top_period: "Default Top Period:"
       allow_badges_label: "Allow badges to be awarded in this category"
       edit_permissions: "Edit Permissions"
-      add_permission: "Add Permission"
       require_topic_approval: "Require moderator approval of all new topics"
       require_reply_approval: "Require moderator approval of all new replies"
       this_year: "this year"