Finish admin permissions page and clean up everything

framework/core/less/admin/AdminNav.less

@@ -70,9 +70,11 @@
   }
   .container {
     width: 100%;
-    padding: 0 30px;
     margin: 0;
 
+    .App-content & {
+      padding: 0 30px;
+    }
     .App-content > & {
       padding: 0;
     }

framework/core/less/admin/EditGroupModal.less

@@ -0,0 +1,23 @@
+.EditGroupModal {
+  .Form-group:not(:last-child) {
+    margin-bottom: 30px;
+  }
+  .Badge {
+    margin-right: 5px;
+    vertical-align: 2px;
+  }
+}
+.EditGroupModal-name-input {
+  :first-child {
+    margin-bottom: 1px;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  :last-child {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+}
+.EditGroupModal-delete {
+  float: right;
+}

framework/core/less/admin/PermissionsPage.less

@@ -8,28 +8,39 @@
   text-align: center;
   color: @text-color;
   font-weight: bold;
+  padding-left: 10px;
+  padding-right: 10px;
 }
 .Group-name {
   display: block;
   margin-top: 5px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .Group-icon {
   font-size: 14px;
+  margin-top: 2px;
 }
 .Group--add {
-  border: 1px dashed @muted-color;
   color: @muted-color;
   width: auto;
   margin-left: 10px;
   font-weight: normal;
+
+  .Group-icon {
+    margin-top: 8px;
+  }
 }
 
 
 .PermissionsPage-permissions {
-  padding: 30px 0;
+  padding: 30px 0 200px;
+  overflow: auto;
 }
 
 .PermissionGrid {
+  white-space: nowrap;
+
   td, th {
     padding: 10px 0;
     text-align: left;
@@ -42,7 +53,11 @@
     font-weight: bold;
     font-size: 12px;
     color: @muted-color;
-    width: 140px;
+    min-width: 140px;
+
+    &:not(:hover) .PermissionGrid-removeScope {
+      display: none;
+    }
   }
   tbody {
     th {
@@ -62,12 +77,28 @@
     }
     .Button {
       text-decoration: none;
-    }
-    td:not(:hover) {
-      .Select-caret, .GroupsButton-caret {
-        display: none;
+
+      .Badge {
+        margin: -3px 0;
+        vertical-align: 0;
       }
     }
+    td:not(:hover) .Select-caret,
+    td:not(:hover) .Dropdown:not(.open) .Button-caret {
+      display: none;
+    }
+    .open .Dropdown-toggle {
+      .box-shadow(none);
+    }
+  }
+}
+.PermissionGrid-removeScope {
+  margin: -1px 0;
+}
+.PermissionDropdown {
+  .Badge {
+    margin: -3px 3px -3px 0;
+    vertical-align: 1px;
   }
 }
 .PermissionGrid-section {

framework/core/less/admin/app.less

@@ -4,3 +4,4 @@
 @import "DashboardPage.less";
 @import "BasicsPage.less";
 @import "PermissionsPage.less";
+@import "EditGroupModal.less";

framework/core/less/lib/Alert.less

@@ -15,6 +15,13 @@
     color: @alert-error-color;
   }
 }
+.Alert--success {
+  background: @alert-success-bg;
+
+  &, a, a:hover, button, button:hover {
+    color: @alert-success-color;
+  }
+}
 .Alert-controls {
   list-style-type: none;
   padding: 0;
@@ -39,6 +46,7 @@
 
     > .Button {
       margin: -10px;
+      vertical-align: 0;
     }
   }
 }

framework/core/less/lib/Badge.less

@@ -1,5 +1,5 @@
 .Badge {
-  .Badge--size(23px);
+  .Badge--size(24px);
   border: 1px solid @body-bg;
   background: @muted-color;
   color: #fff;
@@ -20,7 +20,7 @@
   line-height: @size - 3px;
 
   &, .Badge-icon {
-    font-size: 0.56 * @size;
+    font-size: 0.58 * @size;
   }
 }
 

framework/core/less/lib/Button.less

@@ -157,12 +157,14 @@
   background: transparent !important;
   padding: 0;
   color: inherit !important;
+  line-height: inherit;
 
   &:hover {
     text-decoration: underline;
   }
   &:active,
-  &.active {
+  &.active,
+  .open > &.Dropdown-toggle {
     .box-shadow(none);
   }
 }
@@ -204,6 +206,7 @@
   .Button-icon {
     font-size: 16px;
     vertical-align: -1px;
+    margin: 0;
   }
 }
 .SessionDropdown .Dropdown-toggle {
@@ -214,6 +217,9 @@
     .Avatar--size(24px);
   }
 }
+.Button-icon {
+  margin-right: 3px;
+}
 .Button-icon,
 .Button-caret {
   font-size: 14px;

framework/core/less/lib/Dropdown.less

@@ -9,7 +9,7 @@
   display: none;
   min-width: 160px;
   padding: 8px 0;
-  margin: 7px 0 0;
+  margin: 7px 0;
   background: @body-bg;
   border-radius: @border-radius;
   .box-shadow(0 2px 6px @shadow-color);
@@ -42,8 +42,10 @@
       &.hasIcon {
         padding-left: 40px;
       }
-      &:hover, &:focus {
+      &:hover {
         background: @control-bg;
+      }
+      &:focus {
         outline: none;
       }
 
@@ -52,6 +54,11 @@
         margin-left: -25px;
         margin-top: 2px;
       }
+
+      &.disabled {
+        opacity: 0.5;
+        background: none;
+      }
     }
     &.active {
       > a, > button {
@@ -60,6 +67,10 @@
     }
   }
 }
+.Dropdown-menu--top {
+  top: auto;
+  bottom: 100%;
+}
 .Dropdown-menu--right {
   left: auto;
   right: 0;

framework/core/less/lib/Form.less

@@ -13,3 +13,11 @@
 .Form-group {
   margin-bottom: 12px;
 }
+
+.Form-group label {
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 10px;
+  color: @text-color;
+  display: block;
+}

framework/core/less/lib/Modal.less

@@ -101,11 +101,13 @@
     color: @text-color;
   }
 
-  .helpText {
-    font-size: 14px;
-    line-height: 1.5em;
-    margin-bottom: 25px;
-    text-align: left;
+  .Form--centered {
+    .helpText {
+      font-size: 14px;
+      line-height: 1.5em;
+      margin-bottom: 25px;
+      text-align: left;
+    }
   }
 
   > :last-child {

framework/core/less/lib/scaffolding.less

@@ -88,6 +88,7 @@ legend {
   font-size: 14px;
   font-weight: bold;
   margin-bottom: 10px;
+  color: @text-color;
 }
 input[type="search"] {
   -webkit-appearance: none;

framework/core/less/lib/variables.less

@@ -68,6 +68,9 @@
 @alert-error-bg:                   #d83e3e;
 @alert-error-color:                #fff;
 
+@alert-success-bg:                 #B4F1AF;
+@alert-success-color:              #33722D;
+
 .define-header(@config-colored-header);
 .define-header(false) {
   @header-bg:                      @body-bg;