Change design of role badges in web UI (#26281)

Co-authored-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/mastodon/components/badge.jsx

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+
+import { FormattedMessage } from 'react-intl';
+
+import { ReactComponent as GroupsIcon } from '@material-design-icons/svg/outlined/group.svg';
+import { ReactComponent as PersonIcon } from '@material-design-icons/svg/outlined/person.svg';
+import { ReactComponent as SmartToyIcon } from '@material-design-icons/svg/outlined/smart_toy.svg';
+
+
+export const Badge = ({ icon, label, domain }) => (
+  <div className='account-role'>
+    {icon}
+    {label}
+    {domain && <span className='account-role__domain'>{domain}</span>}
+  </div>
+);
+
+Badge.propTypes = {
+  icon: PropTypes.node,
+  label: PropTypes.node,
+  domain: PropTypes.node,
+};
+
+Badge.defaultProps = {
+  icon: <PersonIcon />,
+};
+
+export const GroupBadge = () => (
+  <Badge icon={<GroupsIcon />} label={<FormattedMessage id='account.badges.group' defaultMessage='Group' />} />
+);
+
+export const AutomatedBadge = () => (
+  <Badge icon={<SmartToyIcon />} label={<FormattedMessage id='account.badges.bot' defaultMessage='Automated' />} />
+);

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

@@ -10,6 +10,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import { Avatar } from 'mastodon/components/avatar';
+import { Badge, AutomatedBadge, GroupBadge } from 'mastodon/components/badge';
 import Button from 'mastodon/components/button';
 import { FollowersCounter, FollowingCounter, StatusesCounter } from 'mastodon/components/counters';
 import { Icon }  from 'mastodon/components/icon';
@@ -373,28 +374,13 @@ class Header extends ImmutablePureComponent {
     const badges = [];
 
     if (account.get('bot')) {
-      badges.push(
-        <div key='bot-badge' className='account-role bot'>
-          <Icon id='cogs' /> { ' ' }
-          <FormattedMessage id='account.badges.bot' defaultMessage='Automated' />
-        </div>
-      );
+      badges.push(<AutomatedBadge key='bot-badge' />);
     } else if (account.get('group')) {
-      badges.push(
-        <div key='group-badge' className='account-role group'>
-          <Icon id='users' /> { ' ' }
-          <FormattedMessage id='account.badges.group' defaultMessage='Group' />
-        </div>
-      );
+      badges.push(<GroupBadge key='group-badge' />);
     }
 
     account.get('roles', []).forEach((role) => {
-      badges.push(
-        <div key={`role-badge-${role.get('id')}`} className={`account-role user-role-${account.getIn(['roles', 0, 'id'])}`}>
-          <Icon id='circle' /> { ' ' }
-          <span>{role.get('name')} ({domain})</span>
-        </div>
-      );
+      badges.push(<Badge key={`role-badge-${role.get('id')}`} label={<span>{role.get('name')}</span>} domain={domain} />);
     });
 
     return (