fix: 906 edit avatar style (#923)

* fix: 906 edit avatar style

* fix: 906 add avatar size enum and mapping for font and height

* fix: 906 remove unused vars

front/src/modules/activities/comment/CommentHeader.tsx

@@ -1,5 +1,4 @@
 import { Tooltip } from 'react-tooltip';
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { Avatar } from '@/users/components/Avatar';
@@ -64,7 +63,6 @@ const StyledTooltip = styled(Tooltip)`
 `;
 
 export function CommentHeader({ comment, actionBar }: OwnProps) {
-  const theme = useTheme();
   const beautifiedCreatedAt = beautifyPastDateRelativeToNow(comment.createdAt);
   const exactCreatedAt = beautifyExactDate(comment.createdAt);
   const showDate = beautifiedCreatedAt !== '';
@@ -79,7 +77,7 @@ export function CommentHeader({ comment, actionBar }: OwnProps) {
       <StyledLeftContainer>
         <Avatar
           avatarUrl={avatarUrl}
-          size={theme.icon.size.md}
+          size="md"
           colorId={author.id}
           placeholder={author.displayName}
         />

front/src/modules/command-menu/components/CommandMenu.tsx

@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import { useTheme } from '@emotion/react';
 import { useRecoilValue } from 'recoil';
 
 import { useFilteredSearchCompanyQuery } from '@/companies/queries';
@@ -82,8 +81,6 @@ export function CommandMenu() {
     </StyledGroup>
   );*/
 
-  const theme = useTheme();
-
   return (
     <StyledDialog
       open={isCommandMenuOpened}
@@ -112,7 +109,7 @@ export function CommandMenu() {
                 icon={
                   <Avatar
                     avatarUrl={person.avatarUrl}
-                    size={theme.icon.size.sm}
+                    size="sm"
                     colorId={person.id}
                     placeholder={person.name}
                   />
@@ -131,7 +128,7 @@ export function CommandMenu() {
                 icon={
                   <Avatar
                     avatarUrl={company.avatarUrl}
-                    size={theme.icon.size.sm}
+                    size="sm"
                     colorId={company.id}
                     placeholder={company.name}
                   />

front/src/modules/ui/chip/components/EntityChip.tsx

@@ -54,7 +54,7 @@ export function EntityChip({
             avatarUrl={pictureUrl}
             colorId={entityId}
             placeholder={name}
-            size={14}
+            size="sm"
             type={avatarType}
           />
         }

front/src/modules/ui/dropdown/components/__stories__/DropdownMenu.stories.tsx

@@ -118,7 +118,7 @@ const FakeSelectableMenuItemList = ({ hasAvatar }: { hasAvatar?: boolean }) => {
             <Avatar
               placeholder="A"
               avatarUrl={item.avatarUrl}
-              size={16}
+              size="md"
               type="squared"
             />
           )}
@@ -151,7 +151,7 @@ const FakeCheckableMenuItemList = ({ hasAvatar }: { hasAvatar?: boolean }) => {
             <Avatar
               placeholder="A"
               avatarUrl={item.avatarUrl}
-              size={16}
+              size="md"
               type="squared"
             />
           )}

front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx

@@ -1,5 +1,4 @@
 import { Tooltip } from 'react-tooltip';
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { v4 as uuidV4 } from 'uuid';
 
@@ -70,16 +69,16 @@ export function ShowPageSummaryCard({
   const beautifiedCreatedAt =
     date !== '' ? beautifyPastDateRelativeToNow(date) : '';
   const exactCreatedAt = date !== '' ? beautifyExactDate(date) : '';
-  const theme = useTheme();
   const dateElementId = `date-id-${uuidV4()}`;
 
   return (
     <StyledShowPageSummaryCard>
       <Avatar
         avatarUrl={logoOrAvatar}
-        size={theme.icon.size.xl}
+        size="xl"
         colorId={id}
         placeholder={title}
+        type="rounded"
       />
       <StyledInfoContainer>
         <StyledTitle>

front/src/modules/ui/relation-picker/components/MultipleEntitySelect.tsx

@@ -74,7 +74,7 @@ export function MultipleEntitySelect<
               avatarUrl={entity.avatarUrl}
               colorId={entity.id}
               placeholder={entity.name}
-              size={16}
+              size="md"
               type={entity.avatarType ?? 'rounded'}
             />
             {entity.name}

front/src/modules/ui/relation-picker/components/SingleEntitySelectBase.tsx

@@ -86,7 +86,7 @@ export function SingleEntitySelectBase<
               avatarUrl={entity.avatarUrl}
               colorId={entity.id}
               placeholder={entity.name}
-              size={16}
+              size="md"
               type={entity.avatarType ?? 'rounded'}
             />
             <OverflowingTextWithTooltip text={entity.name} />

front/src/modules/users/components/Avatar.tsx

@@ -6,10 +6,11 @@ import { stringToHslColor } from '~/utils/string-to-hsl';
 import { getImageAbsoluteURIOrBase64 } from '../utils/getProfilePictureAbsoluteURI';
 
 export type AvatarType = 'squared' | 'rounded';
+export type AvatarSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
 
 type OwnProps = {
   avatarUrl: string | null | undefined;
-  size: number;
+  size: AvatarSize;
   placeholder: string;
   colorId?: string;
   type?: AvatarType;
@@ -27,12 +28,54 @@ export const StyledAvatar = styled.div<OwnProps & { colorId: string }>`
   display: flex;
 
   flex-shrink: 0;
-  font-size: ${({ theme }) => theme.font.size.xs};
+  font-size: ${({ size }) => {
+    switch (size) {
+      case 'xl':
+        return '16px';
+      case 'lg':
+        return '13px';
+      case 'md':
+      default:
+        return '12px';
+      case 'sm':
+        return '10px';
+      case 'xs':
+        return '8px';
+    }
+  }};
   font-weight: ${({ theme }) => theme.font.weight.medium};
 
-  height: ${(props) => props.size}px;
+  height: ${({ size }) => {
+    switch (size) {
+      case 'xl':
+        return '40px';
+      case 'lg':
+        return '24px';
+      case 'md':
+      default:
+        return '16px';
+      case 'sm':
+        return '14px';
+      case 'xs':
+        return '12px';
+    }
+  }};
   justify-content: center;
-  width: ${(props) => props.size}px;
+  width: ${({ size }) => {
+    switch (size) {
+      case 'xl':
+        return '40px';
+      case 'lg':
+        return '24px';
+      case 'md':
+      default:
+        return '16px';
+      case 'sm':
+        return '14px';
+      case 'xs':
+        return '12px';
+    }
+  }};
 `;
 
 export function Avatar({

front/src/modules/users/components/__stories__/Avatar.stories.tsx

@@ -9,7 +9,7 @@ const meta: Meta<typeof Avatar> = {
   title: 'Modules/Users/Avatar',
   component: Avatar,
   decorators: [ComponentDecorator],
-  args: { avatarUrl, size: 16, placeholder: 'L', type: 'rounded' },
+  args: { avatarUrl, size: 'md', placeholder: 'L', type: 'rounded' },
 };
 
 export default meta;

front/src/modules/workspace/components/WorkspaceMemberCard.tsx

@@ -48,7 +48,7 @@ export function WorkspaceMemberCard({ workspaceMember, accessory }: OwnProps) {
         colorId={workspaceMember.user.id}
         placeholder={workspaceMember.user.firstName || ''}
         type="squared"
-        size={40}
+        size="xl"
       />
       <Content>
         <NameText>{workspaceMember.user.displayName}</NameText>