Improve group list UI

This updates the groups list UI to match the style of the project list:

- New layout
- Improve loading state when loading group children
- Larger, responsive text
- Icon and text colors changed to secondary
- Smaller button sizes
- Content list description colors were standardized to body text

1 files changed, 31 insertions, 49 deletions

diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index 656202f4e58..cff2e274390 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -168,12 +168,6 @@
   }
 }
 
-.groups-listing {
-  .group-list-tree .group-row:first-child {
-    border-top: 0;
-  }
-}
-
 .card {
   .shared_runners_limit_under_quota {
     color: $green-500;
@@ -260,7 +254,6 @@ table.pipeline-project-metrics tr td {
   color: $gl-text-color-secondary;
   font-size: 12px;
   line-height: 20px;
-  margin: -5px 3px;
   padding: 0 $label-padding;
   border: 1px solid $border-color;
   border-radius: $label-border-radius;
@@ -294,39 +287,6 @@ table.pipeline-project-metrics tr td {
 }
 
 .group-list-tree {
-  .avatar-container.content-loading {
-    position: relative;
-
-    > a,
-    > a .avatar {
-      height: 100%;
-      border-radius: 50%;
-    }
-
-    > a {
-      padding: 2px;
-
-      .avatar {
-        border: 2px solid $white-normal;
-
-        &.identicon {
-          line-height: 15px;
-        }
-      }
-    }
-
-    &::after {
-      content: '';
-      position: absolute;
-      height: 100%;
-      width: 100%;
-      background-color: transparent;
-      border: 2px outset $gl-gray-200;
-      border-radius: 50%;
-      animation: spin-avatar 3s infinite linear;
-    }
-  }
-
   .folder-toggle-wrap {
     font-size: 0;
     flex-shrink: 0;
@@ -339,13 +299,14 @@ table.pipeline-project-metrics tr td {
   .folder-caret,
   .item-type-icon {
     display: inline-block;
+    color: $gl-text-color-secondary;
   }
 
   .folder-caret {
-    width: 15px;
+    width: $gl-font-size-large;
 
     svg {
-      margin-bottom: 1px;
+      margin-bottom: 2px;
     }
   }
 
@@ -420,7 +381,7 @@ table.pipeline-project-metrics tr td {
   }
 
   .group-row-contents {
-    padding: $gl-padding-top;
+    padding: $gl-padding;
 
     &:hover {
       border-color: $blue-200;
@@ -428,10 +389,15 @@ table.pipeline-project-metrics tr td {
       cursor: pointer;
     }
 
+    .group-text-container,
     .group-text {
       min-width: 0; // allows for truncated text within flex children
     }
 
+    .group-text {
+      flex-basis: 100%;
+    }
+
     .avatar-container {
       flex-shrink: 0;
 
@@ -441,6 +407,21 @@ table.pipeline-project-metrics tr td {
       }
     }
 
+    .title {
+      margin-top: -$gl-padding-8; // negative margin required for flex-wrap
+      font-size: $gl-font-size-large;
+    }
+
+    .item-visibility {
+      color: $gl-text-color-secondary;
+    }
+
+    @include media-breakpoint-down(md) {
+      .title {
+        font-size: $gl-font-size;
+      }
+    }
+
     &.has-more-items {
       display: block;
       padding: 20px 10px;
@@ -477,17 +458,18 @@ table.pipeline-project-metrics tr td {
     }
 
     .controls {
-      flex-shrink: 0;
+      flex-basis: 90px;
 
       > .btn {
-        margin: 0 0 0 $btn-margin-5;
+        margin: 0 $btn-side-margin 0 0;
+        color: $gl-text-color-secondary;
       }
     }
-  }
 
-  @include media-breakpoint-down(xs) {
-    .group-stats {
-      display: none;
+    .metadata {
+      @include media-breakpoint-up(md) {
+        flex-basis: 240px;
+      }
     }
   }