add verification icon on verified users

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 => [
         <bdi key={a.get('id')}>
           <strong className='display-name__html' dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }} />
         </bdi>,
-        a.get('is_verified') && <VerificationBadge />,
+        verified && <VerificationBadge />,
       ]).reduce((prev, cur) => [prev, ', ', cur]);
 
       if (others.size - 2 > 0) {
@@ -32,7 +33,7 @@ export default class DisplayName extends React.PureComponent {
       displayName = (
         <>
           <bdi><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} /></bdi>
-          {account.get('is_verified') && <VerificationBadge />}
+          {verified && <VerificationBadge />}
         </>
       );
       suffix = <span className='display-name__account'>@{acctFull(account)}</span>;

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 (
       <div className='profile-info-panel'>
@@ -67,7 +68,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
           <div className='profile-info-panel-content__name'>
             <h1>
               <span dangerouslySetInnerHTML={displayNameHtml} />
-              {account.get('is_verified') && <VerificationBadge />}
+              {verified && <VerificationBadge />}
               {badge}
               <small>@{acctFull(account)} {lockedIcon}</small>
             </h1>

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 (
       <div className='user-panel'>
@@ -45,6 +47,7 @@ class UserPanel extends ImmutablePureComponent {
               <h1>
                 <Link to={`/@${account.get('acct')}`}>
                   <span className='user-panel__account__name' dangerouslySetInnerHTML={displayNameHtml} />
+                  {verified && <VerificationBadge />}
                   <small className='user-panel__account__username'>@{acctFull(account)}</small>
                 </Link>
               </h1>

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;