diff --git a/app/soapbox/components/display_name.js b/app/soapbox/components/display_name.js index 30dbce9a2..f6d3a5d4f 100644 --- a/app/soapbox/components/display_name.js +++ b/app/soapbox/components/display_name.js @@ -16,13 +16,14 @@ export default class DisplayName extends React.PureComponent { const { account, others, children } = this.props; let displayName, suffix; + const verified = account.get('pleroma').get('tags').includes('verified'); if (others && others.size > 1) { displayName = others.take(2).map(a => [ , - a.get('is_verified') && , + verified && , ]).reduce((prev, cur) => [prev, ', ', cur]); if (others.size - 2 > 0) { @@ -32,7 +33,7 @@ export default class DisplayName extends React.PureComponent { displayName = ( <> - {account.get('is_verified') && } + {verified && } ); suffix = @{acctFull(account)}; diff --git a/app/soapbox/features/ui/components/profile_info_panel.js b/app/soapbox/features/ui/components/profile_info_panel.js index e26dc0125..592d60ee0 100644 --- a/app/soapbox/features/ui/components/profile_info_panel.js +++ b/app/soapbox/features/ui/components/profile_info_panel.js @@ -59,6 +59,7 @@ class ProfileInfoPanel extends ImmutablePureComponent { const fields = account.get('fields'); const displayNameHtml = { __html: account.get('display_name_html') }; const memberSinceDate = intl.formatDate(account.get('created_at'), { month: 'long', year: 'numeric' }); + const verified = account.get('pleroma').get('tags').includes('verified'); return (
@@ -67,7 +68,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {

- {account.get('is_verified') && } + {verified && } {badge} @{acctFull(account)} {lockedIcon}

diff --git a/app/soapbox/features/ui/components/user_panel.js b/app/soapbox/features/ui/components/user_panel.js index 735830622..ed34e51ea 100644 --- a/app/soapbox/features/ui/components/user_panel.js +++ b/app/soapbox/features/ui/components/user_panel.js @@ -10,6 +10,7 @@ import Avatar from 'soapbox/components/avatar'; import { shortNumberFormat } from 'soapbox/utils/numbers'; import { acctFull } from 'soapbox/utils/accounts'; import StillImage from 'soapbox/components/still_image'; +import VerificationBadge from 'soapbox/components/verification_badge'; class UserPanel extends ImmutablePureComponent { @@ -24,6 +25,7 @@ class UserPanel extends ImmutablePureComponent { if (!account) return null; const displayNameHtml = { __html: account.get('display_name_html') }; const acct = account.get('acct').indexOf('@') === -1 && domain ? `${account.get('acct')}@${domain}` : account.get('acct'); + const verified = account.get('pleroma').get('tags').includes('verified'); return (
@@ -45,6 +47,7 @@ class UserPanel extends ImmutablePureComponent {

+ {verified && } @{acctFull(account)}

diff --git a/app/styles/components/user-panel.scss b/app/styles/components/user-panel.scss index b0c656455..cb4467230 100644 --- a/app/styles/components/user-panel.scss +++ b/app/styles/components/user-panel.scss @@ -4,12 +4,21 @@ width: 265px; flex-direction: column; + .user-panel__account__name { + display: inline; + } + + .verified-icon { + opacity: 1; + } + &, .user-panel__account__name, .user-panel__account__username { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + color: var(--primary-text-color--faint); } &__header { @@ -49,13 +58,13 @@ &__meta { display: block; padding: 6px 20px 17px; - opacity: 0.6; + // opacity: 0.6; } &__account { a { text-decoration: none; - color: var(--primary-text-color); + color: var(--primary-text-color--faint); } &__name { @@ -63,7 +72,7 @@ font-size: 20px; font-weight: bold; line-height: 24px; - color: var(--primary-text-color); + color: var(--primary-text-color--faint); } &:hover & { @@ -96,7 +105,7 @@ a { text-decoration: none; - color: var(--primary-text-color); + color: var(--primary-text-color--faint); &:hover { opacity: 0.8; @@ -106,7 +115,7 @@ &__value { display: block; width: 100%; - color: var(--primary-text-color); + color: var(--primary-text-color--faint); font-size: 20px; font-weight: 800; line-height: 24px;