[Glitch] Profile redesign: Adds a "Follows you" badge

Port 759e97fd36 to glitch-soc

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

app/javascript/flavours/glitch/components/badge/badge.stories.tsx

@@ -2,14 +2,20 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import CelebrationIcon from '@/material-icons/400-24px/celebration-fill.svg?react';
 
-import * as badges from './badge';
+import * as badges from '.';
 
 const meta = {
   component: badges.Badge,
   title: 'Components/Badge',
   args: {
+    domain: '',
     label: undefined,
   },
+  argTypes: {
+    domain: {
+      control: 'text',
+    },
+  },
 } satisfies Meta<typeof badges.Badge>;
 
 export default meta;

app/javascript/flavours/glitch/components/badge/index.tsx

@@ -11,28 +11,38 @@ import PersonIcon from '@/material-icons/400-24px/person.svg?react';
 import SmartToyIcon from '@/material-icons/400-24px/smart_toy.svg?react';
 import VolumeOffIcon from '@/material-icons/400-24px/volume_off.svg?react';
 
+import classes from './styles.module.scss';
+
 interface BadgeProps {
   label: ReactNode;
   icon?: ReactNode;
   className?: string;
   domain?: ReactNode;
   roleId?: string;
+  variant?:
+    | 'default'
+    | 'subtle'
+    | 'inverted'
+    | 'success'
+    | 'warning'
+    | 'danger';
 }
 
 export const Badge: FC<BadgeProps> = ({
   icon = <PersonIcon />,
+  variant = 'default',
   label,
   className,
   domain,
   roleId,
 }) => (
   <div
-    className={classNames('account-role', className)}
+    className={classNames(classes.badge, classes[variant], className)}
     data-account-role-id={roleId}
   >
     {icon}
     <span>{label}</span>
-    {domain && <span className='account-role__domain'>{domain}</span>}
+    {domain && <span className={classes.domain}>{domain}</span>}
   </div>
 );
 
@@ -89,6 +99,7 @@ export const MutedBadge: FC<
   return (
     <Badge
       icon={<VolumeOffIcon />}
+      variant='inverted'
       label={
         label ??
         (formattedDate ? (
@@ -111,6 +122,7 @@ export const MutedBadge: FC<
 export const BlockedBadge: FC<Partial<BadgeProps>> = ({ label, ...props }) => (
   <Badge
     icon={<BlockIcon />}
+    variant='danger'
     label={
       label ?? (
         <FormattedMessage

app/javascript/flavours/glitch/components/badge/styles.module.scss

@@ -0,0 +1,55 @@
+.badge {
+  color: var(--color-text-primary);
+  font-size: 13px;
+  display: inline-flex;
+  padding: 4px;
+  padding-inline-end: 8px;
+  gap: 4px;
+  border-radius: 6px;
+  align-items: center;
+
+  > svg {
+    width: auto;
+    height: 15px;
+    fill: currentColor;
+    opacity: 0.85;
+  }
+}
+
+.domain {
+  opacity: 0.75;
+  letter-spacing: 0;
+}
+
+.default {
+  background-color: var(--color-bg-secondary);
+}
+
+.subtle {
+  background-color: var(--color-bg-brand-softest);
+}
+
+.feature {
+  background-color: var(--color-bg-brand-base);
+  color: var(--color-text-on-brand-base);
+}
+
+.inverted {
+  background-color: var(--color-bg-inverted);
+  color: var(--color-text-inverted);
+}
+
+.success {
+  background-color: var(--color-bg-success-softest);
+  color: var(--color-text-success);
+}
+
+.warning {
+  background-color: var(--color-bg-warning-softest);
+  color: var(--color-text-warning);
+}
+
+.danger {
+  background-color: var(--color-bg-error-base);
+  color: var(--color-text-on-error-base);
+}