Revert Font Awesome 5 upgrade (#8810)

* Revert "Fix some icon names changed by the Font Awesome 5. (#8796)"

This reverts commit 3f9ec3de.

* Revert "Migrate to font-awesome 5.0. (#8799)"

This reverts commit 8bae1459.

* Revert "Fix some icons names, unavailable in fontawesome5 (free license). (#8792)"

This reverts commit b9c727a9.

* Revert "Update the icon name changed by the Font Awesome 5. (#8776)"

This reverts commit 17af4d27.

* Revert "Add bot icon to bot avatars and migrate to newer version of Font Awesome (#8484)"

This reverts commit 4b794e13.

app/helpers/application_helper.rb

@@ -55,7 +55,7 @@ module ApplicationHelper
 
   def fa_icon(icon, attributes = {})
     class_names = attributes[:class]&.split(' ') || []
-    class_names << 'fas'
+    class_names << 'fa'
     class_names += icon.split(' ').map { |cl| "fa-#{cl}" }
 
     content_tag(:i, nil, attributes.merge(class: class_names.join(' ')))

app/javascript/mastodon/common.js

 import Rails from 'rails-ujs';
 
 export function start() {
-  require('@fortawesome/fontawesome-free/css/fontawesome.css');
-  require('@fortawesome/fontawesome-free/css/solid.css');
+  require('font-awesome/css/font-awesome.css');
   require.context('../images/', true);
 
   Rails.start();

app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap

@@ -13,11 +13,7 @@ exports[`<Avatar /> Autoplay renders a animated avatar 1`] = `
       "width": "100px",
     }
   }
->
-  <i
-    className="fas fa-fw fa-robot bot-icon"
-  />
-</div>
+/>
 `;
 
 exports[`<Avatar /> Still renders a still avatar 1`] = `
@@ -33,9 +29,5 @@ exports[`<Avatar /> Still renders a still avatar 1`] = `
       "width": "100px",
     }
   }
