From ef127c964a60f365129bc97a2cb2fc6d12ba6407 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 25 Mar 2023 08:46:32 +0100 Subject: [PATCH] Change design of account rows in web UI (#24247) --- .../mastodon/components/account.jsx | 53 ++++++++++++++++--- .../styles/mastodon/components.scss | 29 +++++++--- 2 files changed, 69 insertions(+), 13 deletions(-) diff --git a/app/javascript/mastodon/components/account.jsx b/app/javascript/mastodon/components/account.jsx index 7aaa668fe..0ee0e4551 100644 --- a/app/javascript/mastodon/components/account.jsx +++ b/app/javascript/mastodon/components/account.jsx @@ -10,6 +10,9 @@ import { me } from '../initial_state'; import RelativeTimestamp from './relative_timestamp'; import Skeleton from 'mastodon/components/skeleton'; import { Link } from 'react-router-dom'; +import { counterRenderer } from 'mastodon/components/common_counter'; +import ShortNumber from 'mastodon/components/short_number'; +import Icon from 'mastodon/components/icon'; const messages = defineMessages({ follow: { id: 'account.follow', defaultMessage: 'Follow' }, @@ -23,6 +26,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 = { @@ -77,7 +100,11 @@ class Account extends ImmutablePureComponent {
- + +
+ + +
@@ -131,18 +158,32 @@ 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} - +
+ +
+ +
+ + {verification} {muteTimeRemaining} +
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 9f6958b37..0893ea7d9 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1403,10 +1403,12 @@ body > [data-popper-placement] { text-decoration: none; font-size: 14px; - &--with-note { - strong { - display: inline; - } + .display-name { + margin-bottom: 4px; + } + + .display-name strong { + display: inline; } } @@ -1629,7 +1631,7 @@ a .account__avatar { .status__display-name, .account__display-name { - strong { + .display-name strong { color: $primary-text-color; } } @@ -1644,12 +1646,12 @@ a .account__avatar { .reply-indicator__display-name, .detailed-status__display-name, a.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; @@ -7356,6 +7358,19 @@ noscript { } } +.verified-badge { + display: inline-flex; + align-items: center; + color: $valid-value-color; + gap: 4px; + + a { + color: inherit; + font-weight: 500; + text-decoration: none; + } +} + .trends { &__header { color: $dark-text-color;