diff --git a/app/javascript/mastodon/common.js b/app/javascript/mastodon/common.js
index 2b10b8c30a..fdd3431ab0 100644
--- a/app/javascript/mastodon/common.js
+++ b/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();
diff --git a/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap b/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap
index 76ab3374ae..f6f6bfbf46 100644
--- a/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap
+++ b/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap
@@ -13,7 +13,11 @@ exports[` Autoplay renders a animated avatar 1`] = `
"width": "100px",
}
}
-/>
+>
+
+
`;
exports[` Still renders a still avatar 1`] = `
@@ -29,5 +33,9 @@ exports[` Still renders a still avatar 1`] = `
"width": "100px",
}
}
-/>
+>
+
+
`;
diff --git a/app/javascript/mastodon/components/__tests__/avatar-test.js b/app/javascript/mastodon/components/__tests__/avatar-test.js
index dd3f7b7d21..cc99d3a535 100644
--- a/app/javascript/mastodon/components/__tests__/avatar-test.js
+++ b/app/javascript/mastodon/components/__tests__/avatar-test.js
@@ -10,6 +10,7 @@ describe('', () => {
display_name: 'Alice',
avatar: '/animated/alice.gif',
avatar_static: '/static/alice.jpg',
+ bot: true,
});
const size = 100;
diff --git a/app/javascript/mastodon/components/avatar.js b/app/javascript/mastodon/components/avatar.js
index 570505833f..e46f1ed760 100644
--- a/app/javascript/mastodon/components/avatar.js
+++ b/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}
- />
+ >
+
+
);
}
diff --git a/app/javascript/mastodon/components/bot_icon.js b/app/javascript/mastodon/components/bot_icon.js
new file mode 100644
index 0000000000..f4bd702822
--- /dev/null
+++ b/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 (
+
+ );
+ }
+
+ return '';
+ }
+
+}
diff --git a/app/javascript/mastodon/features/account/components/header.js b/app/javascript/mastodon/features/account/components/header.js
index 11ae589053..e498ba5ccc 100644
--- a/app/javascript/mastodon/features/account/components/header.js
+++ b/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}
>
{account.get('acct')}
+
)}
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 3fb924aa42..b3f3347dfd 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/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 {
diff --git a/package.json b/package.json
index 8320a76fb8..155bb7e0b0 100644
--- a/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index d2063ddeaf..adac9aa060 100644
--- a/yarn.lock
+++ b/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"