[Glitch] Profile redesign: Badges

Port 22ec368574 to glitch-soc

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

app/javascript/flavours/glitch/features/account_timeline/components/badges.tsx

@@ -1,12 +1,19 @@
-import type { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 
 import {
   AutomatedBadge,
   Badge,
   GroupBadge,
 } from '@/flavours/glitch/components/badge';
+import { Icon } from '@/flavours/glitch/components/icon';
 import { useAccount } from '@/flavours/glitch/hooks/useAccount';
+import type { AccountRole } from '@/flavours/glitch/models/account';
 import { useAppSelector } from '@/flavours/glitch/store';
+import IconAdmin from '@/images/icons/icon_admin.svg?react';
+
+import { isRedesignEnabled } from '../common';
+
+import classes from './redesign.module.scss';
 
 export const AccountBadges: FC<{ accountId: string }> = ({ accountId }) => {
   const account = useAccount(accountId);
@@ -19,22 +26,32 @@ export const AccountBadges: FC<{ accountId: string }> = ({ accountId }) => {
     return null;
   }
 
+  const className = isRedesignEnabled() ? classes.badge : '';
+
   if (account.bot) {
-    badges.push(<AutomatedBadge key='bot-badge' />);
+    badges.push(<AutomatedBadge key='bot-badge' className={className} />);
   } else if (account.group) {
-    badges.push(<GroupBadge key='group-badge' />);
+    badges.push(<GroupBadge key='group-badge' className={className} />);
   }
 
   const domain = account.acct.includes('@')
     ? account.acct.split('@')[1]
     : localDomain;
   account.roles.forEach((role) => {
+    let icon: ReactNode = undefined;
+    if (isAdminBadge(role)) {
+      icon = (
+        <Icon icon={IconAdmin} id='badge-admin' className={classes.badgeIcon} />
+      );
+    }
     badges.push(
       <Badge
-        key={`role-badge-${role.get('id')}`}
-        label={<span>{role.get('name')}</span>}
-        domain={domain}
-        roleId={role.get('id')}
+        key={role.id}
+        label={role.name}
+        className={className}
+        domain={isRedesignEnabled() ? `(${domain})` : domain}
+        roleId={role.id}
+        icon={icon}
       />,
     );
   });
@@ -43,5 +60,10 @@ export const AccountBadges: FC<{ accountId: string }> = ({ accountId }) => {
     return null;
   }
 
-  return <div className='account__header__badges'>{badges}</div>;
+  return <div className={'account__header__badges'}>{badges}</div>;
 };
+
+function isAdminBadge(role: AccountRole) {
+  const name = role.name.toLowerCase();
+  return isRedesignEnabled() && (name === 'admin' || name === 'owner');
+}

app/javascript/flavours/glitch/features/account_timeline/components/redesign.module.scss

@@ -39,6 +39,27 @@ h1.name > small {
   }
 }
 
+.badge {
+  background-color: var(--color-bg-secondary);
+  border: none;
+  color: var(--color-text-secondary);
+  font-weight: 600;
+
+  > span {
+    font-weight: unset;
+    opacity: 1;
+  }
+}
+
+svg.badgeIcon {
+  opacity: 1;
+  fill: revert-layer;
+
+  path {
+    fill: revert-layer;
+  }
+}
+
 .fieldList {
   margin-top: 16px;
 }