diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx index 78cf59e345..77c7a71945 100644 --- a/app/javascript/flavours/glitch/components/account.jsx +++ b/app/javascript/flavours/glitch/components/account.jsx @@ -6,6 +6,9 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { Skeleton } from 'flavours/glitch/components/skeleton'; +import { counterRenderer } from 'flavours/glitch/components/common_counter'; +import ShortNumber from 'flavours/glitch/components/short_number'; +import Icon from 'flavours/glitch/components/icon'; import { me } from '../initial_state'; @@ -27,6 +30,26 @@ const messages = defineMessages({ block: { id: 'account.block', defaultMessage: 'Block @{name}' }, }); +class VerifiedBadge extends React.PureComponent { + + static propTypes = { + link: PropTypes.string.isRequired, + verifiedAt: PropTypes.string.isRequired, + }; + + render () { + const { link } = this.props; + + return ( + + + + + ); + } + +} + class Account extends ImmutablePureComponent { static propTypes = { @@ -81,7 +104,11 @@ class Account extends ImmutablePureComponent {
- + +
+ + +
@@ -135,24 +162,37 @@ class Account extends ImmutablePureComponent { } } - let mute_expires_at; + let muteTimeRemaining; + if (account.get('mute_expires_at')) { - mute_expires_at =
; + muteTimeRemaining = <>· ; + } + + let verification; + + const firstVerifiedField = account.get('fields').find(item => !!item.get('verified_at')); + + if (firstVerifiedField) { + verification = <>· ; } return (
-
- {mute_expires_at} - -
- {buttons ? -
- {buttons} +
+
- : null} + +
+ + {verification} {muteTimeRemaining} +
+ + +
+ {buttons} +
); diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index 5d4426fbc6..f84158b384 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -12,10 +12,12 @@ text-decoration: none; font-size: 14px; - &--with-note { - strong { - display: inline; - } + .display-name { + margin-bottom: 4px; + } + + .display-name strong { + display: inline; } } @@ -749,6 +751,19 @@ } } +.verified-badge { + display: inline-flex; + align-items: center; + color: $valid-value-color; + gap: 4px; + + a { + color: inherit; + font-weight: 500; + text-decoration: none; + } +} + .moved-account-banner, .follow-request-banner, .account-memorial-banner { diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 0b720637de..85e3165a88 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -626,7 +626,7 @@ .status__display-name, .account__display-name { - strong { + .display-name strong { color: $primary-text-color; } } @@ -641,12 +641,12 @@ a.status__display-name, .reply-indicator__display-name, .detailed-status__display-name, .account__display-name { - &:hover strong { + &:hover .display-name strong { text-decoration: underline; } } -.account__display-name strong { +.account__display-name .display-name strong { display: block; overflow: hidden; text-overflow: ellipsis;