fix(avatar): update UserAvatar sizes for consistency across components

- Changed UserAvatar size from 'xl' to 'lg' in PersonCard for better alignment with design.
- Adjusted UserAvatar size from 'sm' to 'xs' in OrderCard to ensure uniformity in avatar presentation.
- Updated sizeClasses in UserAvatar component to reflect the new 'xs' size, enhancing responsiveness.

apps/web/components/profile/person-card.tsx

@@ -21,7 +21,7 @@ export function PersonCard({ telegramId }: Readonly<ProfileProps>) {
   return (
     <Card className="bg-transparent p-4 shadow-none">
       <div className="flex flex-col items-center space-y-2">
-        <UserAvatar {...customer} size="xl" />
+        <UserAvatar {...customer} size="lg" />
         <h2 className="text-2xl font-bold">{customer?.name}</h2>
       </div>
     </Card>

apps/web/components/shared/order-card.tsx

@@ -31,7 +31,7 @@ export function OrderCard({ documentId, showDate, ...order }: Readonly<OrderComp
         )}
         <div className="flex min-w-0 flex-1 flex-col">
           <div className="flex items-center gap-4">
-            {avatarSource && <UserAvatar {...avatarSource} size="sm" />}
+            {avatarSource && <UserAvatar {...avatarSource} size="xs" />}
             <div className="flex min-w-0 flex-1 flex-col">
               <ReadonlyTimeRange
                 datetimeEnd={order?.datetime_end}

apps/web/components/shared/user-avatar.tsx

@@ -8,7 +8,7 @@ import { type CustomerFieldsFragment } from '@repo/graphql/types';
 import { cn } from '@repo/ui/lib/utils';
 import Image from 'next/image';
 
-type Sizes = 'lg' | 'md' | 'sm' | 'xl';
+type Sizes = 'lg' | 'md' | 'sm' | 'xs';
 
 type UserAvatarProps = Pick<CustomerFieldsFragment, 'telegramId'> & {
   readonly className?: string;
@@ -16,13 +16,13 @@ type UserAvatarProps = Pick<CustomerFieldsFragment, 'telegramId'> & {
 };
 
 const sizeClasses: Record<Sizes, string> = {
-  lg: 'size-28',
+  lg: 'size-32',
   md: 'size-20',
   sm: 'size-16',
-  xl: 'size-32',
+  xs: 'size-14',
 };
 
-export function UserAvatar({ className, size = 'lg', telegramId = null }: UserAvatarProps) {
+export function UserAvatar({ className, size = 'sm', telegramId = null }: UserAvatarProps) {
   const { data: { customer } = {}, isLoading } = useCustomerQuery({ telegramId });
   const { data: subscriptionData } = useSubscriptionQuery({ telegramId });
   const hasActiveSubscription = subscriptionData?.hasActiveSubscription;