Further reduce CSS and markup differences with upstream (#2637)

* Reduce differences in `MovedNote` markup and styling

* Remove unused setting toggle meta text support

* Fix various CSS discrepancies with upstream

* Further reduce differences with upstream

app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx

@@ -1,54 +1,38 @@
 import { FormattedMessage } from 'react-intl';
 
-import { withRouter } from 'react-router-dom';
-
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-
-import TripIcon from '@/material-icons/400-24px/trip.svg?react';
-import { Icon } from 'flavours/glitch/components/icon';
-import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
-
 import { AvatarOverlay } from '../../../components/avatar_overlay';
 import { DisplayName } from '../../../components/display_name';
+import { Permalink } from '../../../components/permalink';
 
-class MovedNote extends ImmutablePureComponent {
+export default class MovedNote extends ImmutablePureComponent {
 
   static propTypes = {
     from: ImmutablePropTypes.map.isRequired,
     to: ImmutablePropTypes.map.isRequired,
-    ...WithRouterPropTypes,
-  };
-
-  handleAccountClick = e => {
-    if (e.button === 0) {
-      e.preventDefault();
-      this.props.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' icon={TripIcon} /></div>
-          <FormattedMessage id='account.moved_to' defaultMessage='{name} has indicated that their new account is now:' 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 to={`/@${to.get('acct')}`} href={to.get('url')} className='detailed-status__display-name'>
+            <div className='detailed-status__display-avatar'><AvatarOverlay account={to} friend={from} /></div>
+            <DisplayName account={to} />
+          </Permalink>
+
+          <Permalink to={`/@${to.get('acct')}`} href={to.get('url')} className='button'><FormattedMessage id='account.go_to_profile' defaultMessage='Go to profile' /></Permalink>
+        </div>
       </div>
     );
   }
 
 }
-
-export default withRouter(MovedNote);

app/javascript/flavours/glitch/features/notifications/components/setting_toggle.jsx

@@ -12,7 +12,6 @@ export default class SettingToggle extends PureComponent {
     settings: ImmutablePropTypes.map.isRequired,
     settingPath: PropTypes.array.isRequired,
     label: PropTypes.node.isRequired,
-    meta: PropTypes.node,
     onChange: PropTypes.func.isRequired,
     defaultValue: PropTypes.bool,
     disabled: PropTypes.bool,
@@ -23,14 +22,13 @@ export default class SettingToggle extends PureComponent {
   };
 
   render () {
-    const { prefix, settings, settingPath, label, meta, defaultValue, disabled } = this.props;
+    const { prefix, settings, settingPath, label, defaultValue, disabled } = this.props;
     const id = ['setting-toggle', prefix, ...settingPath].filter(Boolean).join('-');
 
     return (
       <div className='setting-toggle'>
         <Toggle disabled={disabled} id={id} checked={settings.getIn(settingPath, defaultValue)} onChange={this.onChange} onKeyDown={this.onKeyDown} />
         <label htmlFor={id} className='setting-toggle__label'>{label}</label>
-        {meta && <span className='setting-meta__label'>{meta}</span>}
       </div>
     );
   }