From 4139aa918d9a894173290952ce3560cf18fd1b44 Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Wed, 10 Sep 2025 17:30:40 +0300
Subject: [PATCH] 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 | 2 +-
 apps/web/components/shared/order-card.tsx   | 2 +-
 apps/web/components/shared/user-avatar.tsx  | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/web/components/profile/person-card.tsx b/apps/web/components/profile/person-card.tsx
index a54053d..f495f1b 100644
--- a/apps/web/components/profile/person-card.tsx
+++ b/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>
diff --git a/apps/web/components/shared/order-card.tsx b/apps/web/components/shared/order-card.tsx
index 1e9e3bf..31821fd 100644
--- a/apps/web/components/shared/order-card.tsx
+++ b/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}
diff --git a/apps/web/components/shared/user-avatar.tsx b/apps/web/components/shared/user-avatar.tsx
index 761dec5..524b718 100644
--- a/apps/web/components/shared/user-avatar.tsx
+++ b/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;