diff --git a/src/components/IssueStats/IssueStats.tsx b/src/components/IssueStats/IssueStats.tsx index b24e3de54..b64b1f32d 100644 --- a/src/components/IssueStats/IssueStats.tsx +++ b/src/components/IssueStats/IssueStats.tsx @@ -2,8 +2,8 @@ import { useMemo } from 'react'; import styled from 'styled-components'; import { gapXs, gray8 } from '@taskany/colors'; import { Dot, Text, Link, nullable, CircleProgressBar } from '@taskany/bricks'; +import { IconMessageOutline } from '@taskany/icons'; -import { pluralize } from '../../utils/pluralize'; import { formatEstimate } from '../../utils/dateTime'; import { useLocale } from '../../hooks/useLocale'; import { ActivityByIdReturnType } from '../../../trpc/inferredTypes'; @@ -11,8 +11,6 @@ import { getPriorityText } from '../PriorityText/PriorityText'; import { UserGroup } from '../UserGroup'; import { RelativeTime } from '../RelativeTime/RelativeTime'; -import { tr } from './IssueStats.i18n'; - interface IssueStatsProps { updatedAt: Date; comments: number; @@ -26,6 +24,7 @@ interface IssueStatsProps { } const StyledIssueStats = styled(Text)>` + display: flex; ${({ mode }) => mode === 'default' && ` @@ -34,8 +33,9 @@ const StyledIssueStats = styled(Text)>` `; const StyledDotSep = styled.span` - display: inline-block; - vertical-align: middle; + display: flex; + align-items: center; +} `; const StyledCircleProgressBar = styled(CircleProgressBar)` @@ -43,13 +43,18 @@ const StyledCircleProgressBar = styled(CircleProgressBar)` `; const StyledUserGroupContainer = styled.span` + display: flex; + vertical-align: middle; +`; +const CommentsCountIcon = styled(IconMessageOutline)` display: inline-block; vertical-align: middle; `; const DotSep: React.FC<{ children: React.ReactNode }> = ({ children }) => ( - {children} + + {children} ); @@ -100,14 +105,7 @@ export const IssueStats: React.FC = ({ {nullable(comments, () => ( - {comments}{' '} - {pluralize({ - locale, - count: comments, - one: tr('one'), - few: tr('few'), - many: tr('many'), - })} + {comments} ))}