[Glitch] Profile redesign: verified badges

Port e79d51ce19274504dc85f4bb3fbf8502c0cfdc58 to glitch-soc

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

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

@@ -3,15 +3,19 @@ import type { FC } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
+import classNames from 'classnames';
+
 import { openModal } from '@/flavours/glitch/actions/modal';
 import { AccountFields } from '@/flavours/glitch/components/account_fields';
 import { EmojiHTML } from '@/flavours/glitch/components/emoji/html';
 import { FormattedDateWrapper } from '@/flavours/glitch/components/formatted_date';
+import { Icon } from '@/flavours/glitch/components/icon';
 import { MiniCardList } from '@/flavours/glitch/components/mini_card/list';
 import { useElementHandledLink } from '@/flavours/glitch/components/status/handled_link';
 import { useAccount } from '@/flavours/glitch/hooks/useAccount';
 import type { Account } from '@/flavours/glitch/models/account';
 import { useAppDispatch } from '@/flavours/glitch/store';
+import IconVerified from '@/images/icons/icon_verified.svg?react';
 
 import { isRedesignEnabled } from '../common';
 
@@ -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/flavours/glitch/features/account_timeline/components/fields_modal.tsx

@@ -5,10 +5,12 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import { DisplayName } from '@/flavours/glitch/components/display_name';
 import { AnimateEmojiProvider } from '@/flavours/glitch/components/emoji/context';
 import { EmojiHTML } from '@/flavours/glitch/components/emoji/html';
+import { Icon } from '@/flavours/glitch/components/icon';
 import { IconButton } from '@/flavours/glitch/components/icon_button';
 import { LoadingIndicator } from '@/flavours/glitch/components/loading_indicator';
 import { useElementHandledLink } from '@/flavours/glitch/components/status/handled_link';
 import { useAccount } from '@/flavours/glitch/hooks/useAccount';
+import IconVerified from '@/images/icons/icon_verified.svg?react';
 import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 
 import classes from './redesign.module.scss';
@@ -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/flavours/glitch/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/flavours/glitch/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/flavours/glitch/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(