💄 Update avatar component (#1812)

apps/web/src/app/[locale]/(space)/layout.tsx

@@ -40,7 +40,7 @@ export default async function Layout({
                   <OptimizedAvatarImage
                     src={user.image}
                     name={user.name}
-                    size="xs"
+                    size="sm"
                   />
                 </Link>
               </Button>

apps/web/src/components/discussion/discussion.tsx

@@ -204,7 +204,7 @@ function DiscussionInner() {
                       <Participant>
                         <OptimizedAvatarImage
                           name={comment.authorName}
-                          size="xs"
+                          size="sm"
                         />
                         <ParticipantName>{comment.authorName}</ParticipantName>
                         {session.ownsObject(comment) ? (

apps/web/src/components/optimized-avatar-image.tsx

@@ -4,31 +4,20 @@ import { Avatar, AvatarFallback, AvatarImage } from "@rallly/ui/avatar";
 import Image from "next/image";
 import React from "react";
 
-const sizeToWidth = {
-  xs: 20,
-  sm: 24,
-  md: 32,
-  lg: 48,
-  xl: 64,
-};
-
 export function OptimizedAvatarImage({
   size,
   className,
   src,
   name,
 }: {
-  size: "xs" | "sm" | "md" | "lg" | "xl";
+  size: "sm" | "md" | "lg" | "xl";
   src?: string;
   name: string;
   className?: string;
 }) {
   const [isLoaded, setLoaded] = React.useState(false);
   return (
-    <Avatar
+    <Avatar className={cn("rounded-full", className)} size={size}>
-      className={cn("rounded-full", className)}
-      style={{ width: sizeToWidth[size], height: sizeToWidth[size] }}
-    >
       {src ? (
         src.startsWith("https") || src.startsWith("data:") ? (
           <AvatarImage src={src} alt={name} />
@@ -49,11 +38,9 @@ export function OptimizedAvatarImage({
         <AvatarFallback
           seed={name}
           className={cn("shrink-0", {
-            "text-[10px]": size === "xs",
+            "text-[10px]": size === "sm",
-            "text-[12px]": size === "sm",
+            "text-[12px]": size === "md",
-            "text-md": size === "md",
+            "text-md": size === "lg",
-            "text-lg": size === "lg",
-            "text-3xl": size === "xl",
           })}
         >
           {name?.[0]?.toUpperCase()}

apps/web/src/components/participant-avatar-bar.tsx

@@ -44,7 +44,7 @@ export const ParticipantAvatarBar = ({
               <OptimizedAvatarImage
                 name={participant.name}
                 src={participant.image}
-                size="xs"
+                size="sm"
               />
             </li>
           </TooltipTrigger>

apps/web/src/components/participant.tsx

@@ -1,42 +1,10 @@
 import { cn } from "@rallly/ui";
-import { Avatar, AvatarFallback } from "@rallly/ui/avatar";
 import React from "react";
 
 export function Participant({ children }: { children: React.ReactNode }) {
   return <div className="flex min-w-0 items-center gap-x-2">{children}</div>;
 }
 
-const sizeToWidth = {
-  xs: 20,
-  sm: 24,
-  md: 32,
-  lg: 48,
-};
-
-export const ParticipantAvatar = ({
-  size = "md",
-  name,
-}: {
-  size?: "xs" | "sm" | "md" | "lg";
-  name: string;
-}) => {
-  return (
-    <Avatar size={sizeToWidth[size]}>
-      <AvatarFallback
-        className={cn({
-          "text-xs": size === "xs",
-          "text-sm": size === "sm",
-          "text-md": size === "md",
-          "text-lg": size === "lg",
-        })}
-        seed={name}
-      >
-        {name[0]?.toUpperCase()}
-      </AvatarFallback>
-    </Avatar>
-  );
-};
-
 export const ParticipantName = ({
   children,
 }: {

apps/web/src/components/poll/desktop-poll/participant-row-form.tsx

@@ -62,7 +62,7 @@ const ParticipantRowForm = ({
         <div className="flex items-center justify-between gap-x-2.5">
           <Participant>
             {name ? (
-              <OptimizedAvatarImage name={participantName} size="xs" />
+              <OptimizedAvatarImage name={participantName} size="sm" />
             ) : (
               <YouAvatar />
             )}

apps/web/src/components/poll/desktop-poll/participant-row.tsx

@@ -52,7 +52,7 @@ export const ParticipantRowView: React.FunctionComponent<{
       >
         <div className="flex max-w-full items-center justify-between gap-x-2">
           <Participant>
-            <OptimizedAvatarImage size="xs" name={name} />
+            <OptimizedAvatarImage size="sm" name={name} />
             <ParticipantName>{name}</ParticipantName>
           </Participant>
           <div className="flex items-center gap-x-2">

apps/web/src/components/poll/mobile-poll.tsx

@@ -104,7 +104,7 @@ const MobilePoll: React.FunctionComponent = () => {
                 {visibleParticipants.map((participant) => (
                   <SelectItem key={participant.id} value={participant.id}>
                     <Participant>
-                      <OptimizedAvatarImage name={participant.name} size="xs" />
+                      <OptimizedAvatarImage name={participant.name} size="sm" />
                       <ParticipantName>{participant.name}</ParticipantName>
                       {session.ownsObject(participant) && (
                         <Badge>

apps/web/src/components/poll/mobile-poll/poll-option.tsx

@@ -52,7 +52,7 @@ const PollOptionVoteSummary: React.FunctionComponent<{ optionId: string }> = ({
               // biome-ignore lint/suspicious/noArrayIndexKey: Fix this later
               <div key={i} className="flex">
                 <div className="relative mr-2.5 flex size-5 items-center justify-center">
-                  <OptimizedAvatarImage size="xs" name={name} />
+                  <OptimizedAvatarImage size="sm" name={name} />
                   <VoteIcon
                     type="yes"
                     size="sm"
@@ -66,7 +66,7 @@ const PollOptionVoteSummary: React.FunctionComponent<{ optionId: string }> = ({
               // biome-ignore lint/suspicious/noArrayIndexKey: Fix this later
               <div key={i} className="flex">
                 <div className="relative mr-2.5 flex size-5 items-center justify-center">
-                  <OptimizedAvatarImage size="xs" name={name} />
+                  <OptimizedAvatarImage size="sm" name={name} />
                   <VoteIcon
                     type="ifNeedBe"
                     size="sm"
@@ -82,7 +82,7 @@ const PollOptionVoteSummary: React.FunctionComponent<{ optionId: string }> = ({
               // biome-ignore lint/suspicious/noArrayIndexKey: Fix this later
               <div key={i} className="flex">
                 <div className="relative mr-2.5 flex size-5 items-center justify-center">
-                  <OptimizedAvatarImage size="xs" name={name} />
+                  <OptimizedAvatarImage size="sm" name={name} />
                   <VoteIcon
                     type="no"
                     size="sm"

apps/web/src/components/user-dropdown.tsx

@@ -48,7 +48,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
           <OptimizedAvatarImage
             src={user.image ?? undefined}
             name={user.name}
-            size="xs"
+            size="sm"
           />
           <span className="truncate">{user.name}</span>
           <Icon>

packages/ui/src/avatar.tsx

@@ -2,28 +2,38 @@
 
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { cn } from "@rallly/ui";
+import { type VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
 
+const avatarVariants = cva("relative flex shrink-0 overflow-hidden", {
+  variants: {
+    size: {
+      xl: "size-12 text-xl",
+      lg: "size-9 text-lg",
+      md: "size-7 text-base",
+      sm: "size-5 text-xs",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
 const Avatar = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & {
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> &
-    size?: number;
+    VariantProps<typeof avatarVariants>
-  }
+>(({ className, size = "md", ...props }, ref) => (
->(({ className, size = 48, ...props }, ref) => (
   <AvatarPrimitive.Root
     ref={ref}
-    className={cn(
+    className={cn(avatarVariants({ size }), className)}
-      "relative flex shrink-0 overflow-hidden rounded-full",
-      className,
-    )}
-    style={{ width: size, height: size }}
     {...props}
   />
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
 
 const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentRef<typeof AvatarPrimitive.Image>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Image
@@ -62,7 +72,7 @@ export function getGradient(seed: string): {
 }
 
 const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentRef<typeof AvatarPrimitive.Fallback>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> & {
     seed: string;
   }