Merge commit '562ea656f495f0619e393b7d93bd07c5abd28e5a' into glitch-soc/merge-upstream

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

@@ -1,9 +1,16 @@
-import type { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 
+import IconAdmin from '@/images/icons/icon_admin.svg?react';
 import { AutomatedBadge, Badge, GroupBadge } from '@/mastodon/components/badge';
+import { Icon } from '@/mastodon/components/icon';
 import { useAccount } from '@/mastodon/hooks/useAccount';
+import type { AccountRole } from '@/mastodon/models/account';
 import { useAppSelector } from '@/mastodon/store';
 
+import { isRedesignEnabled } from '../common';
+
+import classes from './redesign.module.scss';
+
 export const AccountBadges: FC<{ accountId: string }> = ({ accountId }) => {
   const account = useAccount(accountId);
   const localDomain = useAppSelector(
@@ -15,22 +22,32 @@ export const AccountBadges: FC<{ accountId: string }> = ({ accountId }) => {
     return null;
   }
 
+  const className = isRedesignEnabled() ? classes.badge : '';
+
   if (account.bot) {
-    badges.push(<AutomatedBadge key='bot-badge' />);
+    badges.push(<AutomatedBadge key='bot-badge' className={className} />);
   } else if (account.group) {
-    badges.push(<GroupBadge key='group-badge' />);
+    badges.push(<GroupBadge key='group-badge' className={className} />);
   }
 
   const domain = account.acct.includes('@')
     ? account.acct.split('@')[1]
     : localDomain;
   account.roles.forEach((role) => {
+    let icon: ReactNode = undefined;
+    if (isAdminBadge(role)) {
+      icon = (
+        <Icon icon={IconAdmin} id='badge-admin' className={classes.badgeIcon} />
+      );
+    }
     badges.push(
       <Badge
-        key={`role-badge-${role.get('id')}`}
-        label={<span>{role.get('name')}</span>}
-        domain={domain}
-        roleId={role.get('id')}
+        key={role.id}
+        label={role.name}
+        className={className}
+        domain={isRedesignEnabled() ? `(${domain})` : domain}
+        roleId={role.id}
+        icon={icon}
       />,
     );
   });
@@ -39,5 +56,10 @@ export const AccountBadges: FC<{ accountId: string }> = ({ accountId }) => {
     return null;
   }
 
-  return <div className='account__header__badges'>{badges}</div>;
+  return <div className={'account__header__badges'}>{badges}</div>;
 };
+
+function isAdminBadge(role: AccountRole) {
+  const name = role.name.toLowerCase();
+  return isRedesignEnabled() && (name === 'admin' || name === 'owner');
+}

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

@@ -3,10 +3,14 @@ import type { FC } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
+import classNames from 'classnames';
+
+import IconVerified from '@/images/icons/icon_verified.svg?react';
 import { openModal } from '@/mastodon/actions/modal';
 import { AccountFields } from '@/mastodon/components/account_fields';
 import { EmojiHTML } from '@/mastodon/components/emoji/html';
 import { FormattedDateWrapper } from '@/mastodon/components/formatted_date';
+import { Icon } from '@/mastodon/components/icon';
 import { MiniCardList } from '@/mastodon/components/mini_card/list';
 import { useElementHandledLink } from '@/mastodon/components/status/handled_link';
 import { useAccount } from '@/mastodon/hooks/useAccount';
@@ -55,25 +59,40 @@ const RedesignAccountHeaderFields: FC<{ account: Account }> = ({ account }) => {
   const htmlHandlers = useElementHandledLink();
   const cards = useMemo(
     () =>
-      account.fields.toArray().map(({ value_emojified, name_emojified }) => ({
-        label: (
-          <EmojiHTML
-            htmlString={name_emojified}
-            extraEmojis={account.emojis}
-            className='translate'
-            as='span'
-            {...htmlHandlers}
-          />
-        ),
-        value: (
-          <EmojiHTML
-            as='span'
-            htmlString={value_emojified}
-            extraEmojis={account.emojis}
-            {...htmlHandlers}
-          />
-        ),
-      })),
+      account.fields
+        .toArray()
+        .map(({ value_emojified, name_emojified, verified_at }) => ({
+          label: (
+            <>
+              <EmojiHTML
+                htmlString={name_emojified}
+                extraEmojis={account.emojis}
+                className='translate'
+                as='span'
+                {...htmlHandlers}
+              />
+              {!!verified_at && (
+                <Icon
+                  id='verified'
+                  icon={IconVerified}
+                  className={classes.fieldIconVerified}
+                />
+              )}
+            </>
+          ),
+          value: (
+            <EmojiHTML
+              as='span'
+              htmlString={value_emojified}
+              extraEmojis={account.emojis}
+              {...htmlHandlers}
+            />
+          ),
+          className: classNames(
+            classes.fieldCard,
+            !!verified_at && classes.fieldCardVerified,
+          ),
+        })),
     [account.emojis, account.fields, htmlHandlers],
   );
 

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

@@ -2,9 +2,11 @@ import type { FC } from 'react';
 
 import { FormattedMessage, useIntl } from 'react-intl';
 
+import IconVerified from '@/images/icons/icon_verified.svg?react';
 import { DisplayName } from '@/mastodon/components/display_name';
 import { AnimateEmojiProvider } from '@/mastodon/components/emoji/context';
 import { EmojiHTML } from '@/mastodon/components/emoji/html';
+import { Icon } from '@/mastodon/components/icon';
 import { IconButton } from '@/mastodon/components/icon_button';
 import { LoadingIndicator } from '@/mastodon/components/loading_indicator';
 import { useElementHandledLink } from '@/mastodon/components/status/handled_link';
@@ -56,7 +58,10 @@ export const AccountFieldsModal: FC<{
         <AnimateEmojiProvider>
           <dl className={classes.modalFieldsList}>
             {account.fields.map((field, index) => (
-              <div key={index} className={classes.modalFieldItem}>
+              <div
+                key={index}
+                className={`${classes.modalFieldItem} ${classes.fieldCard}`}
+              >
                 <EmojiHTML
                   as='dt'
                   htmlString={field.name_emojified}
@@ -64,12 +69,21 @@ export const AccountFieldsModal: FC<{
                   className='translate'
                   {...htmlHandlers}
                 />
-                <EmojiHTML
-                  as='dd'
-                  htmlString={field.value_emojified}
-                  extraEmojis={account.emojis}
-                  {...htmlHandlers}
-                />
+                <dd>
+                  <EmojiHTML
+                    as='span'
+                    htmlString={field.value_emojified}
+                    extraEmojis={account.emojis}
+                    {...htmlHandlers}
+                  />
+                  {!!field.verified_at && (
+                    <Icon
+                      id='verified'
+                      icon={IconVerified}
+                      className={classes.fieldIconVerified}
+                    />
+                  )}
+                </dd>
               </div>
             ))}
           </dl>

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

@@ -39,10 +39,64 @@ h1.name > small {
   }
 }
 
+.badge {
+  background-color: var(--color-bg-secondary);
+  border: none;
+  color: var(--color-text-secondary);
+  font-weight: 600;
+
+  > span {
+    font-weight: unset;
+    opacity: 1;
+  }
+}
+
+svg.badgeIcon {
+  opacity: 1;
+  fill: revert-layer;
+
+  path {
+    fill: revert-layer;
+  }
+}
+
 .fieldList {
   margin-top: 16px;
 }
 
+.fieldCard {
+  position: relative;
+
+  a {
+    color: var(--color-text-brand);
+    text-decoration: none;
+  }
+}
+
+.fieldCardVerified {
+  background-color: var(--color-bg-brand-softer);
+
+  dt {
+    padding-right: 1rem;
+  }
+
+  .fieldIconVerified {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+  }
+}
+
+.fieldIconVerified {
+  width: 1rem;
+  height: 1rem;
+
+  // Need to override .icon path.
+  path {
+    fill: revert-layer;
+  }
+}
+
 .fieldNumbersWrapper {
   a {
     font-weight: unset;
@@ -85,4 +139,9 @@ h1.name > small {
     font-weight: 600;
     font-size: 15px;
   }
+
+  .fieldIconVerified {
+    vertical-align: middle;
+    margin-left: 4px;
+  }
 }