From 7c65f5269277cd8e953efb25fa77dc28441904e7 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 5 Nov 2022 21:11:24 +0100 Subject: [PATCH] Change design of moved account banner in web UI (#19790) --- .../account_timeline/components/moved_note.js | 36 +++++++------------ app/javascript/mastodon/locales/en.json | 2 +- .../styles/mastodon/components.scss | 35 ++++++++---------- 3 files changed, 27 insertions(+), 46 deletions(-) diff --git a/app/javascript/mastodon/features/account_timeline/components/moved_note.js b/app/javascript/mastodon/features/account_timeline/components/moved_note.js index 2e32d660f8..a548160a53 100644 --- a/app/javascript/mastodon/features/account_timeline/components/moved_note.js +++ b/app/javascript/mastodon/features/account_timeline/components/moved_note.js @@ -1,47 +1,35 @@ import React from 'react'; -import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { FormattedMessage } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; import AvatarOverlay from '../../../components/avatar_overlay'; import DisplayName from '../../../components/display_name'; -import Icon from 'mastodon/components/icon'; +import Permalink from 'mastodon/components/permalink'; export default class MovedNote extends ImmutablePureComponent { - static contextTypes = { - router: PropTypes.object, - }; - static propTypes = { from: ImmutablePropTypes.map.isRequired, to: ImmutablePropTypes.map.isRequired, }; - handleAccountClick = e => { - if (e.button === 0) { - e.preventDefault(); - this.context.router.history.push(`/@${this.props.to.get('acct')}`); - } - - e.stopPropagation(); - } - render () { const { from, to } = this.props; - const displayNameHtml = { __html: from.get('display_name_html') }; return ( -
-
-
- }} /> +
+
+ }} />
- -
- -
+
+ +
+ +
+ + +
); } diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json index fd504fa045..0e58a7133f 100644 --- a/app/javascript/mastodon/locales/en.json +++ b/app/javascript/mastodon/locales/en.json @@ -46,7 +46,7 @@ "account.locked_info": "This account privacy status is set to locked. The owner manually reviews who can follow them.", "account.media": "Media", "account.mention": "Mention @{name}", - "account.moved_to": "{name} has moved to:", + "account.moved_to": "{name} has indicated that their new account is now:", "account.mute": "Mute @{name}", "account.mute_notifications": "Mute notifications from @{name}", "account.muted": "Muted", diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 28b06b5912..d3046761cc 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -6733,36 +6733,29 @@ noscript { } } -.account__moved-note { - padding: 14px 10px; - padding-bottom: 16px; +.moved-account-banner { + padding: 20px; background: lighten($ui-base-color, 4%); - border-top: 1px solid lighten($ui-base-color, 8%); - border-bottom: 1px solid lighten($ui-base-color, 8%); + display: flex; + align-items: center; + flex-direction: column; &__message { - position: relative; - margin-left: 58px; - color: $dark-text-color; + color: $darker-text-color; padding: 8px 0; padding-top: 0; padding-bottom: 4px; font-size: 14px; - - > span { - display: block; - overflow: hidden; - text-overflow: ellipsis; - } + font-weight: 500; + text-align: center; + margin-bottom: 16px; } - &__icon-wrapper { - left: -26px; - position: absolute; - } - - .detailed-status__display-avatar { - position: relative; + &__action { + display: flex; + justify-content: space-between; + align-items: center; + gap: 15px; } .detailed-status__display-name {