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 (
+
+ -
+
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+
+ -
+
+
+ {createdThisYear ? (
+
+ ) : (
+
+ )}
+
+
+
+ );
+};
+
+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}",