Merge branch 'group-avatar-ring' into 'develop'

Add GroupAvatar component

See merge request soapbox-pub/soapbox!2349

app/soapbox/components/group-card.tsx

@@ -5,7 +5,8 @@ import GroupMemberCount from 'soapbox/features/group/components/group-member-cou
 import GroupPrivacy from 'soapbox/features/group/components/group-privacy';
 import GroupRelationship from 'soapbox/features/group/components/group-relationship';
 
-import { Avatar, HStack, Stack, Text } from './ui';
+import GroupAvatar from './groups/group-avatar';
+import { HStack, Stack, Text } from './ui';
 
 import type { Group as GroupEntity } from 'soapbox/types/entities';
 
@@ -37,7 +38,7 @@ const GroupCard: React.FC<IGroupCard> = ({ group }) => {
 
       {/* Group Avatar */}
       <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
-        <Avatar className='ring-2 ring-white dark:ring-primary-900' src={group.avatar} size={64} />
+        <GroupAvatar group={group} size={64} withRing />
       </div>
 
       {/* Group Info */}

app/soapbox/components/groups/group-avatar.tsx

@@ -0,0 +1,38 @@
+import clsx from 'clsx';
+import React from 'react';
+
+import { useGroupRoles } from 'soapbox/hooks/useGroupRoles';
+
+import { Avatar } from '../ui';
+
+import type { Group } from 'soapbox/schemas';
+
+interface IGroupAvatar {
+  group: Group
+  size: number
+  withRing?: boolean
+}
+
+const GroupAvatar = (props: IGroupAvatar) => {
+  const { group, size, withRing = false } = props;
+
+  const { normalizeRole } = useGroupRoles();
+
+  const isAdmin = normalizeRole(group.relationship?.role as any) === 'admin';
+
+  return (
+    <Avatar
+      className={
+        clsx('relative rounded-full', {
+          'shadow-[0_0_0_2px_theme(colors.primary.600),0_0_0_4px_theme(colors.white)]': isAdmin && withRing,
+          'shadow-[0_0_0_2px_theme(colors.primary.600)]': isAdmin && !withRing,
+          'shadow-[0_0_0_2px_theme(colors.white)]': !isAdmin && withRing,
+        })
+      }
+      src={group.avatar}
+      size={size}
+    />
+  );
+};
+
+export default GroupAvatar;

app/soapbox/features/group/components/group-header.tsx

@@ -3,8 +3,9 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';
+import GroupAvatar from 'soapbox/components/groups/group-avatar';
 import StillImage from 'soapbox/components/still-image';
-import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui';
+import { HStack, Stack, Text } from 'soapbox/components/ui';
 import { useAppDispatch } from 'soapbox/hooks';
 import { normalizeAttachment } from 'soapbox/normalizers';
 import { isDefaultHeader } from 'soapbox/utils/accounts';
@@ -109,10 +110,10 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
 
         <div className='absolute left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2'>
           <a href={group.avatar} onClick={handleAvatarClick} target='_blank'>
-            <Avatar
-              className='ring-[3px] ring-white dark:ring-primary-900'
-              src={group.avatar}
+            <GroupAvatar
+              group={group}
               size={80}
+              withRing
             />
           </a>
         </div>

app/soapbox/features/groups/components/discover/group-grid-item.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { Avatar, Button, HStack, Stack, Text } from 'soapbox/components/ui';
+import GroupAvatar from 'soapbox/components/groups/group-avatar';
+import { Button, HStack, Stack, Text } from 'soapbox/components/ui';
 import GroupMemberCount from 'soapbox/features/group/components/group-member-count';
 import GroupPrivacy from 'soapbox/features/group/components/group-privacy';
 import { useJoinGroup } from 'soapbox/queries/groups';
@@ -43,9 +44,8 @@ const GroupGridItem = forwardRef((props: IGroup, ref: React.ForwardedRef<HTMLDiv
           )}
 
           <Stack justifyContent='end' className='z-10 p-4 text-white' space={3}>
-            <Avatar
-              className='ring-2 ring-white'
-              src={group.avatar}
+            <GroupAvatar
+              group={group}
               size={44}
             />
 

app/soapbox/features/groups/components/discover/group-list-item.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { Avatar, Button, HStack, Icon, Stack, Text } from 'soapbox/components/ui';
+import GroupAvatar from 'soapbox/components/groups/group-avatar';
+import { Button, HStack, Icon, Stack, Text } from 'soapbox/components/ui';
 import { useJoinGroup } from 'soapbox/queries/groups';
 import { Group as GroupEntity } from 'soapbox/types/entities';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
@@ -26,9 +27,8 @@ const GroupListItem = (props: IGroup) => {
     >
       <Link key={group.id} to={`/groups/${group.id}`}>
         <HStack alignItems='center' space={2}>
-          <Avatar
-            className='ring-2 ring-white dark:ring-primary-900'
-            src={group.avatar}
+          <GroupAvatar
+            group={group}
             size={44}
           />
 

app/soapbox/schemas/index.ts

@@ -1,8 +1,15 @@
+/**
+ * Schemas
+ */
 export { customEmojiSchema  } from './custom-emoji';
-export type { CustomEmoji } from './custom-emoji';
 export { groupSchema } from './group';
-export type { Group } from './group';
 export { groupMemberSchema } from './group-member';
-export type { GroupMember } from './group-member';
 export { groupRelationshipSchema } from './group-relationship';
+
+/**
+ * Entity Types
+ */
+export type { CustomEmoji } from './custom-emoji';
+export type { Group } from './group';
+export type { GroupMember } from './group-member';
 export type { GroupRelationship } from './group-relationship';