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

2 files changed, 7 insertions, 12 deletions

diff --git a/spec/javascripts/groups/components/group_item_spec.js b/spec/javascripts/groups/components/group_item_spec.js
index 4d6d0c895b6..cc88a7ac6c1 100644
--- a/spec/javascripts/groups/components/group_item_spec.js
+++ b/spec/javascripts/groups/components/group_item_spec.js
@@ -156,6 +156,8 @@ describe('GroupItemComponent', () => {
 
   describe('template', () => {
     it('should render component template correctly', () => {
+      const visibilityIconEl = vm.$el.querySelector('.item-visibility');
+
       expect(vm.$el.getAttribute('id')).toBe('group-55');
       expect(vm.$el.classList.contains('group-row')).toBeTruthy();
 
@@ -173,6 +175,11 @@ describe('GroupItemComponent', () => {
 
       expect(vm.$el.querySelector('.title')).toBeDefined();
       expect(vm.$el.querySelector('.title a.no-expand')).toBeDefined();
+
+      expect(visibilityIconEl).not.toBe(null);
+      expect(visibilityIconEl.dataset.originalTitle).toBe(vm.visibilityTooltip);
+      expect(visibilityIconEl.querySelectorAll('svg').length).toBeGreaterThan(0);
+
       expect(vm.$el.querySelector('.access-type')).toBeDefined();
       expect(vm.$el.querySelector('.description')).toBeDefined();
 
diff --git a/spec/javascripts/groups/components/item_stats_spec.js b/spec/javascripts/groups/components/item_stats_spec.js
index 00d6a4817d7..b2441babf3f 100644
--- a/spec/javascripts/groups/components/item_stats_spec.js
+++ b/spec/javascripts/groups/components/item_stats_spec.js
@@ -108,18 +108,6 @@ describe('ItemStatsComponent', () => {
       vm.$destroy();
     });
 
-    it('renders item visibility icon and tooltip correctly', () => {
-      const vm = createComponent();
-
-      const visibilityIconEl = vm.$el.querySelector('.item-visibility');
-
-      expect(visibilityIconEl).not.toBe(null);
-      expect(visibilityIconEl.dataset.originalTitle).toBe(vm.visibilityTooltip);
-      expect(visibilityIconEl.querySelectorAll('svg').length).toBeGreaterThan(0);
-
-      vm.$destroy();
-    });
-
     it('renders start count and last updated information for project item correctly', () => {
       const item = Object.assign({}, mockParentGroupItem, {
         type: ITEM_TYPE.PROJECT,