diff --git a/app/soapbox/components/display_name.js b/app/soapbox/components/display_name.js index 30dbce9a2..7ab8b9e60 100644 --- a/app/soapbox/components/display_name.js +++ b/app/soapbox/components/display_name.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import VerificationBadge from './verification_badge'; import { acctFull } from '../utils/accounts'; +import { List as ImmutableList } from 'immutable'; export default class DisplayName extends React.PureComponent { @@ -16,13 +17,14 @@ export default class DisplayName extends React.PureComponent { const { account, others, children } = this.props; let displayName, suffix; + const verified = account.getIn(['pleroma', 'tags'], ImmutableList()).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 +34,7 @@ export default class DisplayName extends React.PureComponent { displayName = ( <> - {account.get('is_verified') && } + {verified && } ); suffix = @{acctFull(account)}; diff --git a/app/soapbox/features/edit_profile/components/profile_preview.js b/app/soapbox/features/edit_profile/components/profile_preview.js index 6b4166d22..808f18a55 100644 --- a/app/soapbox/features/edit_profile/components/profile_preview.js +++ b/app/soapbox/features/edit_profile/components/profile_preview.js @@ -2,6 +2,8 @@ import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { acctFull } from 'soapbox/utils/accounts'; import StillImage from 'soapbox/components/still_image'; +import VerificationBadge from 'soapbox/components/verification_badge'; +import { List as ImmutableList } from 'immutable'; const ProfilePreview = ({ account }) => (
@@ -16,7 +18,10 @@ const ProfilePreview = ({ account }) => (
{account.get('username')} - {account.get('display_name')} + + {account.get('display_name')} + {account.getIn(['pleroma', 'tags'], ImmutableList()).includes('verified') && } + {acctFull(account)}
diff --git a/app/soapbox/features/edit_profile/index.js b/app/soapbox/features/edit_profile/index.js index fce8e33df..5445ff30a 100644 --- a/app/soapbox/features/edit_profile/index.js +++ b/app/soapbox/features/edit_profile/index.js @@ -24,6 +24,7 @@ const messages = defineMessages({ heading: { id: 'column.edit_profile', defaultMessage: 'Edit profile' }, metaFieldLabel: { id: 'edit_profile.fields.meta_fields.label_placeholder', defaultMessage: 'Label' }, metaFieldContent: { id: 'edit_profile.fields.meta_fields.content_placeholder', defaultMessage: 'Content' }, + verified: { id: 'edit_profile.fields.verified_display_name', defaultMessage: 'Verified users may not update their display name' }, }); const mapStateToProps = state => { @@ -155,7 +156,8 @@ class EditProfile extends ImmutablePureComponent { } render() { - const { intl, maxFields } = this.props; + const { intl, maxFields, account } = this.props; + const verified = account.get('pleroma').get('tags').includes('verified'); return ( @@ -163,10 +165,13 @@ class EditProfile extends ImmutablePureComponent {
} name='display_name' value={this.state.display_name} onChange={this.handleTextChange} + disabled={verified} + hint={verified && intl.formatMessage(messages.verified)} /> } 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..1ba4e3efc 100644 --- a/app/soapbox/features/ui/components/user_panel.js +++ b/app/soapbox/features/ui/components/user_panel.js @@ -10,6 +10,8 @@ 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'; +import { List as ImmutableList } from 'immutable'; class UserPanel extends ImmutablePureComponent { @@ -24,6 +26,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.getIn(['pleroma', 'tags'], ImmutableList()).includes('verified'); return (
@@ -45,6 +48,7 @@ class UserPanel extends ImmutablePureComponent {

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

diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss index cd0364ea9..e6e6f20ee 100644 --- a/app/styles/accounts.scss +++ b/app/styles/accounts.scss @@ -92,6 +92,10 @@ overflow: hidden; text-overflow: ellipsis; } + + bdi, span.verified-icon { + display: inline-block; + } } } } 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; diff --git a/app/styles/forms.scss b/app/styles/forms.scss index 6cf1f5f0f..96616c6ff 100644 --- a/app/styles/forms.scss +++ b/app/styles/forms.scss @@ -342,6 +342,15 @@ code { } } + input[type=text][disabled], + input[type=number][disabled], + input[type=email][disabled], + input[type=password][disabled], + textarea { + color: var(--primary-text-color--faint); + border-color: var(--primary-text-color--faint); + } + .input.field_with_errors { label { color: lighten($error-red, 12%);