Redo styling of the default permissions manager

static/css/core-ui.css

@@ -779,9 +779,11 @@
 }
 
 .co-table thead td {
+  color: #999;
+  font-size: 90%;
   text-transform: uppercase;
-  font-size: 16px;
+  font-weight: 300;
-  color: #666;
+  padding-top: 0px !important;
 }
 
 .co-table thead td a {

static/css/directives/ui/robots-manager.css

@@ -1,13 +1,3 @@
-.robots-manager-element .manager-header {
-  margin-bottom: 10px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #eee;
-}
-
-.robots-manager-element .manager-header h3 {
-  margin-bottom: 10px;
-}
-
 .robots-manager-element .robot a {
   font-size: 16px;
   cursor: pointer;

static/css/quay.css

@@ -4935,3 +4935,13 @@ i.rocket-icon {
   text-align: center;
 }
 
+.manager-header {
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+}
+
+.manager-header h3 {
+  margin-bottom: 10px;
+}
+

static/directives/prototype-manager.html

@@ -1,54 +1,67 @@
 <div class="prototype-manager-element">
-  <div class="quay-spinner" ng-show="loading"></div>
+  <div class="cor-loader" ng-show="loading"></div>
-
+  <div ng-show="!loading">
-  <div class="cor-container" ng-show="!loading">
+    <div class="manager-header">
-    <div class="alert alert-info">
+      <div class="side-controls">
-      Default permissions provide a means of specifying <span class="context-tooltip" data-title="By default, all repositories have the creating user added as an 'Admin'" bs-tooltip="tooltip.title">additional</span> permissions that should be granted automatically to a repository <strong>when it is created</strong>.
+        <button class="btn btn-primary" ng-click="showAddDialog()">
+          <i class="fa fa-plus"></i>
+          Create Default Permission
+        </button>
+      </div>
+      <h3>Default Permissions</h3>
     </div>
 
-    <div class="side-controls">
+    <div class="manager-header section-description-header">
-      <button class="btn btn-success" ng-click="showAddDialog()">
+      The Default permissions panel defines permissions that should be granted automatically to a repository when it is created, in addition to the default of the repository's
-        <i class="fa fa-plus"></i>
+      creator. Permissions are assigned based on the user who created the repository.
-        New Default Permission
+      <br><br>
-      </button>
+      <strong>Note:</strong> Permissions added here do <strong>not</strong> automatically get added to
+      existing repositories.
     </div>
 
-    <table class="table">
+    <table class="co-table">
       <thead>
-        <th>
+        <td>
           <span class="context-tooltip"
                 data-title="The user or robot that is creating a repository. If '(Organization Default)', then any repository created in this organization will be granted the permission."
-                bs-tooltip="tooltip.title" data-container="body">
+                data-container="body" bs-tooltip>
-            Repository Creator
+            Repository Created By
           </span>
-        </th>
+        </td>
-        <th>
+        <td>
-          <span class="context-tooltip" data-title="The user, robot or team that is being granted the permission"
+          <span class="context-tooltip"
-                bs-tooltip="tooltip.title" data-container="body">
+                data-title="The user, robot or team that is being granted the permission"
-            Applies To User/Robot/Team
+                data-container="body" bs-tooltip>
+            Permission Applied To
           </span>
-        </th>
+        </td>
-        <th>Permission</th>
+        <td>Permission</td>
-        <th style="width: 150px"></th>
+        <td class="options-col"></td>
       </thead>
 
       <tr ng-repeat="prototype in prototypes | orderBy:comparePrototypes">
         <td>
           <span class="entity-reference block-reference" entity="prototype.activating_user"
-                namespace="organization.name" ng-show="prototype.activating_user"></span>
+                namespace="organization.name" ng-if="prototype.activating_user"
+                avatar-size="24"></span>
 
-          <span ng-show="!prototype.activating_user" style="font-variant: small-caps; font-weight: bold; font-size: 16px;">
+          <span ng-show="!prototype.activating_user"
+                style="font-variant: small-caps; font-weight: bold; font-size: 16px;">
             (Organization Default)
           </span>
         </td>
         <td>
-          <span class="entity-reference block-reference" entity="prototype.delegate" namespace="organization.name"></span>
+          <span class="entity-reference block-reference" entity="prototype.delegate" namespace="organization.name" avatar-size="24"></span>
         </td>
         <td>
           <span class="role-group" current-role="prototype.role" role-changed="setRole(role, prototype)" roles="roles"></span>
         </td>
-        <td>
+        <td class="options-col">
-          <span class="delete-ui" delete-title="'Delete Permission'" perform-delete="deletePrototype(prototype)"></span>
+          <span class="cor-options-menu">
+            <span class="cor-option" option-click="deletePrototype(prototype)">
+              <i class="fa fa-times"></i> Delete Permission
+            </span>
+          </span>
         </td>
       </tr>
     </table>

static/partials/org-view.html

@@ -70,7 +70,6 @@
 
         <!-- Default Permissions -->
         <div id="default" class="tab-pane">
-          <h3>Default Permissions</h3>
           <div class="prototype-manager" organization="organization"></div>
         </div>