refactor: update UserAvatar component to use 'label' prop instead of 'email'

- Changed the UserAvatar component to accept a 'label' prop for displaying user information, enhancing clarity in the codebase.
- Updated instances of UserAvatar across member and API keys table rows to reflect this change, ensuring consistency in the usage of the component.
- Removed the TeamAvatar component in favor of UserAvatar for better uniformity in the dashboard's UI.

These changes aim to improve the maintainability and readability of the code related to user avatars.

Author: sarimrmalik

src/features/dashboard/members/member-table-row.tsx

@@ -257,7 +257,7 @@ const AddedCell = ({
       ) : (
         <UserAvatar
           url={addedByMember?.info.avatar_url}
-          email={addedByMember?.info.email}
+          label={addedByMember?.info.email}
         />
       )}
       {showRemove ? (

src/features/dashboard/settings/keys/api-keys-table-row.tsx

@@ -123,7 +123,7 @@ export const ApiKeysTableRow = ({ apiKey, onDelete }: ApiKeysTableRowProps) => {
               <Tooltip>
                 <TooltipTrigger asChild>
                   <span className="cursor-default shrink-0">
-                    <UserAvatar email={createdByEmail} />
+                    <UserAvatar label={createdByEmail} />
                   </span>
                 </TooltipTrigger>
                 <TooltipContent side="top">{createdByEmail}</TooltipContent>

src/features/dashboard/settings/webhooks/table-row.tsx

@@ -20,7 +20,7 @@ import {
 } from '@/ui/primitives/icons'
 import { TableCell, TableRow } from '@/ui/primitives/table'
 import { useDashboard } from '../../context'
-import { TeamAvatar } from '../../sidebar/team-avatar'
+import { UserAvatar } from '../../shared'
 import { WEBHOOK_EVENT_LABELS, WEBHOOK_EVENTS } from './constants'
 import WebhookDeleteDialog from './delete-dialog'
 import WebhookEditSecretDialog from './edit-secret-dialog'
@@ -135,13 +135,7 @@ export const WebhookTableRow = ({ webhook, className }: WebhookRowProps) => {
           <p className="w-[92px] text-left text-fg-tertiary prose-body">
             {createdAt}
           </p>
-          <TeamAvatar
-            team={team}
-            classNames={{
-              root: 'size-5 shrink-0 border border-white/10',
-              image: 'size-full',
-            }}
-          />
+          <UserAvatar label={team.name} />
         </div>
       </TableCell>
 

src/features/dashboard/shared/user-avatar.tsx

@@ -4,16 +4,16 @@ import { cn } from '@/lib/utils'
 import { Avatar, AvatarFallback, AvatarImage } from '@/ui/primitives/avatar'
 
 interface UserAvatarProps {
-  email?: string | null
+  label?: string | null
   url?: string | null
   className?: string
 }
 
-export const UserAvatar = ({ email, url, className }: UserAvatarProps) => (
+export const UserAvatar = ({ label, url, className }: UserAvatarProps) => (
   <Avatar className={cn('border-stroke size-5 shrink-0 border', className)}>
     <AvatarImage referrerPolicy="no-referrer" src={url ?? undefined} />
     <AvatarFallback className="bg-bg text-[10px] font-bold uppercase">
-      {email?.charAt(0).toUpperCase() ?? '?'}
+      {label?.charAt(0).toUpperCase() ?? '?'}
     </AvatarFallback>
   </Avatar>
 )