Profile redesign: verified badges (#37538)

app/javascript/images/icons/icon_verified.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
+  <path fill="url(#VerifiedGradient)" d="M8 .837a3.168 3.168 0 0 1 2.47 1.187 3.166 3.166 0 0 1 2.601.906 3.168 3.168 0 0 1 .905 2.6A3.167 3.167 0 0 1 15.164 8a3.172 3.172 0 0 1-1.188 2.47 3.167 3.167 0 0 1-.903 2.597 3.168 3.168 0 0 1-2.596.909 3.167 3.167 0 0 1-4.95.001 3.166 3.166 0 0 1-3.397-2.258 3.169 3.169 0 0 1-.107-1.24A3.168 3.168 0 0 1 .826 8a3.17 3.17 0 0 1 1.197-2.479 3.168 3.168 0 0 1 .91-2.593 3.166 3.166 0 0 1 2.596-.905A3.169 3.169 0 0 1 8 .837Z"/>
+  <path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.333" d="m6 8 1.333 1.333L10 6.667"/>
+  <defs>
+    <linearGradient id="VerifiedGradient" x1="-.966" x2="12.162" y1="2.629" y2="17.493" gradientUnits="userSpaceOnUse">
+      <stop offset=".13" stop-color="#5638CC"/>
+      <stop offset=".995" stop-color="#DC03F0"/>
+    </linearGradient>
+  </defs>
+</svg>

app/javascript/mastodon/components/mini_card/list.tsx

@@ -10,7 +10,9 @@ import type { MiniCardProps } from '.';
 import classes from './styles.module.css';
 
 interface MiniCardListProps {
-  cards?: (Pick<MiniCardProps, 'label' | 'value'> & { key?: Key })[];
+  cards?: (Pick<MiniCardProps, 'label' | 'value' | 'className'> & {
+    key?: Key;
+  })[];
   className?: string;
   onOverflowClick?: MouseEventHandler;
 }
@@ -42,6 +44,7 @@ export const MiniCardList: FC<MiniCardListProps> = ({
             label={card.label}
             value={card.value}
             hidden={hasOverflow && index >= hiddenIndex}
+            className={card.className}
           />
         ))}
       </dl>

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 }) => ({
+      account.fields
-        label: (
+        .toArray()
-          <EmojiHTML
+        .map(({ value_emojified, name_emojified, verified_at }) => ({
-            htmlString={name_emojified}
+          label: (
-            extraEmojis={account.emojis}
+            <>
-            className='translate'
+              <EmojiHTML
-            as='span'
+                htmlString={name_emojified}
-            {...htmlHandlers}
+                extraEmojis={account.emojis}
-          />
+                className='translate'
-        ),
+                as='span'
-        value: (
+                {...htmlHandlers}
-          <EmojiHTML
+              />
-            as='span'
+              {!!verified_at && (
-            htmlString={value_emojified}
+                <Icon
-            extraEmojis={account.emojis}
+                  id='verified'
-            {...htmlHandlers}
+                  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
+                <dd>
-                  as='dd'
+                  <EmojiHTML
-                  htmlString={field.value_emojified}
+                    as='span'
-                  extraEmojis={account.emojis}
+                    htmlString={field.value_emojified}
-                  {...htmlHandlers}
+                    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

@@ -64,6 +64,39 @@ svg.badgeIcon {
   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;
@@ -106,4 +139,9 @@ svg.badgeIcon {
     font-weight: 600;
     font-size: 15px;
   }
+
+  .fieldIconVerified {
+    vertical-align: middle;
+    margin-left: 4px;
+  }
 }

app/javascript/styles/mastodon/theme/_dark.scss

@@ -142,6 +142,7 @@
       var(--border-strength-primary)
     )};
   --color-border-media: rgb(252 248 255 / 15%);
+  --color-border-verified: rgb(220, 3, 240);
   --color-border-on-bg-secondary: #{utils.css-alpha(
       var(--color-indigo-200),
       calc(var(--border-strength-primary) / 1.5)

app/javascript/styles/mastodon/theme/_light.scss

@@ -140,6 +140,7 @@
     var(--color-grey-950) var(--border-strength-primary)
   );
   --color-border-media: rgb(252 248 255 / 15%);
+  --color-border-verified: rgb(220, 3, 240);
   --color-border-on-bg-secondary: var(--color-grey-200);
   --color-border-on-bg-brand-softer: var(--color-indigo-200);
   --color-border-on-bg-error-softer: #{utils.css-alpha(