[Glitch] Change design of role badges in web UI

Port 2cbdff97ce to glitch-soc

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

app/javascript/flavours/glitch/components/badge.jsx

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+
+import { FormattedMessage } from 'react-intl';
+
+import { ReactComponent as GroupsIcon } from '@material-symbols/svg-600/outlined/group.svg';
+import { ReactComponent as PersonIcon } from '@material-symbols/svg-600/outlined/person.svg';
+import { ReactComponent as SmartToyIcon } from '@material-symbols/svg-600/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/flavours/glitch/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 'flavours/glitch/components/avatar';
+import { Badge, AutomatedBadge, GroupBadge } from 'flavours/glitch/components/badge';
 import { Button } from 'flavours/glitch/components/button';
 import { Icon }  from 'flavours/glitch/components/icon';
 import { IconButton } from 'flavours/glitch/components/icon_button';
@@ -311,28 +312,13 @@ class Header extends ImmutablePureComponent {
     const badges = [];
 
     if (account.get('bot')) {
-      badges.push(
+      badges.push(<AutomatedBadge key='bot-badge' />);
-        <div key='bot-badge' className='account-role bot'>
-          <Icon id='cogs' /> { ' ' }
-          <FormattedMessage id='account.badges.bot' defaultMessage='Automated' />
-        </div>
-      );
     } else if (account.get('group')) {
-      badges.push(
+      badges.push(<GroupBadge key='group-badge' />);
-        <div key='group-badge' className='account-role group'>
-          <Icon id='users' /> { ' ' }
-          <FormattedMessage id='account.badges.group' defaultMessage='Group' />
-        </div>
-      );
     }
 
     account.get('roles', []).forEach((role) => {
-      badges.push(
+      badges.push(<Badge key={`role-badge-${role.get('id')}`} label={<span>{role.get('name')}</span>} domain={domain} />);
-        <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>
-      );
     });
 
     return (

app/javascript/flavours/glitch/styles/accounts.scss

@@ -191,7 +191,6 @@
   }
 }
 
-.account-role,
 .information-badge,
 .simple_form .overridden,
 .simple_form .recommended,
@@ -218,10 +217,30 @@
 }
 
 .account-role {
+  display: inline-flex;
+  padding: 4px;
+  padding-inline-end: 8px;
   border: 1px solid $highlight-text-color;
+  color: $highlight-text-color;
+  font-weight: 500;
+  font-size: 12px;
+  letter-spacing: 0.5px;
+  line-height: 16px;
+  gap: 4px;
+  border-radius: 6px;
+  align-items: center;
 
-  .fa {
+  svg {
-    color: var(--user-role-accent, $highlight-text-color);
+    width: auto;
+    height: 15px;
+    opacity: 0.85;
+    fill: currentColor;
+  }
+
+  &__domain {
+    font-weight: 400;
+    opacity: 0.75;
+    letter-spacing: 0;
   }
 }