Style avatars for groups and projects

- Add rectangular avatar classes
- Update avatar for groups
- Update avatar for projects
- Update avatar for frequent items
- Update avatar on "Fork project" page
- Conditionally add rectangular avatar class to autocomplete items

4 files changed, 23 insertions, 7 deletions

diff --git a/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue b/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue
index 2cbc7c7077b..42d14b65b3a 100644
--- a/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue
+++ b/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue
@@ -82,8 +82,14 @@ export default {
   <li class="frequent-items-list-item-container">
     <a :href="webUrl" class="clearfix">
       <div class="frequent-items-item-avatar-container">
-        <img v-if="hasAvatar" :src="avatarUrl" class="avatar s32" />
-        <identicon v-else :entity-id="itemId" :entity-name="itemName" size-class="s32" />
+        <img v-if="hasAvatar" :src="avatarUrl" class="avatar rect-avatar s32" />
+        <identicon
+          v-else
+          :entity-id="itemId"
+          :entity-name="itemName"
+          size-class="s32"
+          class="rect-avatar"
+        />
       </div>
       <div class="frequent-items-item-metadata-container">
         <div :title="itemName" class="frequent-items-item-title" v-html="highlightedItemName"></div>
diff --git a/app/assets/javascripts/gfm_auto_complete.js b/app/assets/javascripts/gfm_auto_complete.js
index 570d3b712e0..c81e754df4c 100644
--- a/app/assets/javascripts/gfm_auto_complete.js
+++ b/app/assets/javascripts/gfm_auto_complete.js
@@ -195,11 +195,15 @@ class GfmAutoComplete {
               title += ` (${m.count})`;
             }
 
+            const GROUP_TYPE = 'Group';
+
             const autoCompleteAvatar = m.avatar_url || m.username.charAt(0).toUpperCase();
+
+            const rectAvatarClass = m.type === GROUP_TYPE ? 'rect-avatar' : '';
             const imgAvatar = `<img src="${m.avatar_url}" alt="${
               m.username
-            }" class="avatar avatar-inline center s26"/>`;
-            const txtAvatar = `<div class="avatar center avatar-inline s26">${autoCompleteAvatar}</div>`;
+            }" class="avatar ${rectAvatarClass} avatar-inline center s26"/>`;
+            const txtAvatar = `<div class="avatar ${rectAvatarClass} center avatar-inline s26">${autoCompleteAvatar}</div>`;
 
             return {
               username: m.username,
diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index 688bd37cc56..d5130cd331d 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -88,7 +88,7 @@ export default {
       </div>
       <div
         :class="{ 'content-loading': group.isChildrenLoading }"
-        class="avatar-container s24 d-none d-sm-flex"
+        class="avatar-container rect-avatar s24 d-none d-sm-flex"
       >
         <a :href="group.relativePath" class="no-expand">
           <img v-if="hasAvatar" :src="group.avatarUrl" class="avatar s24" />
diff --git a/app/assets/javascripts/vue_shared/components/project_avatar/default.vue b/app/assets/javascripts/vue_shared/components/project_avatar/default.vue
index b399c232937..881b5059d2a 100644
--- a/app/assets/javascripts/vue_shared/components/project_avatar/default.vue
+++ b/app/assets/javascripts/vue_shared/components/project_avatar/default.vue
@@ -26,7 +26,7 @@ export default {
 </script>
 
 <template>
-  <span :class="sizeClass" class="avatar-container project-avatar">
+  <span :class="sizeClass" class="avatar-container rect-avatar project-avatar">
     <project-avatar-image
       v-if="project.avatar_url"
       :link-href="project.path"
@@ -34,6 +34,12 @@ export default {
       :img-alt="project.name"
       :img-size="size"
     />
-    <identicon v-else :entity-id="project.id" :entity-name="project.name" :size-class="sizeClass" />
+    <identicon
+      v-else
+      :entity-id="project.id"
+      :entity-name="project.name"
+      :size-class="sizeClass"
+      class="rect-avatar"
+    />
   </span>
 </template>