diff --git a/app/javascript/mastodon/features/account_timeline/components/number_fields.tsx b/app/javascript/mastodon/features/account_timeline/components/number_fields.tsx index 41d5c36ed7..98de08ee4d 100644 --- a/app/javascript/mastodon/features/account_timeline/components/number_fields.tsx +++ b/app/javascript/mastodon/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/mastodon/features/account_timeline/components/redesign.module.scss b/app/javascript/mastodon/features/account_timeline/components/redesign.module.scss index e761c761d9..bf3736c096 100644 --- a/app/javascript/mastodon/features/account_timeline/components/redesign.module.scss +++ b/app/javascript/mastodon/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; } } diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json index e0759e26ce..f3b35a7741 100644 --- a/app/javascript/mastodon/locales/en.json +++ b/app/javascript/mastodon/locales/en.json @@ -73,7 +73,6 @@ "account.go_to_profile": "Go to profile", "account.hide_reblogs": "Hide boosts from @{name}", "account.in_memoriam": "In Memoriam.", - "account.joined_long": "Joined on {date}", "account.joined_short": "Joined", "account.languages": "Change subscribed languages", "account.link_verified_on": "Ownership of this link was checked on {date}",