Profile redesign: Profile fields feedback (#38005)

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

@@ -118,14 +118,14 @@ const RedesignAccountHeaderFields: FC<{ account: Account }> = ({ account }) => {
     <CustomEmojiProvider emojis={emojis}>
       <dl className={classes.fieldList} ref={wrapperRef}>
         {fields.map((field, key) => (
-          <FieldRow key={key} field={field} htmlHandlers={htmlHandlers} />
+          <FieldCard key={key} field={field} htmlHandlers={htmlHandlers} />
         ))}
       </dl>
     </CustomEmojiProvider>
   );
 };
 
-const FieldRow: FC<{
+const FieldCard: FC<{
   htmlHandlers: ReturnType<typeof useElementHandledLink>;
   field: AccountField;
 }> = ({ htmlHandlers, field }) => {
@@ -183,15 +183,14 @@ const FieldRow: FC<{
       ref={wrapperRef}
     >
       {verified_at && (
-        <Icon
-          id='verified'
-          icon={IconVerified}
+        <span
           className={classes.fieldVerifiedIcon}
-          aria-label={intl.formatMessage(verifyMessage, {
+          title={intl.formatMessage(verifyMessage, {
             date: intl.formatDate(verified_at, dateFormatOptions),
           })}
-          noFill
-        />
+        >
+          <Icon id='verified' icon={IconVerified} noFill />
+        </span>
       )}
     </MiniCard>
   );

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

@@ -278,11 +278,17 @@ svg.badgeIcon {
 }
 
 .fieldVerifiedIcon {
+  display: block;
+  position: absolute;
   width: 16px;
   height: 16px;
-  position: absolute;
   top: 8px;
   right: 8px;
+
+  > svg {
+    width: 100%;
+    height: 100%;
+  }
 }
 
 .fieldOverflowButton {

app/javascript/mastodon/features/account_timeline/modals/field_modal.tsx

@@ -2,7 +2,9 @@ import type { FC } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
+import { Button } from '@/mastodon/components/button';
 import { EmojiHTML } from '@/mastodon/components/emoji/html';
+import { ModalShell } from '@/mastodon/components/modal_shell';
 
 import type { AccountField } from '../common';
 import { useFieldHtml } from '../hooks/useFieldHtml';
@@ -16,29 +18,25 @@ export const AccountFieldModal: FC<{
   const handleLabelElement = useFieldHtml(field.nameHasEmojis);
   const handleValueElement = useFieldHtml(field.valueHasEmojis);
   return (
-    <div className='modal-root__modal safety-action-modal'>
-      <div className='safety-action-modal__top'>
-        <div className='safety-action-modal__confirmation'>
-          <EmojiHTML
-            as='p'
-            htmlString={field.name_emojified}
-            onElement={handleLabelElement}
-          />
-          <EmojiHTML
-            as='p'
-            htmlString={field.value_emojified}
-            onElement={handleValueElement}
-            className={classes.fieldValue}
-          />
-        </div>
-      </div>
-      <div className='safety-action-modal__bottom'>
-        <div className='safety-action-modal__actions'>
-          <button onClick={onClose} className='link-button' type='button'>
-            <FormattedMessage id='lightbox.close' defaultMessage='Close' />
-          </button>
-        </div>
-      </div>
-    </div>
+    <ModalShell>
+      <ModalShell.Body>
+        <EmojiHTML
+          as='h2'
+          htmlString={field.name_emojified}
+          onElement={handleLabelElement}
+        />
+        <EmojiHTML
+          as='p'
+          htmlString={field.value_emojified}
+          onElement={handleValueElement}
+          className={classes.fieldValue}
+        />
+      </ModalShell.Body>
+      <ModalShell.Actions>
+        <Button onClick={onClose} plain>
+          <FormattedMessage id='lightbox.close' defaultMessage='Close' />
+        </Button>
+      </ModalShell.Actions>
+    </ModalShell>
   );
 };

app/javascript/mastodon/features/account_timeline/v2/styles.module.scss

@@ -7,6 +7,7 @@
   border: none;
   background: none;
   padding: 8px 0;
+  font-size: 15px;
   font-weight: 500;
   display: flex;
   align-items: center;
@@ -41,6 +42,10 @@
     align-items: center;
     font-size: 15px;
   }
+
+  [data-color-scheme='dark'] & {
+    border: 1px solid var(--color-border-primary);
+  }
 }
 
 .tagsWrapper {