Звонки

client-web/src/core/presentation/components/ui/Avatar.tsx

@@ -4,7 +4,7 @@ import { getInitials, generateAvatarColor } from '../../../utils/utils';
 interface AvatarProps {
   src?: string | null;
   name: string;
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
   className?: string;
   online?: boolean;
 }
@@ -15,6 +15,8 @@ const sizeClasses = {
   md: 'w-10 h-10 text-sm',
   lg: 'w-12 h-12 text-base',
   xl: 'w-20 h-20 text-xl',
+  '2xl': 'w-32 h-32 text-4xl',
+  '3xl': 'w-40 h-40 text-5xl',
 } as const;
 
 const onlineDotSize = {
@@ -23,24 +25,37 @@ const onlineDotSize = {
   md: 'w-2.5 h-2.5 border-2',
   lg: 'w-3 h-3 border-2',
   xl: 'w-4 h-4 border-2',
+  '2xl': 'w-6 h-6 border-4',
+  '3xl': 'w-8 h-8 border-4',
+} as const;
+
+const roundingClasses = {
+  xs: 'rounded-lg',
+  sm: 'rounded-xl',
+  md: 'rounded-xl',
+  lg: 'rounded-2xl',
+  xl: 'rounded-3xl',
+  '2xl': 'rounded-[1.5rem]',
+  '3xl': 'rounded-[2rem]',
 } as const;
 
 function AvatarInner({ src, name, size = 'md', className = '', online }: AvatarProps) {
   const sizeClass = sizeClasses[size];
+  const rounding = roundingClasses[size];
   const initials = getInitials(name || '?');
   const gradientClass = generateAvatarColor(name || '');
 
   return (
-    <div className={`relative shrink-0 ${className} rounded-2xl border-2 border-outline-variant/10 overflow-hidden`}>
+    <div className={`relative shrink-0 ${sizeClass} ${rounding} ${className} border-2 border-outline-variant/10 overflow-hidden shadow-inner`}>
       {src ? (
         <img
           src={src}
           alt={name}
-          className={`${sizeClass} rounded-2xl object-cover`}
+          className="w-full h-full object-cover"
         />
       ) : (
         <div
-          className={`${sizeClass} rounded-2xl ${gradientClass} flex items-center justify-center text-on-primary font-black tracking-tighter shadow-inner`}
+          className={`w-full h-full ${gradientClass} flex items-center justify-center text-on-primary font-black tracking-tighter shadow-inner`}
         >
           {initials}
         </div>

client-web/src/core/utils/utils.ts

@@ -70,7 +70,7 @@ export function getInitials(name: string): string {
 }
 
 export function generateAvatarColor(_name: string): string {
-  return 'bg-gradient-to-br from-[#3096e5] to-[#1e6fb3]';
+  return 'bg-gradient-to-br from-primary to-primary-container';
 }
 
 // Waveform cache so we don't decode the same audio twice