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;