Profile redesign: Adjust account number fields to be stacked (#38283)

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 (
-    <div
-      className={classNames(
-        'account__header__extra__links',
-        isRedesignEnabled() && classes.fieldNumbersWrapper,
-      )}
-    >
-      {!isRedesignEnabled() && (
-        <NavLink
-          to={`/@${account.acct}`}
-          title={intl.formatNumber(account.statuses_count)}
-        >
-          <ShortNumber
-            value={account.statuses_count}
-            renderer={StatusesCounter}
-          />
-        </NavLink>
-      )}
+    <div className='account__header__extra__links'>
+      <NavLink
+        to={`/@${account.acct}`}
+        title={intl.formatNumber(account.statuses_count)}
+      >
+        <ShortNumber
+          value={account.statuses_count}
+          renderer={StatusesCounter}
+        />
+      </NavLink>
 
       <NavLink
         exact
@@ -68,25 +60,80 @@ export const AccountNumberFields: FC<{ accountId: string }> = ({
           renderer={FollowersCounter}
         />
       </NavLink>
-
-      {isRedesignEnabled() && (
-        <FormattedMessage
-          id='account.joined_long'
-          defaultMessage='Joined on {date}'
-          values={{
-            date: (
-              <strong>
-                <FormattedDateWrapper
-                  value={account.created_at}
-                  year='numeric'
-                  month='short'
-                  day='2-digit'
-                />
-              </strong>
-            ),
-          }}
-        />
-      )}
     </div>
   );
 };
+
+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 (
+    <ul
+      className={classNames(
+        'account__header__extra__links',
+        classes.fieldNumbersWrapper,
+      )}
+    >
+      <li>
+        <FormattedMessage id='account.posts' defaultMessage='Posts' />
+        <strong>
+          <ShortNumber value={account.statuses_count} />
+        </strong>
+      </li>
+
+      <li>
+        <NavLink
+          exact
+          to={`/@${account.acct}/followers`}
+          title={intl.formatNumber(account.followers_count)}
+        >
+          <FormattedMessage id='account.followers' defaultMessage='Followers' />
+          <strong>
+            <ShortNumber value={account.followers_count} />
+          </strong>
+        </NavLink>
+      </li>
+
+      <li>
+        <NavLink
+          exact
+          to={`/@${account.acct}/following`}
+          title={intl.formatNumber(account.following_count)}
+        >
+          <FormattedMessage id='account.following' defaultMessage='Following' />
+          <strong>
+            <ShortNumber value={account.following_count} />
+          </strong>
+        </NavLink>
+      </li>
+
+      <li>
+        <FormattedMessage id='account.joined_short' defaultMessage='Joined' />
+        <strong>
+          {createdThisYear ? (
+            <FormattedDateWrapper
+              value={account.created_at}
+              month='short'
+              day='2-digit'
+            />
+          ) : (
+            <FormattedDateWrapper value={account.created_at} year='numeric' />
+          )}
+        </strong>
+      </li>
+    </ul>
+  );
+};
+
+export const AccountNumberFields = isRedesignEnabled()
+  ? RedesignNumberFields
+  : LegacyNumberFields;

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;
   }
 }
 

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}",