Update custom avatar

apps/client/src/features/space/components/multi-member-select.tsx

@@ -3,7 +3,7 @@ import { useDebouncedValue } from "@mantine/hooks";
 import { Group, MultiSelect, MultiSelectProps, Text } from "@mantine/core";
 import { IGroup } from "@/features/group/types/group.types.ts";
 import { useSearchSuggestionsQuery } from "@/features/search/queries/search-query.ts";
-import { UserAvatar } from "@/components/ui/user-avatar.tsx";
+import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import { IUser } from "@/features/user/types/user.types.ts";
 import { IconGroupCircle } from "@/components/icons/icon-people-circle.tsx";
 
@@ -16,7 +16,7 @@ const renderMultiSelectOption: MultiSelectProps["renderOption"] = ({
 }) => (
   <Group gap="sm">
     {option["type"] === "user" && (
-      <UserAvatar
+      <CustomAvatar
         avatarUrl={option["avatarUrl"]}
         size={20}
         name={option.label}

apps/client/src/features/space/components/space-grid.tsx

@@ -20,9 +20,13 @@ export default function SpaceGrid() {
       withBorder
     >
       <Card.Section className={classes.cardSection} h={40}></Card.Section>
-      <Avatar variant="filled" size="md" mt={rem(-20)}>
-        {space.name.charAt(0).toUpperCase()}
-      </Avatar>
+      <Avatar
+        name={space.name}
+        color="initials"
+        variant="filled"
+        size="md"
+        mt={rem(-20)}
+      />
 
       <Text fz="md" fw={500} mt="xs" className={classes.title}>
         {space.name}

apps/client/src/features/space/components/space-list.tsx

@@ -34,9 +34,11 @@ export default function SpaceList() {
               >
                 <Table.Td>
                   <Group gap="sm">
-                    <Avatar color="gray" radius="xl">
-                      {space.name.charAt(0).toUpperCase()}
-                    </Avatar>
+                    <Avatar
+                      color="initials"
+                      variant="filled"
+                      name={space.name}
+                    />
                     <div>
                       <Text fz="sm" fw={500}>
                         {space.name}

apps/client/src/features/space/components/space-members.tsx

@@ -3,7 +3,7 @@ import { useParams } from "react-router-dom";
 import React from "react";
 import { IconDots } from "@tabler/icons-react";
 import { modals } from "@mantine/modals";
-import { UserAvatar } from "@/components/ui/user-avatar.tsx";
+import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import {
   useChangeSpaceMemberRoleMutation,
   useRemoveSpaceMemberMutation,
@@ -109,7 +109,7 @@ export default function SpaceMembersList({
                 <Table.Td>
                   <Group gap="sm">
                     {member.type === "user" && (
-                      <UserAvatar
+                      <CustomAvatar
                         avatarUrl={member?.avatarUrl}
                         name={member.name}
                       />