->
-  <i
-    className="fas fa-fw fa-robot bot-icon"
-  />
-</div>
+/>
 `;

app/javascript/mastodon/components/__tests__/avatar-test.js

@@ -10,7 +10,6 @@ describe('<Avatar />', () => {
     display_name: 'Alice',
     avatar: '/animated/alice.gif',
     avatar_static: '/static/alice.jpg',
-    bot: true,
   });
 
   const size     = 100;

app/javascript/mastodon/components/attachment_list.js

@@ -24,7 +24,7 @@ export default class AttachmentList extends ImmutablePureComponent {
 
               return (
                 <li key={attachment.get('id')}>
-                  <a href={displayUrl} target='_blank' rel='noopener'><i className='fas fa-link' /> {filename(displayUrl)}</a>
+                  <a href={displayUrl} target='_blank' rel='noopener'><i className='fa fa-link' /> {filename(displayUrl)}</a>
                 </li>
               );
             })}
@@ -36,7 +36,7 @@ export default class AttachmentList extends ImmutablePureComponent {
     return (
       <div className='attachment-list'>
         <div className='attachment-list__icon'>
-          <i className='fas fa-link' />
+          <i className='fa fa-link' />
         </div>
 
         <ul className='attachment-list__list'>

app/javascript/mastodon/components/avatar.js

 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import BotIcon from './bot_icon';
 import { autoPlayGif } from '../initial_state';
 
 export default class Avatar extends React.PureComponent {
@@ -66,9 +65,7 @@ export default class Avatar extends React.PureComponent {
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
         style={style}
-      >
-        <BotIcon account={account} />
-      </div>
+      />
     );
   }
 

app/javascript/mastodon/components/bot_icon.js

-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-
-export default class BotIcon extends ImmutablePureComponent {
-
-  static propTypes = {
-    account: ImmutablePropTypes.map.isRequired,
-  };
-
-  render () {
-    const { account } = this.props;
-
-    if (account.get('bot')) {
-      return (
-        <i className='fas fa-fw fa-robot bot-icon' />
-      );
-    }
-
-    return '';
-  }
-
-}

app/javascript/mastodon/components/column_back_button.js

@@ -19,7 +19,7 @@ export default class ColumnBackButton extends React.PureComponent {
   render () {
     return (
       <button onClick={this.handleClick} className='column-back-button'>
-        <i className='fas fa-fw fa-chevron-left column-back-button__icon' />
+        <i className='fa fa-fw fa-chevron-left column-back-button__icon' />
         <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
       </button>
     );

app/javascript/mastodon/components/column_back_button_slim.js

@@ -8,7 +8,7 @@ export default class ColumnBackButtonSlim extends ColumnBackButton {
     return (
       <div className='column-back-button--slim'>
         <div role='button' tabIndex='0' onClick={this.handleClick} className='column-back-button column-back-button--slim-button'>
-          <i className='fas fa-fw fa-chevron-left column-back-button__icon' />
+          <i className='fa fa-fw fa-chevron-left column-back-button__icon' />
           <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
         </div>
       </div>

app/javascript/mastodon/components/column_header.js

@@ -95,22 +95,22 @@ class ColumnHeader extends React.PureComponent {
     }
 
     if (multiColumn && pinned) {
-      pinButton = <button key='pin-button' className='text-btn column-header__setting-btn' onClick={onPin}><i className='fas fa-times' /> <FormattedMessage id='column_header.unpin' defaultMessage='Unpin' /></button>;
+      pinButton = <button key='pin-button' className='text-btn column-header__setting-btn' onClick={onPin}><i className='fa fa fa-times' /> <FormattedMessage id='column_header.unpin' defaultMessage='Unpin' /></button>;
 
       moveButtons = (
         <div key='move-buttons' className='column-header__setting-arrows'>
-          <button title={formatMessage(messages.moveLeft)} aria-label={formatMessage(messages.moveLeft)} className='text-btn column-header__setting-btn' onClick={this.handleMoveLeft}><i className='fas fa-chevron-left' /></button>
-          <button title={formatMessage(messages.moveRight)} aria-label={formatMessage(messages.moveRight)} className='text-btn column-header__setting-btn' onClick={this.handleMoveRight}><i className='fas fa-chevron-right' /></button>
+          <button title={formatMessage(messages.moveLeft)} aria-label={formatMessage(messages.moveLeft)} className='text-btn column-header__setting-btn' onClick={this.handleMoveLeft}><i className='fa fa-chevron-left' /></button>
+          <button title={formatMessage(messages.moveRight)} aria-label={formatMessage(messages.moveRight)} className='text-btn column-header__setting-btn' onClick={this.handleMoveRight}><i className='fa fa-chevron-right' /></button>
         </div>
       );
     } else if (multiColumn) {
-      pinButton = <button key='pin-button' className='text-btn column-header__setting-btn' onClick={onPin}><i className='fas fa-plus' /> <FormattedMessage id='column_header.pin' defaultMessage='Pin' /></button>;
+      pinButton = <button key='pin-button' className='text-btn column-header__setting-btn' onClick={onPin}><i className='fa fa fa-plus' /> <FormattedMessage id='column_header.pin' defaultMessage='Pin' /></button>;
     }
 
     if (!pinned && (multiColumn || showBackButton)) {
       backButton = (
         <button onClick={this.handleBackClick} className='column-header__back-button'>
-          <i className='fas fa-fw fa-chevron-left column-back-button__icon' />
+          <i className='fa fa-fw fa-chevron-left column-back-button__icon' />
           <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
         </button>
       );
@@ -126,7 +126,7 @@ class ColumnHeader extends React.PureComponent {
     }
 
     if (children || multiColumn) {
-      collapseButton = <button className={collapsibleButtonClassName} title={formatMessage(collapsed ? messages.show : messages.hide)} aria-label={formatMessage(collapsed ? messages.show : messages.hide)} aria-pressed={collapsed ? 'false' : 'true'} onClick={this.handleToggleClick}><i className='fas fa-sliders-h' /></button>;
+      collapseButton = <button className={collapsibleButtonClassName} title={formatMessage(collapsed ? messages.show : messages.hide)} aria-label={formatMessage(collapsed ? messages.show : messages.hide)} aria-pressed={collapsed ? 'false' : 'true'} onClick={this.handleToggleClick}><i className='fa fa-sliders' /></button>;
     }
 
     const hasTitle = icon && title;
@@ -136,7 +136,7 @@ class ColumnHeader extends React.PureComponent {
         <h1 className={buttonClassName}>
           {hasTitle && (
             <button onClick={this.handleTitleClick}>
-              <i className={`fas fa-fw fa-${icon} column-header__icon`} />
+              <i className={`fa fa-fw fa-${icon} column-header__icon`} />
               {title}
             </button>
           )}

app/javascript/mastodon/components/icon_button.js

@@ -86,7 +86,7 @@ export default class IconButton extends React.PureComponent {
           style={style}
           tabIndex={tabIndex}
         >
-          <i className={`fas fa-fw fa-${icon}`} aria-hidden='true' />
+          <i className={`fa fa-fw fa-${icon}`} aria-hidden='true' />
         </button>
       );
     }
@@ -104,7 +104,7 @@ export default class IconButton extends React.PureComponent {
             style={style}
             tabIndex={tabIndex}
           >
-            <i style={{ transform: `rotate(${rotate}deg)` }} className={`fas fa-fw fa-${icon}`} aria-hidden='true' />
+            <i style={{ transform: `rotate(${rotate}deg)` }} className={`fa fa-fw fa-${icon}`} aria-hidden='true' />
           </button>
         )}
       </Motion>

app/javascript/mastodon/components/load_gap.js

@@ -25,7 +25,7 @@ class LoadGap extends React.PureComponent {
 
     return (
       <button className='load-more load-gap' disabled={disabled} onClick={this.handleClick} aria-label={intl.formatMessage(messages.load_more)}>
-        <i className='fas fa-ellipsis-h' />
+        <i className='fa fa-ellipsis-h' />
       </button>
     );
   }

app/javascript/mastodon/components/status.js

@@ -193,7 +193,7 @@ class Status extends ImmutablePureComponent {
     if (featured) {
       prepend = (
         <div className='status__prepend'>
-          <div className='status__prepend-icon-wrapper'><i className='fas fa-fw fa-thumbtack status__prepend-icon' /></div>
+          <div className='status__prepend-icon-wrapper'><i className='fa fa-fw fa-thumb-tack status__prepend-icon' /></div>
           <FormattedMessage id='status.pinned' defaultMessage='Pinned toot' />
         </div>
       );
@@ -202,7 +202,7 @@ class Status extends ImmutablePureComponent {
 
       prepend = (
         <div className='status__prepend'>
-          <div className='status__prepend-icon-wrapper'><i className='fas fa-fw fa-retweet status__prepend-icon' /></div>
+          <div className='status__prepend-icon-wrapper'><i className='fa fa-fw fa-retweet status__prepend-icon' /></div>
           <FormattedMessage id='status.reblogged_by' defaultMessage='{name} boosted' values={{ name: <a onClick={this.handleAccountClick} data-id={status.getIn(['account', 'id'])} href={status.getIn(['account', 'url'])} className='status__display-name muted'><bdi><strong dangerouslySetInnerHTML={display_name_html} /></bdi></a> }} />
         </div>
       );

app/javascript/mastodon/features/account/components/header.js

@@ -3,7 +3,6 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import IconButton from '../../../components/icon_button';
-import BotIcon from '../../../components/bot_icon';
 import Motion from '../../ui/util/optional_motion';
 import spring from 'react-motion/lib/spring';
 import ImmutablePureComponent from 'react-immutable-pure-component';
@@ -68,7 +67,6 @@ class Avatar extends ImmutablePureComponent {
             onBlur={this.handleMouseOut}
           >
             <span style={{ display: 'none' }}>{account.get('acct')}</span>
-            <BotIcon account={account} />
           </a>
         )}
       </Motion>
@@ -140,7 +138,7 @@ class Header extends ImmutablePureComponent {
     } else {
       actionBtn = (
         <div className='account--action-button'>
-          <IconButton size={26} icon='pencil-alt' title={intl.formatMessage(messages.edit_profile)} onClick={this.openEditProfile} />
+          <IconButton size={26} icon='pencil' title={intl.formatMessage(messages.edit_profile)} onClick={this.openEditProfile} />
         </div>
       );
     }
@@ -150,7 +148,7 @@ class Header extends ImmutablePureComponent {
     }
 
     if (account.get('locked')) {
-      lockedIcon = <i className='fas fa-lock' />;
+      lockedIcon = <i className='fa fa-lock' />;
     }
 
     const content         = { __html: account.get('note_emojified') };
@@ -177,7 +175,7 @@ class Header extends ImmutablePureComponent {
                   <dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} />
 
                   <dd className={pair.get('verified_at') && 'verified'} title={pair.get('value_plain')}>
-                    {pair.get('verified_at') && <span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(pair.get('verified_at'), dateFormatOptions) })}><i className='fas fa-check verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} />
+                    {pair.get('verified_at') && <span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(pair.get('verified_at'), dateFormatOptions) })}><i className='fa fa-check verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} />
                   </dd>
                 </dl>
               ))}

app/javascript/mastodon/features/account_timeline/components/moved_note.js

@@ -33,7 +33,7 @@ export default class MovedNote extends ImmutablePureComponent {
     return (
       <div className='account__moved-note'>
         <div className='account__moved-note__message'>
-          <div className='account__moved-note__icon-wrapper'><i className='fas fa-fw fa-suitcase account__moved-note__icon' /></div>
+          <div className='account__moved-note__icon-wrapper'><i className='fa fa-fw fa-suitcase account__moved-note__icon' /></div>
           <FormattedMessage id='account.moved_to' defaultMessage='{name} has moved to:' values={{ name: <bdi><strong dangerouslySetInnerHTML={displayNameHtml} /></bdi> }} />
         </div>
 

app/javascript/mastodon/features/compose/components/compose_form.js

@@ -160,7 +160,7 @@ class ComposeForm extends ImmutablePureComponent {
     let publishText = '';
 
     if (this.props.privacy === 'private' || this.props.privacy === 'direct') {
-      publishText = <span className='compose-form__publish-private'><i className='fas fa-lock' /> {intl.formatMessage(messages.publish)}</span>;
+      publishText = <span className='compose-form__publish-private'><i className='fa fa-lock' /> {intl.formatMessage(messages.publish)}</span>;
     } else {
       publishText = this.props.privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish);
     }

app/javascript/mastodon/features/compose/components/privacy_dropdown.js

@@ -132,7 +132,7 @@ class PrivacyDropdownMenu extends React.PureComponent {
             {items.map(item => (
               <div role='option' tabIndex='0' key={item.value} data-index={item.value} onKeyDown={this.handleKeyDown} onClick={this.handleClick} className={classNames('privacy-dropdown__option', { active: item.value === value })} aria-selected={item.value === value} ref={item.value === value ? this.setFocusRef : null}>
                 <div className='privacy-dropdown__option__icon'>
-                  <i className={`fas fa-fw fa-${item.icon}`} />
+                  <i className={`fa fa-fw fa-${item.icon}`} />
                 </div>
 
                 <div className='privacy-dropdown__option__content'>

app/javascript/mastodon/features/compose/components/search.js

@@ -116,8 +116,8 @@ class Search extends React.PureComponent {
         </label>
 
         <div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}>
-          <i className={`fas fa-search ${hasValue ? '' : 'active'}`} />
-          <i aria-label={intl.formatMessage(messages.placeholder)} className={`fas fa-times-circle ${hasValue ? 'active' : ''}`} />
+          <i className={`fa fa-search ${hasValue ? '' : 'active'}`} />
+          <i aria-label={intl.formatMessage(messages.placeholder)} className={`fa fa-times-circle ${hasValue ? 'active' : ''}`} />
         </div>
 
         <Overlay show={expanded && !hasValue} placement='bottom' target={this}>

app/javascript/mastodon/features/compose/components/search_results.js

@@ -22,7 +22,7 @@ export default class SearchResults extends ImmutablePureComponent {
       count   += results.get('accounts').size;
       accounts = (
         <div className='search-results__section'>
-          <h5><i className='fas fa-fw fa-users' /><FormattedMessage id='search_results.accounts' defaultMessage='People' /></h5>
+          <h5><i className='fa fa-fw fa-users' /><FormattedMessage id='search_results.accounts' defaultMessage='People' /></h5>
 
           {results.get('accounts').map(accountId => <AccountContainer key={accountId} id={accountId} />)}
         </div>
@@ -33,7 +33,7 @@ export default class SearchResults extends ImmutablePureComponent {
       count   += results.get('statuses').size;
       statuses = (
         <div className='search-results__section'>
-          <h5><i className='fas fa-fw fa-quote-right' /><FormattedMessage id='search_results.statuses' defaultMessage='Toots' /></h5>
+          <h5><i className='fa fa-fw fa-quote-right' /><FormattedMessage id='search_results.statuses' defaultMessage='Toots' /></h5>
 
           {results.get('statuses').map(statusId => <StatusContainer key={statusId} id={statusId} />)}
         </div>
@@ -44,7 +44,7 @@ export default class SearchResults extends ImmutablePureComponent {
       count += results.get('hashtags').size;
       hashtags = (
         <div className='search-results__section'>
-          <h5><i className='fas fa-fw fa-hashtag' /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></h5>
+          <h5><i className='fa fa-fw fa-hashtag' /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></h5>
 
           {results.get('hashtags').map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)}
         </div>
@@ -54,7 +54,7 @@ export default class SearchResults extends ImmutablePureComponent {
     return (
       <div className='search-results'>
         <div className='search-results__header'>
-          <i className='fas fa-search fa-fw' />
+          <i className='fa fa-search fa-fw' />
           <FormattedMessage id='search_results.total' defaultMessage='{count, number} {count, plural, one {result} other {results}}' values={{ count }} />
         </div>
 

app/javascript/mastodon/features/compose/components/upload.js

@@ -89,8 +89,8 @@ class Upload extends ImmutablePureComponent {
           {({ scale }) => (
             <div className='compose-form__upload-thumbnail' style={{ transform: `scale(${scale})`, backgroundImage: `url(${media.get('preview_url')})`, backgroundPosition: `${x}% ${y}%` }}>
               <div className={classNames('compose-form__upload__actions', { active })}>
-                <button className='icon-button' onClick={this.handleUndoClick}><i className='fas fa-times' /> <FormattedMessage id='upload_form.undo' defaultMessage='Delete' /></button>
-                {media.get('type') === 'image' && <button className='icon-button' onClick={this.handleFocalPointClick}><i className='fas fa-crosshairs' /> <FormattedMessage id='upload_form.focus' defaultMessage='Crop' /></button>}
+                <button className='icon-button' onClick={this.handleUndoClick}><i className='fa fa-times' /> <FormattedMessage id='upload_form.undo' defaultMessage='Delete' /></button>
+                {media.get('type') === 'image' && <button className='icon-button' onClick={this.handleFocalPointClick}><i className='fa fa-crosshairs' /> <FormattedMessage id='upload_form.focus' defaultMessage='Crop' /></button>}
               </div>
 
               <div className={classNames('compose-form__upload-description', { active })}>