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

* Migrate to newer version of Font Awesome

* Add bot icon to bot avatars

app/javascript/mastodon/common.js

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

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

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

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

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

app/javascript/mastodon/components/avatar.js

@@ -1,6 +1,7 @@
 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 {
@@ -65,7 +66,9 @@ 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

@@ -0,0 +1,23 @@
+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='fa fa-fw fa-robot bot-icon' />
+      );
+    }
+
+    return '';
+  }
+
+}

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

@@ -3,6 +3,7 @@ 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';
@@ -67,6 +68,7 @@ class Avatar extends ImmutablePureComponent {
             onBlur={this.handleMouseOut}
           >
             <span style={{ display: 'none' }}>{account.get('acct')}</span>
+            <BotIcon account={account} />
           </a>
         )}
       </Motion>

app/javascript/styles/mastodon/components.scss

@@ -1110,6 +1110,12 @@
     vertical-align: middle;
     margin-right: 5px;
   }
+
+  .bot-icon {
+    position: absolute;
+    bottom: -.333em;
+    left: -.333em;
+  }
 }
 
 a .account__avatar {
@@ -1327,10 +1333,22 @@ a .account__avatar {
 .account__header__avatar {
   background-size: 90px 90px;
   display: block;
+  font-size: 1.5em;
   height: 90px;
   margin: 0 auto 10px;
-  overflow: hidden;
+  position: relative;
   width: 90px;
+
+  .bot-icon {
+    color: $dark-text-color;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+
+    .light & {
+      color: $inverted-text-color;
+    }
+  }
 }
 
 .account-authorize {

package.json

@@ -37,6 +37,7 @@
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/runtime": "^7.0.0",
+    "@fortawesome/fontawesome-free": "^5.2.0",
     "array-includes": "^3.0.3",
     "autoprefixer": "^8.6.5",
     "axios": "~0.16.2",
@@ -58,7 +59,6 @@
     "exif-js": "^2.3.0",
     "express": "^4.16.2",
     "file-loader": "^2.0.0",
-    "font-awesome": "^4.7.0",
     "glob": "^7.1.1",
     "history": "^4.7.2",
     "http-link-header": "^0.8.0",

yarn.lock

@@ -647,6 +647,10 @@
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@csstools/sass-import-resolve/-/sass-import-resolve-1.0.0.tgz#32c3cdb2f7af3cd8f0dca357b592e7271f3831b5"
 
+"@fortawesome/fontawesome-free@^5.2.0":
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.2.0.tgz#50cd9856774351c56c0b1b0db4efe122d7913e58"
+
 "@types/node@*":
   version "10.9.4"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.9.4.tgz#0f4cb2dc7c1de6096055357f70179043c33e9897"
@@ -3279,10 +3283,6 @@ follow-redirects@^1.0.0, follow-redirects@^1.2.3:
   dependencies:
     debug "=3.1.0"
 
-font-awesome@^4.7.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
-
 for-in@^0.1.3:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"