Change design of moved account banner in web UI (#19790)

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>
     );
   }

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",

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 {