Update custom avatar

apps/client/src/components/layouts/global/top-menu.tsx

@@ -11,7 +11,7 @@ import { currentUserAtom } from "@/features/user/atoms/current-user-atom.ts";
 import { Link } from "react-router-dom";
 import APP_ROUTE from "@/lib/app-route.ts";
 import useAuth from "@/features/auth/hooks/use-auth.ts";
-import { UserAvatar } from "@/components/ui/user-avatar.tsx";
+import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 
 export default function TopMenu() {
   const [currentUser] = useAtom(currentUserAtom);
@@ -29,12 +29,11 @@ export default function TopMenu() {
       <Menu.Target>
         <UnstyledButton>
           <Group gap={7} wrap={"nowrap"}>
-            <UserAvatar
+            <CustomAvatar
               avatarUrl={workspace.logo}
               name={workspace.name}
-              radius="xl"
-              color="blue"
-              size={20}
+              variant="filled"
+              size="sm"
             />
             <Text fw={500} size="sm" lh={1} mr={3}>
               {workspace.name}
@@ -80,8 +79,7 @@ export default function TopMenu() {
         <Menu.Label>Account</Menu.Label>
         <Menu.Item component={Link} to={APP_ROUTE.SETTINGS.ACCOUNT.PROFILE}>
           <Group wrap={"nowrap"}>
-            <UserAvatar
-              radius="xl"
+            <CustomAvatar
               size={"sm"}
               avatarUrl={user.avatarUrl}
               name={user.name}

apps/client/src/components/ui/custom-avatar.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Avatar } from "@mantine/core";
+import { getAvatarUrl } from "@/lib/config.ts";
+
+interface CustomAvatarProps {
+  avatarUrl: string;
+  name: string;
+  color?: string;
+  size?: string | number;
+  radius?: string | number;
+  variant?: string;
+  style?: any;
+  component?: any;
+}
+
+export const CustomAvatar = React.forwardRef<
+  HTMLInputElement,
+  CustomAvatarProps
+>(({ avatarUrl, name, ...props }: CustomAvatarProps, ref) => {
+  const avatarLink = getAvatarUrl(avatarUrl);
+
+  return (
+    <Avatar
+      ref={ref}
+      src={avatarLink}
+      name={name}
+      alt={name}
+      color="initials"
+      {...props}
+    />
+  );
+});

apps/client/src/components/ui/user-avatar.tsx

@@ -1,35 +0,0 @@
-import React, { useRef } from "react";
-import { Avatar } from "@mantine/core";
-import { getAvatarUrl } from "@/lib/config.ts";
-
-interface UserAvatarProps {
-  avatarUrl: string;
-  name: string;
-  color?: string;
-  size?: string | number;
-  radius?: string | number;
-  style?: any;
-  component?: any;
-}
-
-export const UserAvatar = React.forwardRef<HTMLInputElement, UserAvatarProps>(
-  ({ avatarUrl, name, ...props }: UserAvatarProps, ref) => {
-    const avatar = getAvatarUrl(avatarUrl);
-
-    const getInitials = (name: string) => {
-      const names = name?.split(" ");
-      return names
-        ?.slice(0, 2)
-        .map((n) => n[0])
-        .join("");
-    };
-
-    return avatar ? (
-      <Avatar ref={ref} src={avatar} alt={name} radius="xl" {...props} />
-    ) : (
-      <Avatar ref={ref} {...props}>
-        {getInitials(name)}
-      </Avatar>
-    );
-  },
-);