[Glitch] Profile redesign: Username update

Port c0616bcab6feffd5b7ebee4e2ed7ec30292a174d to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/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/flavours/glitch/features/account_timeline/components/account_header.tsx

@@ -146,12 +146,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/flavours/glitch/features/account_timeline/components/account_name.tsx

@@ -6,7 +6,7 @@ import { DisplayName } from '@/flavours/glitch/components/display_name';
 import { Icon } from '@/flavours/glitch/components/icon';
 import { useAccount } from '@/flavours/glitch/hooks/useAccount';
 import { useAppSelector } from '@/flavours/glitch/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/flavours/glitch/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);
   }
 }