diff options
| -rw-r--r-- | app/javascript/mastodon/features/account_timeline/components/moved_note.js | 36 | ||||
| -rw-r--r-- | app/javascript/mastodon/locales/en.json | 2 | ||||
| -rw-r--r-- | app/javascript/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 2e32d660f..a548160a5 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 ( - <div className='account__moved-note'> - <div className='account__moved-note__message'> - <div className='account__moved-note__icon-wrapper'><Icon id='suitcase' className='account__moved-note__icon' fixedWidth /></div> - <FormattedMessage id='account.moved_to' defaultMessage='{name} has moved to:' values={{ name: <bdi><strong dangerouslySetInnerHTML={displayNameHtml} /></bdi> }} /> + <div className='moved-account-banner'> + <div className='moved-account-banner__message'> + <FormattedMessage id='account.moved_to' defaultMessage='{name} has indicated that their new account is now:' values={{ name: <bdi><strong dangerouslySetInnerHTML={{ __html: from.get('display_name_html') }} /></bdi> }} /> </div> - <a href={to.get('url')} onClick={this.handleAccountClick} className='detailed-status__display-name'> - <div className='detailed-status__display-avatar'><AvatarOverlay account={to} friend={from} /></div> - <DisplayName account={to} /> - </a> + <div className='moved-account-banner__action'> + <Permalink href={to.get('url')} to={`/@${to.get('acct')}`} className='detailed-status__display-name'> + <div className='detailed-status__display-avatar'><AvatarOverlay account={to} friend={from} /></div> + <DisplayName account={to} /> + </Permalink> + + <Permalink href={to.get('url')} to={`/@${to.get('acct')}`} className='button'><FormattedMessage id='account.go_to_profile' defaultMessage='Go to profile' /></Permalink> + </div> </div> ); } diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json index fd504fa04..0e58a7133 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 28b06b591..d3046761c 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; - } - } - - &__icon-wrapper { - left: -26px; - position: absolute; + font-weight: 500; + text-align: center; + margin-bottom: 16px; } - .detailed-status__display-avatar { - position: relative; + &__action { + display: flex; + justify-content: space-between; + align-items: center; + gap: 15px; } .detailed-status__display-name { |