[Enterprise Search] Add UserIcon styles (#77385) (#77405)

* Add user icon styles

* Remame avatar to user-icon

x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/user_icon/user_icon.scss

@@ -0,0 +1,137 @@
+.user-icon {
+  border-radius: 50%;
+  overflow: hidden;
+  width: 70px;
+  height: 70px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  position: relative;
+  font-weight: 500;
+  background: $euiColorPrimary;
+  color: $euiColorEmptyShade;
+
+  &:not(.user-icon--small) {
+    font-size: 1.75rem;
+  }
+
+  &--small {
+    width: 30px;
+    height: 30px;
+    font-size: .875rem;
+    margin-right: .5rem;
+  }
+
+  &__text {
+    text-shadow: 0 1px 2px rgba(black, 0.08);
+    justify-content: center;
+    align-items: center;
+    font-size: 1.125rem;
+    color: $euiColorEmptyShade;
+    font-weight: 500;
+
+    .user-icon--small & {
+      font-size: .87rem;
+    }
+  }
+
+  &__image {
+    max-width: 100%;
+    width: 100%;
+    height: auto;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+.group-avatars {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  padding-top: 4px;
+
+  &__additional {
+    line-height: 2;
+    vertical-align: middle;
+    padding-left: 4px;
+  }
+
+  .group-user-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    overflow: hidden;
+    width: 32px;
+    height: 32px;
+
+    & > * {
+      pointer-events: none;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    &__text {
+      padding-bottom: 2px;
+      z-index: 2;
+      line-height: 1;
+      font-weight: 500;
+      color: $euiColorEmptyShade;
+      font-size: .875rem;
+      text-shadow: 0 1px 2px rgba(black, 0.08);
+    }
+
+    &__image {
+      width: 24px;
+      height: 24px;
+    }
+  }
+}
+
+.groups-tooltip {
+  position: relative;
+  display: inline-block;
+
+  &:hover &__container {
+    visibility: visible;
+  }
+
+  &__container {
+    visibility: hidden;
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    box-shadow: 0px 0px 12px rgba(black, 0.15);
+    background: white;
+    text-align: left;
+    text-overflow: ellipsis;
+    min-width: 125px;
+    padding: 6px 10px 6px 10px;
+    border-radius: 3px;
+    z-index: 5;
+    top: 100%;
+    margin-left: -10px;
+  }
+
+  &__text {
+    line-height: 1.5;
+    white-space: nowrap;
+  }
+
+  &__text:before {
+    content:'';
+    display:block;
+    width:0;
+    height:0;
+    position:absolute;
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-bottom: 6px solid white;
+    top: -6px;
+    left: 16px;
+  }
+}

x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/user_icon/user_icon.test.tsx

@@ -15,7 +15,7 @@ describe('SourcesTable', () => {
   it('renders with picture', () => {
     const wrapper = shallow(<UserIcon {...users[0]} />);
 
-    expect(wrapper.find('.avatar')).toHaveLength(1);
+    expect(wrapper.find('.user-icon')).toHaveLength(1);
     expect(wrapper.find('.avatar__image')).toHaveLength(1);
   });
 
@@ -26,7 +26,7 @@ describe('SourcesTable', () => {
     };
     const wrapper = shallow(<UserIcon {...user} />);
 
-    expect(wrapper.find('.avatar')).toHaveLength(1);
+    expect(wrapper.find('.user-icon')).toHaveLength(1);
     expect(wrapper.find('.avatar__text')).toHaveLength(1);
   });
 

x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/user_icon/user_icon.tsx

@@ -8,8 +8,10 @@ import React from 'react';
 
 import { IUser } from '../../../types';
 
+import './user_icon.scss';
+
 export const UserIcon: React.FC<IUser> = ({ name, pictureUrl, color, initials, email }) => (
-  <div className="avatar avatar--small" style={{ backgroundColor: color }}>
+  <div className="user-icon user-icon--small" style={{ backgroundColor: color }}>
     {pictureUrl ? (
       <img src={pictureUrl} className="avatar__image" alt={name || email} />
     ) : (