chore: more design change updates

src/components/Avatar/Avatar.tsx

@@ -15,7 +15,7 @@ export type AvatarProps = {
   /** Online status indicator, not rendered if not of type boolean */
   isOnline?: boolean;
 
-  size: 'xl' | 'lg' | 'md' | 'sm' | 'xs' | null;
+  size: '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | null;
 } & ComponentPropsWithoutRef<'div'>;
 
 const getInitials = (name?: string) => {

src/components/Avatar/AvatarStack.tsx

@@ -1,13 +1,18 @@
 import { type ComponentProps, type ElementType } from 'react';
 import { useComponentContext } from '../../context';
 import { type AvatarProps, Avatar as DefaultAvatar } from './Avatar';
+import clsx from 'clsx';
 
 export function AvatarStack({
   component: Component = 'div',
   displayInfo = [],
+  overflowCount,
+  size,
 }: {
   component?: ElementType;
   displayInfo?: (Pick<AvatarProps, 'imageUrl' | 'userName'> & { id?: string })[];
+  overflowCount?: number;
+  size: 'sm' | 'xs' | null;
 }) {
   const { Avatar = DefaultAvatar } = useComponentContext(AvatarStack.name);
 
@@ -16,16 +21,22 @@ export function AvatarStack({
   }
 
   return (
-    <Component className='str-chat__avatar-stack'>
+    <Component
+      className={clsx('str-chat__avatar-stack', {
+        [`str-chat__avatar-stack--size-${size}`]: typeof size === 'string',
+      })}
+    >
       {displayInfo.map((info, index) => (
         <Avatar
-          className='str-chat__avatar--with-border'
           imageUrl={info.imageUrl}
           key={info.id ?? `${info.userName}-${info.imageUrl}-${index}`}
-          size='xs'
+          size={size}
           userName={info.userName}
         />
       ))}
+      {typeof overflowCount === 'number' && overflowCount > 0 && (
+        <div className='str-chat__avatar-stack__count-badge'>{overflowCount}</div>
+      )}
     </Component>
   );
 }

src/components/Avatar/GroupAvatar.tsx

@@ -6,8 +6,9 @@ import type { GroupChannelDisplayInfo } from '../ChannelPreview';
 export type GroupAvatarProps = ComponentPropsWithoutRef<'div'> & {
   /** Mapping of image URLs to names which initials will be used as fallbacks in case image assets fail to load. */
   groupChannelDisplayInfo: GroupChannelDisplayInfo;
-  size: 'xl' | 'lg' | null;
+  size: '2xl' | 'xl' | 'lg' | null;
   isOnline?: boolean;
+  overflowCount?: number;
 };
 
 /**
@@ -19,9 +20,12 @@ export const GroupAvatar = ({
   className,
   groupChannelDisplayInfo,
   isOnline,
+  overflowCount,
   size,
   ...rest
 }: GroupAvatarProps) => {
+  const displayCountBadge = typeof overflowCount === 'number' && overflowCount > 0;
+
   if (!groupChannelDisplayInfo || groupChannelDisplayInfo.length < 2) {
     const [firstUser] = groupChannelDisplayInfo || [];
 
@@ -37,9 +41,10 @@ export const GroupAvatar = ({
   }
 
   let avatarSize: AvatarProps['size'] = null;
-
-  if (size === 'xl') {
+  if (size === '2xl') {
     avatarSize = 'lg';
+  } else if (size === 'xl') {
+    avatarSize = 'md';
   } else if (size === 'lg') {
     avatarSize = 'sm';
   }
@@ -59,14 +64,19 @@ export const GroupAvatar = ({
       role='button'
       {...rest}
     >
-      {groupChannelDisplayInfo.slice(0, 4).map(({ imageUrl, userName }, index) => (
-        <Avatar
-          imageUrl={imageUrl}
-          key={`${userName}-${imageUrl}-${index}`}
-          size={avatarSize}
-          userName={userName}
-        />
-      ))}
+      {groupChannelDisplayInfo
+        .slice(0, displayCountBadge ? 2 : 4)
+        .map(({ imageUrl, userName }, index) => (
+          <Avatar
+            imageUrl={imageUrl}
+            key={`${userName}-${imageUrl}-${index}`}
+            size={avatarSize}
+            userName={userName}
+          />
+        ))}
+      {displayCountBadge && (
+        <div className='str-chat__avatar-group__count-badge'>+{overflowCount}</div>
+      )}
     </div>
   );
 };

src/components/Avatar/styling/Avatar.scss

@@ -4,17 +4,18 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: var(--radius-max, 9999px);
-  background: var(--avatar-bg-default, #e3edff);
-  color: var(--avatar-text-default, #142f63);
+  border-radius: var(--radius-max);
+  background: var(--avatar-bg-default);
+  color: var(--avatar-text-default);
   text-align: center;
 
   font-weight: var(--typography-font-weight-semi-bold);
+  font-style: normal;
   line-height: 1;
   text-transform: uppercase;
   width: var(--avatar-size);
-  aspect-ratio: 1/1;
-  --avatar-badge-angle: -45deg;
+  height: var(--avatar-size);
+  --avatar-online-badge-angle: -45deg;
 
   // FIXME: temporary thing, should be removed when we get rid of the old CSS
   grid-area: avatar;
@@ -47,65 +48,74 @@
     aspect-ratio: 1/1;
     content: '';
     position: absolute;
-    width: var(--avatar-badge-size);
+    width: var(--avatar-online-badge-size);
 
     left: calc(
       var(--avatar-size) / 2 + var(--avatar-size) / 2 *
-        cos(var(--avatar-badge-angle)) - var(--avatar-badge-size) / 2
+        cos(var(--avatar-online-badge-angle)) - var(--avatar-online-badge-size) / 2
     );
     top: calc(
       var(--avatar-size) / 2 + var(--avatar-size) / 2 *
-        sin(var(--avatar-badge-angle)) - var(--avatar-badge-size) / 2
+        sin(var(--avatar-online-badge-angle)) - var(--avatar-online-badge-size) / 2
     );
 
     border-radius: var(--radius-max, 9999px);
     border-style: solid;
-    border-color: var(--presence-border, #fff);
+    border-color: var(--presence-border);
     border-width: 2px;
   }
 
   &.str-chat__avatar--online::after {
-    background: var(--presence-bg-online, #00c384);
+    background: var(--presence-bg-online);
   }
 
   &.str-chat__avatar--offline::after {
-    background: var(--presence-bg-offline, #687385);
+    background: var(--presence-bg-offline);
   }
 
-  &.str-chat__avatar--size-xl {
+  &.str-chat__avatar--size-2xl {
     --avatar-size: 64px;
-    --avatar-badge-size: 16px;
-    --avatar-icon-size: 32px;
+    --avatar-online-badge-size: 16px;
+    --avatar-icon-size: var(--icon-size-lg);
+    --avatar-icon-stroke-width: 1.5px;
+
+    font-size: var(--typography-font-size-xl);
+  }
+
+  &.str-chat__avatar--size-xl {
+    --avatar-size: 48px;
+    --avatar-online-badge-size: 16px;
+    --avatar-icon-size: var(--size-24); // TODO: missing icon size
     --avatar-icon-stroke-width: 1.5px;
 
-    font-size: var(--typography-font-size-xl, 20px);
+    font-size: var(--typography-font-size-xl);
   }
 
   &.str-chat__avatar--size-lg {
     --avatar-size: 40px;
-    --avatar-badge-size: 14px;
-    --avatar-icon-size: 20px;
+    --avatar-online-badge-size: 14px;
+    --avatar-icon-size: var(--icon-size-md);
     --avatar-icon-stroke-width: 1.5px;
 
-    font-size: var(--typography-font-size-md, 15px);
+    font-size: var(--typography-font-size-md);
   }
 
-  &.str-chat__avatar--size-md {
+   &.str-chat__avatar--size-md {
     --avatar-size: 32px;
-    --avatar-badge-size: 12px;
-    --avatar-icon-size: 16px;
+    --avatar-online-badge-size: 12px;
+    --avatar-icon-size: var(--icon-size-md);
     --avatar-icon-stroke-width: 1.5px;
 
-    font-size: var(--typography-font-size-sm, 13px);
+    font-size: var(--typography-font-size-sm);
   }
 
   &.str-chat__avatar--size-sm {
     --avatar-size: 24px;
-    --avatar-badge-size: 8px;
-    --avatar-icon-size: 12px;
+    --avatar-online-badge-size: 8px;
+    --avatar-icon-size: var(--icon-size-sm);
     --avatar-icon-stroke-width: 1.2px;
 
-    font-size: var(--typography-font-size-sm, 13px);
+    font-size: var(--typography-font-size-sm);
 
     &.str-chat__avatar--offline::after,
     &.str-chat__avatar--online::after {
@@ -115,11 +125,11 @@
 
   &.str-chat__avatar--size-xs {
     --avatar-size: 20px;
-    --avatar-badge-size: 8px;
+    --avatar-online-badge-size: 8px;
     --avatar-icon-size: 10px;
     --avatar-icon-stroke-width: 1.2px;
 
-    font-size: var(--typography-font-size-xs, 12px);
+    font-size: var(--typography-font-size-xs);
 
     &.str-chat__avatar--offline::after,
     &.str-chat__avatar--online::after {

src/components/Avatar/styling/AvatarStack.scss

@@ -2,7 +2,53 @@
   display: flex;
   align-items: center;
 
-  & > .str-chat__avatar:not(:first-child) {
+  & > .str-chat__avatar:not(:first-child),
+  .str-chat__avatar-stack__count-badge {
     margin-left: calc(var(--spacing-xs) * -1);
   }
+
+  & > .str-chat__avatar:after {
+    content: '';
+    position: absolute;
+    width: calc(100% + 4px);
+    height: calc(100% + 4px);
+    border: 2px solid var(--border-core-on-dark);
+    border-radius: inherit;
+  }
+
+  &.str-chat__avatar-stack--size-sm {
+    --avatar-stack-count-badge-size: 24px;
+    // FIXME?: should be sm but it looks way too big
+    --avatar-stack-count-badge-font-size: var(--typography-font-size-xs);
+
+    .str-chat__avatar-stack__count-badge {
+      padding-inline: var(--spacing-xs);
+    }
+  }
+
+  &.str-chat__avatar-stack--size-xs {
+    --avatar-stack-count-badge-size: 20px;
+    --avatar-stack-count-badge-font-size: var(--typography-font-size-xxs);
+
+    .str-chat__avatar-stack__count-badge {
+      padding-inline: var(--spacing-xxs);
+    }
+  }
+
+  .str-chat__avatar-stack__count-badge {
+    font-size: var(--avatar-stack-count-badge-font-size);
+    font-weight: var(--typography-font-weight-bold);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: var(--avatar-stack-count-badge-size);
+    min-width: var(--avatar-stack-count-badge-size);
+    min-height: var(--avatar-stack-count-badge-size);
+    border-radius: var(--radius-max);
+    border: 1px solid var(--border-core-subtle);
+    background: var(--badge-bg-default);
+    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14);
+    line-height: 1;
+    z-index: 1;
+  }
 }