AdminUX Overhaul Small Patches (#2468)

less/admin/AdminHeader.less

@@ -11,6 +11,7 @@
 
   .AdminHeader-description {
     margin: 0;
+    color: @control-color;
   }
 
   .icon {

less/admin/AdminNav.less

@@ -41,16 +41,13 @@
 }
 
 @media @tablet {
-  .item-search{
-    display: none;
-  }
-
-  .ExtensionItem, .item-search {
-    display: none !important;
-  }
-
-  .ExtensionListTitle {
-    display: none !important;
+  .AdminNav {
+    .item-search,
+    li[class^="item-category"],
+    li[class^="item-extension"],
+    .AdminLinkButton-description {
+      display: none !important;
+    }
   }
 }
 
@@ -80,7 +77,7 @@
 }
 
 
-@media @desktop, @desktop-hd {
+@media @desktop-up {
   .App-nav {
     position: absolute;
     top: @header-height;
@@ -107,36 +104,47 @@
         margin-bottom: 20px;
       }
 
+      .item-category-core {
+        > .ExtensionListTitle {
+          margin-top: 10px;
+        }
+      }
+
       > li {
         > a {
           padding: 10px 10px 10px 45px;
           display: block;
           text-decoration: none;
         }
+
         > a,
         > a:hover,
         &.active > a {
           color: @text-color;
         }
+
         > a:hover {
           background: @control-bg;
         }
+
         &.active > a {
-          background: @primary-color;
+          background: @control-color;
           font-weight: normal;
+          color: @body-bg;
 
           .Button-label,
           .Button-icon {
-            color: @body-bg;
             font-weight: bold;
           }
         }
+
         .Button-icon {
           float: left;
           font-size: 13px !important;
           margin-left: -25px !important;
           margin-top: 4px !important;
         }
+
         .Button-label {
           padding-left: 5px;
           font-size: 14px;
@@ -152,7 +160,7 @@
         .ExtensionListTitle {
           color: @muted-color;
           text-transform: uppercase;
-          margin: 25px 0 15px 15px;
+          margin: 25px 0 8px 15px;
         }
 
         .ExtensionIcon {
@@ -180,6 +188,11 @@
 
 }
 
+.AdminLinkButton-description {
+  white-space: normal;
+  padding-left: 5px;
+}
+
 .ExtensionListItem-Dot {
   height: 10px;
   width: 10px;

less/admin/DashboardPage.less

@@ -10,17 +10,21 @@
   border-radius: @border-radius;
   padding: 20px;
   margin-bottom: 20px;
+
+  .Button {
+    .Button--color(@control-color, @body-bg)
+  }
 }
 
 .StatusWidget {
   color: @muted-color;
 
-  > ul {
+  >ul {
     margin: 0;
     padding: 0;
     list-style-type: none;
 
-    > li {
+    >li {
       display: inline-block;
       margin-right: 30px;
       vertical-align: middle;
@@ -31,6 +35,7 @@
         overflow: hidden;
         text-overflow: ellipsis;
       }
+
       &.item-tools {
         float: right;
         margin-right: 0;

less/admin/ExtensionPage.less

@@ -119,6 +119,11 @@
     }
   }
 
+  .ExtensionPage-settings, .ExtensionPage-permissions {
+    .ExtensionPage-subHeader {
+      margin: 5px 0px;
+    }
+  }
 
   .ExtensionPage-settings {
     margin-top: 20px;
@@ -132,7 +137,6 @@
   .ExtensionPage-subHeader {
     color: @muted-color;
     font-weight: normal;
-    text-align: center;
   }
 
 

less/admin/ExtensionWidget.less

@@ -4,77 +4,75 @@
 }
 
 .ExtensionsWidget-list {
-  > .container {
-    padding: 0;
-    background-color: @body-bg;
+  padding: 0;
+  background-color: @body-bg;
 
-    .ExtensionList-Category {
-      background: @control-bg;
-      padding: 20px 0 20px 20px;
-      margin-bottom: 20px;
-      border-radius: @border-radius;
+  .ExtensionList-Category {
+    background: @control-bg;
+    padding: 20px 0 20px 20px;
+    margin-bottom: 20px;
+    border-radius: @border-radius;
 
-      .ExtensionList-Label {
-        margin-top: 0;
-        color: @muted-color;
-      }
-    }
-
-    .ExtensionGroup {
-      margin-bottom: 20px;
-
-      h3 {
-        color: @muted-color;
-        text-transform: uppercase;
-        font-size: 12px;
-        margin: 0 0 10px;
-      }
-    }
-
-    .ExtensionList {
-      padding: 0;
-      list-style: none;
-      display: grid;
-      grid-gap: 10px;
-      grid-template-columns: repeat(auto-fit, 90px);
-      margin-bottom: 0;
-
-      > li {
-        text-align: left;
-        position: relative;
-        display: block;
-      }
-    }
-  }
-
-  .ExtensionListItem.disabled {
-    .ExtensionListItem-title {
-      opacity: 0.5;
+    .ExtensionList-Label {
+      margin-top: 0;
       color: @muted-color;
     }
+  }
 
-    .ExtensionListItem-icon {
-      opacity: 0.5;
+  .ExtensionGroup {
+    margin-bottom: 20px;
+
+    h3 {
+      color: @muted-color;
+      text-transform: uppercase;
+      font-size: 12px;
+      margin: 0 0 10px;
     }
   }
 
-  .ExtensionListItem {
-    transition: .15s ease-in-out;
+  .ExtensionList {
+    padding: 0;
+    list-style: none;
+    display: grid;
+    grid-gap: 10px;
+    grid-template-columns: repeat(auto-fit, 90px);
+    margin-bottom: 0;
 
-    &:hover {
-      transform: scale(1.05);
-    }
-
-    .ExtensionListItem-title {
+    > li {
+      text-align: left;
+      position: relative;
       display: block;
-      text-align: center;
-      margin-top: 5px;
-      color: @text-color;
     }
+  }
+}
 
-    a:hover {
-      text-decoration: none;
-    }
+.ExtensionListItem.disabled {
+  .ExtensionListItem-title {
+    opacity: 0.5;
+    color: @muted-color;
+  }
+
+  .ExtensionListItem-icon {
+    opacity: 0.5;
+  }
+}
+
+.ExtensionListItem {
+  transition: .15s ease-in-out;
+
+  &:hover {
+    transform: scale(1.05);
+  }
+
+  .ExtensionListItem-title {
+    display: block;
+    text-align: center;
+    margin-top: 5px;
+    color: @text-color;
+  }
+
+  a:hover {
+    text-decoration: none;
   }
 }
 

less/admin/PermissionsPage.less

@@ -5,7 +5,11 @@
   display: block;
   margin-left: 30px;
   overflow-x: auto;
-  padding: 8px 0 8px;
+  padding: 10px 0 8px;
+
+  > .container {
+    padding: 0 10px;
+  }
 }
 .Group {
   width: 90px;
@@ -42,6 +46,7 @@
 
 .PermissionGrid {
   white-space: nowrap;
+  padding-left: 0 12px;
 
   td, th {
     padding: 5px;
@@ -117,7 +122,7 @@
 }
 .PermissionGrid-section {
   td, th {
-    padding-top: 20px;
+    padding-top: 10px;
   }
 }
 .PermissionGrid-child {