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

Co-authored-by: Claire <[email protected]>
ClearlyClaire · Aug 2, 2023 · 2cbdff9 · 2cbdff9
1 parent 01f0cff
commit 2cbdff9
Show file tree

Hide file tree

Showing 7 changed files with 491 additions and 31 deletions.
diff --git a/app/javascript/mastodon/components/badge.jsx b/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' />} />
+);
diff --git a/app/javascript/mastodon/features/account/components/header.jsx b/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 (

diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss
@@ -187,7 +187,6 @@
   }
 }
 
-.account-role,
 .information-badge,
 .simple_form .recommended,
 .simple_form .not_recommended {
@@ -212,10 +211,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;
+
+  svg {
+    width: auto;
+    height: 15px;
+    opacity: 0.85;
+    fill: currentColor;
+  }
 
-  .fa {
-    color: var(--user-role-accent, $highlight-text-color);
+  &__domain {
+    font-weight: 400;
+    opacity: 0.75;
+    letter-spacing: 0;
   }
 }
 

diff --git a/config/webpack/rules/index.js b/config/webpack/rules/index.js
@@ -1,13 +1,15 @@
 const babel = require('./babel');
 const css = require('./css');
 const file = require('./file');
+const materialIcons = require('./material_icons');
 const nodeModules = require('./node_modules');
 const tesseract = require('./tesseract');
 
 // Webpack loaders are processed in reverse order
 // https://webpack.js.org/concepts/loaders/#loader-features
 // Lastly, process static files using file loader
 module.exports = {
+  materialIcons,
   file,
   tesseract,
   css,

diff --git a/config/webpack/rules/material_icons.js b/config/webpack/rules/material_icons.js
@@ -0,0 +1,13 @@
+module.exports = {
+  test: /\.svg$/,
+  include: /node_modules\/@material-design-icons/,
+  issuer: /\.[jt]sx?$/,
+  use: [
+    {
+      loader: '@svgr/webpack',
+      options: {
+        svgo: false,
+      },
+    },
+  ],
+};
diff --git a/package.json b/package.json
@@ -44,8 +44,10 @@
     "@formatjs/intl-pluralrules": "^5.2.2",
     "@gamestdio/websocket": "^0.3.2",
     "@github/webauthn-json": "^2.1.1",
+    "@material-design-icons/svg": "^0.14.10",
     "@rails/ujs": "^7.0.6",
     "@reduxjs/toolkit": "^1.9.5",
+    "@svgr/webpack": "^5.5.0",
     "abortcontroller-polyfill": "^1.7.5",
     "arrow-key-navigation": "^1.2.0",
     "async-mutex": "^0.4.0",