feat: extension list UI (#4066)

framework/core/less/admin/ExtensionPage.less

@@ -1,4 +1,6 @@
 .ExtensionPage {
+  padding-bottom: 30px;
+
   &-header {
     .helpText {
       margin-bottom: 5px;
@@ -133,7 +135,7 @@
 
   &-body {
     .InfoTile {
-      margin-top: 4rem
+      padding: 4rem 0;
     }
   }
 }

framework/core/less/admin/UsersListPage.less

@@ -36,24 +36,7 @@
 
     // Table refreshing overlay
     &--loadingPage {
-      &::after {
-        content: "";
-        display: block;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        background: rgba(128, 128, 128, 0.2);
-      }
-
-      .LoadingIndicator-container {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-      }
+      .loading-container();
     }
 
     &--loaded,
@@ -88,26 +71,6 @@
       }
     }
   }
-
-  &-gridPagination {
-    display: grid;
-    grid-template-columns: auto auto 1fr auto auto;
-    gap: 8px;
-    align-items: center;
-    justify-content: center;
-    margin-top: 16px;
-  }
-
-  &-pageNumber {
-    text-align: center;
-  }
-
-  &-pageNumberInput {
-    display: inline-block;
-    margin: 0 8px;
-    width: auto;
-    max-width: 80px;
-  }
 }
 
 // Handles styling of default UserList columns

framework/core/less/common/Alert.less

@@ -74,3 +74,6 @@
   align-items: center;
   gap: 8px;
 }
+.Alert-container {
+  display: flex;
+}

framework/core/less/common/Badge.less

@@ -17,6 +17,10 @@
   &, .Badge-icon {
     font-size: calc(~"0.56 * var(--size)");
   }
+
+  &-icon {
+    line-height: normal;
+  }
 }
 
 .Badge--size(@size) {
@@ -51,3 +55,20 @@
 .Badge--hidden {
   --badge-bg: var(--badge-hidden-bg);
 }
+
+.Badge--flat {
+  box-shadow: none;
+}
+
+.Badge--square {
+  border-radius: var(--border-radius);
+}
+
+.Badge--danger {
+  --badge-color: var(--control-danger-color);
+  --badge-bg: var(--control-danger-bg);
+}
+
+.Badge--success {
+  --badge-bg: var(--success-color);
+}

framework/core/less/common/Form.less

@@ -88,6 +88,12 @@
   gap: 10px;
 }
 
+.Form-group--danger {
+  border: 2px solid var(--alert-error-bg);
+  border-radius: var(--border-radius);
+  background-color: transparent;
+}
+
 .FieldSet-items {
   width: 100%;
   gap: 5px;

framework/core/less/common/FormControl.less

@@ -41,6 +41,10 @@
   @media @phone {
     font-size: 16px; // minimum font-size required to prevent page zoom on focus in iOS 10
   }
+
+  &-alt {
+    background-color: var(--body-bg);
+  }
 }
 
 .StackedFormControl {

framework/core/less/common/Pagination.less

@@ -0,0 +1,19 @@
+.Pagination {
+  display: grid;
+  grid-template-columns: auto auto 1fr auto auto;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  margin-top: 16px;
+
+  &-pageNumber {
+    text-align: center;
+  }
+
+  &-input {
+    display: inline-block;
+    margin: 0 8px;
+    width: auto;
+    max-width: 80px;
+  }
+}

framework/core/less/common/Search.less

@@ -47,43 +47,15 @@
     row-gap: 6px;
   }
 
-  &-tabs {
-    &-nav + .Modal-divider {
-      margin-top: 0;
+  &-tabs-content {
+    .Dropdown--expanded();
+
+    .Dropdown-header {
+      color: var(--muted-more-color);
     }
 
-    &-nav {
-      margin-bottom: -1px;
-      display: flex;
-      column-gap: 4px;
-      padding: 0 14px;
-
-      > .Button {
-        border-radius: 0;
-        font-size: 15px;
-        padding: 12px 8px;
-        border-bottom: 2px solid;
-        border-color: transparent;
-
-        &[active] {
-          --button-color: var(--text-color);
-          --link-color: var(--text-color);
-          border-color: var(--primary-color);
-          font-weight: bold;
-        }
-      }
-    }
-
-    &-content {
-      .Dropdown--expanded();
-
-      .Dropdown-header {
-        color: var(--muted-more-color);
-      }
-
-      > .SearchModal-section:first-of-type .Modal-divider {
-        margin-top: -1px;
-      }
+    > .SearchModal-section:first-of-type .Modal-divider {
+      margin-top: -1px;
     }
   }
 

framework/core/less/common/Tabs.less

@@ -0,0 +1,32 @@
+.Tabs {
+  &-nav + .Modal-divider {
+    margin-top: 0;
+  }
+
+  &-nav {
+    margin-bottom: -1px;
+    display: flex;
+    column-gap: 4px;
+    padding: 0 14px;
+
+    > .Button {
+      border-radius: 0;
+      font-size: 15px;
+      padding: 12px 8px;
+      border-bottom: 2px solid;
+      border-color: transparent;
+
+      &[active] {
+        --button-color: var(--text-color);
+        --link-color: var(--text-color);
+        border-color: var(--primary-color);
+        font-weight: bold;
+      }
+    }
+  }
+
+  &-divider {
+    margin-top: -1px;
+    border-width: 1px;
+  }
+}

framework/core/less/common/common.less

@@ -25,11 +25,13 @@
 @import "LoadingIndicator";
 @import "Modal";
 @import "Navigation";
+@import "Pagination";
 @import "Pill";
 @import "Placeholder";
 @import "Search";
 @import "Select";
 @import "Table";
+@import "Tabs";
 @import "TextEditor";
 @import "ThemeMode";
 @import "Tooltip";

framework/core/less/common/scaffolding.less

@@ -73,6 +73,29 @@ p {
   margin: 0 auto;
 }
 
+.loading-container {
+  position: relative;
+
+  &::after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(128, 128, 128, 0.2);
+  }
+
+  .LoadingIndicator-container {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+}
+
 mark {
   background: var(--highlight-color);
   padding: 1px;

framework/core/less/common/variables.less

@@ -143,11 +143,17 @@
 @screen-desktop-max:               (@screen-desktop-hd - 0.02);
 
 @screen-desktop-hd:                1100px;
+@screen-desktop-xl:                1600px;
+@screen-desktop-xxl:               2000px;
+@screen-desktop-xxxl:              3000px;
 
 @phone:                            ~"(max-width: @{screen-phone-max})";
 @tablet:                           ~"(min-width: @{screen-tablet}) and (max-width: @{screen-tablet-max})";
 @desktop:                          ~"(min-width: @{screen-desktop}) and (max-width: @{screen-desktop-max})";
 @desktop-hd:                       ~"(min-width: @{screen-desktop-hd})";
+@desktop-xl:                       ~"(min-width: @{screen-desktop-xl})";
+@desktop-xxl:                      ~"(min-width: @{screen-desktop-xxl})";
+@desktop-xxxl:                     ~"(min-width: @{screen-desktop-xxxl})";
 
 @tablet-up:                        ~"(min-width: @{screen-tablet})";
 @desktop-up:                       ~"(min-width: @{screen-desktop})";