From 8c659b8b371412e1b00a0ae7af0260c9019ac391 Mon Sep 17 00:00:00 2001 From: 310387 <139059022+310387@users.noreply.github.com> Date: Fri, 28 Jul 2023 02:37:12 +0300 Subject: [PATCH] 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 --- .../activities/comment/CommentHeader.tsx | 4 +- .../command-menu/components/CommandMenu.tsx | 7 +-- .../modules/ui/chip/components/EntityChip.tsx | 2 +- .../__stories__/DropdownMenu.stories.tsx | 4 +- .../components/ShowPageSummaryCard.tsx | 5 +- .../components/MultipleEntitySelect.tsx | 2 +- .../components/SingleEntitySelectBase.tsx | 2 +- front/src/modules/users/components/Avatar.tsx | 51 +++++++++++++++++-- .../components/__stories__/Avatar.stories.tsx | 2 +- .../components/WorkspaceMemberCard.tsx | 2 +- 10 files changed, 59 insertions(+), 22 deletions(-) diff --git a/front/src/modules/activities/comment/CommentHeader.tsx b/front/src/modules/activities/comment/CommentHeader.tsx index ec210e7d6..1f0a9b8b7 100644 --- a/front/src/modules/activities/comment/CommentHeader.tsx +++ b/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) { diff --git a/front/src/modules/command-menu/components/CommandMenu.tsx b/front/src/modules/command-menu/components/CommandMenu.tsx index b7b76d89b..562872127 100644 --- a/front/src/modules/command-menu/components/CommandMenu.tsx +++ b/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() { );*/ - const theme = useTheme(); - return ( @@ -131,7 +128,7 @@ export function CommandMenu() { icon={ diff --git a/front/src/modules/ui/chip/components/EntityChip.tsx b/front/src/modules/ui/chip/components/EntityChip.tsx index 15fdd66b8..fbb19e767 100644 --- a/front/src/modules/ui/chip/components/EntityChip.tsx +++ b/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} /> } diff --git a/front/src/modules/ui/dropdown/components/__stories__/DropdownMenu.stories.tsx b/front/src/modules/ui/dropdown/components/__stories__/DropdownMenu.stories.tsx index f9fa033a1..76f720763 100644 --- a/front/src/modules/ui/dropdown/components/__stories__/DropdownMenu.stories.tsx +++ b/front/src/modules/ui/dropdown/components/__stories__/DropdownMenu.stories.tsx @@ -118,7 +118,7 @@ const FakeSelectableMenuItemList = ({ hasAvatar }: { hasAvatar?: boolean }) => { )} @@ -151,7 +151,7 @@ const FakeCheckableMenuItemList = ({ hasAvatar }: { hasAvatar?: boolean }) => { )} diff --git a/front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx b/front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx index e00cc22fe..e88b86d5e 100644 --- a/front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx +++ b/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 ( diff --git a/front/src/modules/ui/relation-picker/components/MultipleEntitySelect.tsx b/front/src/modules/ui/relation-picker/components/MultipleEntitySelect.tsx index 639ba3054..c7fb611ee 100644 --- a/front/src/modules/ui/relation-picker/components/MultipleEntitySelect.tsx +++ b/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} diff --git a/front/src/modules/ui/relation-picker/components/SingleEntitySelectBase.tsx b/front/src/modules/ui/relation-picker/components/SingleEntitySelectBase.tsx index 978868276..2f11e073f 100644 --- a/front/src/modules/ui/relation-picker/components/SingleEntitySelectBase.tsx +++ b/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'} /> diff --git a/front/src/modules/users/components/Avatar.tsx b/front/src/modules/users/components/Avatar.tsx index 4f9fbf43c..cf7b9ab47 100644 --- a/front/src/modules/users/components/Avatar.tsx +++ b/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` 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({ diff --git a/front/src/modules/users/components/__stories__/Avatar.stories.tsx b/front/src/modules/users/components/__stories__/Avatar.stories.tsx index 1c30ba66f..a5a917e27 100644 --- a/front/src/modules/users/components/__stories__/Avatar.stories.tsx +++ b/front/src/modules/users/components/__stories__/Avatar.stories.tsx @@ -9,7 +9,7 @@ const meta: Meta = { 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; diff --git a/front/src/modules/workspace/components/WorkspaceMemberCard.tsx b/front/src/modules/workspace/components/WorkspaceMemberCard.tsx index 51a29363c..dec25faba 100644 --- a/front/src/modules/workspace/components/WorkspaceMemberCard.tsx +++ b/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" /> {workspaceMember.user.displayName}