AdminUX Patch and Admin Page (#2593)

* AdminPage

* More fixes

* Settings Modal Drop

* Translation and docblock

* settingS

* Convert Fieldset to JSX

* info -> headerInfo, className

* Overflow fixes

* MailPage

* Admin Less

* Basics Page

* Changes

* Cleanup

* Permission Page

* Add padding

framework/core/less/admin/AdminNav.less

@@ -206,7 +206,7 @@
 .ExtensionNavButton {
   .Button-label {
     display: inline-block;
-    max-width: calc(100% - 18px);
+    max-width: ~"calc(100% - 18px)";
     overflow: hidden;
     text-overflow: ellipsis;
     vertical-align: middle;

framework/core/less/admin/AppearancePage.less

@@ -1,4 +1,5 @@
 .AppearancePage {
+  padding-bottom: 30px;
 
   @media @desktop-up {
     .container {
@@ -14,8 +15,16 @@
 .AppearancePage-colors-input {
   overflow: hidden;
 
+  .Form-group {
+    display: inline-block;
+  }
+
+  .Form-group:last-child {
+    margin-bottom: 24px !important;
+    margin-left: 10px;
+  }
+
   input {
-    width: 49%;
     float: left;
 
     &:first-child {
@@ -23,7 +32,7 @@
     }
   }
 }
-.AppearancePage-colors-input,
+
 .AppearancePage-colors .Checkbox {
   margin-bottom: 15px;
 }

framework/core/less/admin/BasicsPage.less

@@ -1,4 +1,5 @@
 .BasicsPage {
+  padding-bottom: 30px;
 
   @media @desktop-up {
     .container {
@@ -7,26 +8,27 @@
     }
   }
 
-  fieldset {
+  .Form-group {
     margin-bottom: 20px;
+  }
 
-    > ul {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-    }
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
   }
 }
 
 .BasicsPage-welcomeBanner-input {
-  :first-child {
+  input {
     margin-bottom: 1px;
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
     font-weight: bold;
   }
-  :last-child {
+  textarea {
     border-top-right-radius: 0;
     border-top-left-radius: 0;
+    margin-bottom: 10px;
   }
 }

framework/core/less/admin/DashboardPage.less

@@ -2,6 +2,7 @@
   background: @body-bg;
   color: @control-color;
   min-height: 100vh;
+  padding-bottom: 30px;
 }
 
 .Widget {

framework/core/less/admin/ExtensionPage.less

@@ -1,5 +1,4 @@
 .ExtensionPage {
-  min-height: 110vh;
 
   .ExtensionPage-header {
     .ExtensionTitle {
@@ -142,11 +141,13 @@
 
   .ExtensionPage-permissions {
 
-    @media @phone {
-      > .container {
-        overflow-x: scroll;
-        padding-bottom: 20px;
-      }
+    .PermissionGrid-removeScope {
+      display: none;
+    }
+
+    > .container {
+      overflow-x: auto;
+      padding-bottom: 25vh;
     }
 
     .ExtensionPage-permissions-header {

framework/core/less/admin/ExtensionWidget.less

@@ -7,18 +7,6 @@
   padding: 0;
   background-color: @body-bg;
 
-  .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;
 
@@ -46,6 +34,18 @@
   }
 }
 
+.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;
+}
+
 .ExtensionListItem.disabled {
   .ExtensionListItem-title {
     opacity: 0.5;
@@ -64,18 +64,18 @@
     transform: scale(1.05);
   }
 
-  .ExtensionListItem-title {
-    display: block;
-    text-align: center;
-    margin-top: 5px;
-    color: @text-color;
-  }
-
   a:hover {
     text-decoration: none;
   }
 }
 
+.ExtensionListItem-title {
+  display: block;
+  text-align: center;
+  margin-top: 5px;
+  color: @text-color;
+}
+
 .ExtensionIcon {
   width: 90px;
   height: 90px;

framework/core/less/admin/MailPage.less

@@ -1,4 +1,5 @@
 .MailPage {
+  padding-bottom: 30px;
 
   @media @desktop-up {
     .container {
@@ -7,11 +8,11 @@
     }
   }
 
-  fieldset, .Alert {
+  button, .Alert {
     margin-bottom: 20px;
   }
 
-  fieldset > ul {
+  ul {
     list-style: none;
     margin: 0;
     padding: 0;

framework/core/less/admin/PermissionsPage.less

@@ -1,15 +1,9 @@
 .PermissionsPage-groups {
   background: @control-bg;
   border-radius: @border-radius;
-  max-width: calc(~'100% - 60px');
   display: block;
-  margin-left: 30px;
   overflow-x: auto;
-  padding: 10px 0 8px;
-
-  > .container {
-    padding: 0 10px;
-  }
+  padding: 10px;
 }
 .Group {
   width: 90px;
@@ -46,7 +40,6 @@
 
 .PermissionGrid {
   white-space: nowrap;
-  padding-left: 0 12px;
 
   td, th {
     padding: 5px;