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, 14 insertions, 14 deletions

diff --git a/app/assets/javascripts/groups/components/item_actions.vue b/app/assets/javascripts/groups/components/item_actions.vue
index a7995865c77..cafd22731b1 100644
--- a/app/assets/javascripts/groups/components/item_actions.vue
+++ b/app/assets/javascripts/groups/components/item_actions.vue
@@ -44,31 +44,31 @@ export default {
 </script>
 
 <template>
-  <div class="controls">
+  <div class="controls d-flex justify-content-end">
     <a
-      v-if="group.canEdit"
+      v-if="group.canLeave"
       v-tooltip
-      :href="group.editPath"
-      :title="editBtnTitle"
-      :aria-label="editBtnTitle"
+      :href="group.leavePath"
+      :title="leaveBtnTitle"
+      :aria-label="leaveBtnTitle"
       data-container="body"
       data-placement="bottom"
-      class="edit-group btn no-expand"
+      class="leave-group btn btn-xs no-expand"
+      @click.prevent="onLeaveGroup"
     >
-      <icon name="settings" />
+      <icon name="leave" css-classes="position-top-0" />
     </a>
     <a
-      v-if="group.canLeave"
+      v-if="group.canEdit"
       v-tooltip
-      :href="group.leavePath"
-      :title="leaveBtnTitle"
-      :aria-label="leaveBtnTitle"
+      :href="group.editPath"
+      :title="editBtnTitle"
+      :aria-label="editBtnTitle"
       data-container="body"
       data-placement="bottom"
-      class="leave-group btn no-expand"
-      @click.prevent="onLeaveGroup"
+      class="edit-group btn btn-xs no-expand"
     >
-      <icon name="leave" />
+      <icon name="settings" css-classes="position-top-0" />
     </a>
   </div>
 </template>