diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/number_fields.tsx b/app/javascript/flavours/glitch/features/account_timeline/components/number_fields.tsx index a1118d9c5a..9ec639f75c 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/number_fields.tsx +++ b/app/javascript/flavours/glitch/features/account_timeline/components/number_fields.tsx @@ -1,3 +1,4 @@ +import { useMemo } from 'react'; import type { FC } from 'react'; import { FormattedMessage, useIntl } from 'react-intl'; @@ -18,9 +19,7 @@ import { isRedesignEnabled } from '../common'; import classes from './redesign.module.scss'; -export const AccountNumberFields: FC<{ accountId: string }> = ({ - accountId, -}) => { +const LegacyNumberFields: FC<{ accountId: string }> = ({ accountId }) => { const intl = useIntl(); const account = useAccount(accountId); @@ -29,23 +28,16 @@ export const AccountNumberFields: FC<{ accountId: string }> = ({ } return ( -
- {!isRedesignEnabled() && ( - - - - )} +
+ + + = ({ renderer={FollowersCounter} /> - - {isRedesignEnabled() && ( - - - - ), - }} - /> - )}
); }; + +const RedesignNumberFields: FC<{ accountId: string }> = ({ accountId }) => { + const intl = useIntl(); + const account = useAccount(accountId); + const createdThisYear = useMemo( + () => account?.created_at.includes(new Date().getFullYear().toString()), + [account?.created_at], + ); + + if (!account) { + return null; + } + + return ( + + ); +}; + +export const AccountNumberFields = isRedesignEnabled() + ? RedesignNumberFields + : LegacyNumberFields; diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/redesign.module.scss b/app/javascript/flavours/glitch/features/account_timeline/components/redesign.module.scss index e761c761d9..bf3736c096 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/redesign.module.scss +++ b/app/javascript/flavours/glitch/features/account_timeline/components/redesign.module.scss @@ -308,16 +308,34 @@ svg.badgeIcon { } .fieldNumbersWrapper { + display: flex; font-size: 13px; padding: 0; + margin: 8px 0; + gap: 20px; + + li { + @container (width < 420px) { + flex: 1 1 0px; + } + } a { + color: inherit; font-weight: unset; + padding: 0; + + &:hover, + &:focus { + color: var(--color-text-brand-soft); + } } strong { + display: block; font-weight: 600; color: var(--color-text-primary); + font-size: 15px; } }