From 5825402ed57e42dc8093133aaf2815fd2008c185 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Fri, 4 Nov 2022 02:28:00 +0100
Subject: [PATCH] Fix design of verified links in web UI (#19709)

---
 .../features/account/components/header.js     |  4 +--
 .../styles/mastodon/components.scss           | 25 +++++++++++++++----
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/app/javascript/mastodon/features/account/components/header.js b/app/javascript/mastodon/features/account/components/header.js
index e39f0158ea..8d3b3c5e64 100644
--- a/app/javascript/mastodon/features/account/components/header.js
+++ b/app/javascript/mastodon/features/account/components/header.js
@@ -337,10 +337,10 @@ class Header extends ImmutablePureComponent {
                   </dl>
 
                   {fields.map((pair, i) => (
-                    <dl key={i}>
+                    <dl key={i} className={classNames({ verified: pair.get('verified_at') })}>
                       <dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} className='translate' />
 
-                      <dd className={`${pair.get('verified_at') ? 'verified' : ''} translate`} title={pair.get('value_plain')}>
+                      <dd className='translate' title={pair.get('value_plain')}>
                         {pair.get('verified_at') && <span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(pair.get('verified_at'), dateFormatOptions) })}><Icon id='check' className='verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} />
                       </dd>
                     </dl>
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index f60ad6050d..f1622dbb56 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -7143,12 +7143,27 @@ noscript {
         color: lighten($ui-highlight-color, 8%);
       }
 
-      dl:first-child .verified {
-        border-radius: 0 4px 0 0;
-      }
+      .verified {
+        border: 1px solid rgba($valid-value-color, 0.5);
 
-      .verified a {
-        color: $valid-value-color;
+        &:first-child {
+          border-top-left-radius: 4px;
+          border-top-right-radius: 4px;
+        }
+
+        &:last-child {
+          border-bottom-left-radius: 4px;
+          border-bottom-right-radius: 4px;
+        }
+
+        dt,
+        dd {
+          color: $valid-value-color;
+        }
+
+        a {
+          color: $valid-value-color;
+        }
       }
     }
   }