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);
+
+ &: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;
+ }
- .verified a {
- color: $valid-value-color;
+ a {
+ color: $valid-value-color;
+ }
}
}
}
--
GitLab