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

1 files changed, 6 insertions, 2 deletions

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,