Profile redesign: Username update (#37627)

app/javascript/mastodon/features/account/components/domain_pill.tsx

@@ -44,8 +44,7 @@ export const DomainPill: React.FC<{
         aria-controls={accessibilityId}
         type='button'
       >
-        {domain}
-        {children}
+        {children ?? domain}
       </button>
 
       <Overlay

app/javascript/mastodon/features/account_timeline/components/account_header.tsx

@@ -142,12 +142,7 @@ export const AccountHeader: React.FC<{
               isRedesignEnabled() && redesignClasses.nameWrapper,
             )}
           >
-            <AccountName
-              accountId={accountId}
-              className={classNames(
-                isRedesignEnabled() && redesignClasses.name,
-              )}
-            />
+            <AccountName accountId={accountId} />
             {isRedesignEnabled() && <AccountButtons accountId={accountId} />}
           </div>
 

app/javascript/mastodon/features/account_timeline/components/account_name.tsx

@@ -6,7 +6,7 @@ import { DisplayName } from '@/mastodon/components/display_name';
 import { Icon } from '@/mastodon/components/icon';
 import { useAccount } from '@/mastodon/hooks/useAccount';
 import { useAppSelector } from '@/mastodon/store';
-import InfoIcon from '@/material-icons/400-24px/info.svg?react';
+import HelpIcon from '@/material-icons/400-24px/help.svg?react';
 import LockIcon from '@/material-icons/400-24px/lock.svg?react';
 
 import { DomainPill } from '../../account/components/domain_pill';
@@ -14,10 +14,7 @@ import { isRedesignEnabled } from '../common';
 
 import classes from './redesign.module.scss';
 
-export const AccountName: FC<{ accountId: string; className?: string }> = ({
-  accountId,
-  className,
-}) => {
+export const AccountName: FC<{ accountId: string }> = ({ accountId }) => {
   const intl = useIntl();
   const account = useAccount(accountId);
   const me = useAppSelector((state) => state.meta.get('me') as string);
@@ -31,38 +28,52 @@ export const AccountName: FC<{ accountId: string; className?: string }> = ({
 
   const [username = '', domain = localDomain] = account.acct.split('@');
 
-  return (
-    <h1 className={className}>
-      <DisplayName account={account} variant='simple' />
-      <small>
-        <span>
-          @{username}
-          {isRedesignEnabled() && '@'}
-          <span className='invisible'>
-            {!isRedesignEnabled() && '@'}
-            {domain}
+  if (!isRedesignEnabled()) {
+    return (
+      <h1>
+        <DisplayName account={account} variant='simple' />
+        <small>
+          <span>
+            @{username}
+            <span className='invisible'>@{domain}</span>
           </span>
-        </span>
+          <DomainPill
+            username={username}
+            domain={domain}
+            isSelf={me === account.id}
+          />
+          {account.locked && (
+            <Icon
+              id='lock'
+              icon={LockIcon}
+              aria-label={intl.formatMessage({
+                id: 'account.locked_info',
+                defaultMessage:
+                  'This account privacy status is set to locked. The owner manually reviews who can follow them.',
+              })}
+            />
+          )}
+        </small>
+      </h1>
+    );
+  }
+
+  return (
+    <div className={classes.name}>
+      <h1>
+        <DisplayName account={account} variant='simple' />
+      </h1>
+      <p className={classes.username}>
+        @{username}@{domain}
         <DomainPill
           username={username}
           domain={domain}
           isSelf={me === account.id}
-          className={(isRedesignEnabled() && classes.domainPill) || ''}
+          className={classes.domainPill}
         >
-          {isRedesignEnabled() && <Icon id='info' icon={InfoIcon} />}
+          <Icon id='help' icon={HelpIcon} />
         </DomainPill>
-        {!isRedesignEnabled() && account.locked && (
-          <Icon
-            id='lock'
-            icon={LockIcon}
-            aria-label={intl.formatMessage({
-              id: 'account.locked_info',
-              defaultMessage:
-                'This account privacy status is set to locked. The owner manually reviews who can follow them.',
-            })}
-          />
-        )}
-      </small>
-    </h1>
+      </p>
+    </div>
   );
 };

app/javascript/mastodon/features/account_timeline/components/redesign.module.scss

@@ -7,20 +7,16 @@
   flex-grow: 1;
   font-size: 22px;
   white-space: initial;
-  text-overflow: initial;
   line-height: normal;
-
-  :global(.icon-info) {
-    margin-left: 2px;
-    width: 1em;
-    height: 1em;
-    align-self: center;
-  }
 }
 
-// Overrides .account__header__tabs__name h1 small
-h1.name > small {
-  gap: 0;
+.username {
+  display: flex;
+  font-size: 13px;
+  color: var(--color-text-secondary);
+  align-items: center;
+  user-select: all;
+  margin-top: 4px;
 }
 
 .domainPill {
@@ -32,10 +28,20 @@ h1.name > small {
   color: inherit;
   font-size: 1em;
   font-weight: initial;
+  margin-left: 2px;
+  width: 16px;
+  height: 16px;
+  transition: color 0.2s ease-in-out;
 
+  > svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  &:hover,
   &:global(.active) {
     background: none;
-    color: inherit;
+    color: var(--color-text-brand-soft);
   }
 }
 

app/javascript/material-icons/400-24px/help-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>

app/javascript/material-icons/400-24px/help.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>