@@ -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;