Working profile system

src/components/MessageBox.tsx

@@ -44,16 +44,17 @@ function MessageContainer({
       <div className="flex gap-2">
         {/* <div className="w-8 h-8 rounded-full bg-gray-400" /> */}
         <ProfilePicture
+          url={userList[message.from]?.avatar_url}
           name={String(
             userList[message.from]
-              ? userList[message.from].username
+              ? userList[message.from].display_name
               : message.from
           )}
         />
         <div className="flex flex-col flex-1">
           <span className="font-bold flex gap-1 items-center">
             {userList[message.from]
-              ? userList[message.from].username
+              ? userList[message.from].display_name
               : message.from}
 
             <p className="text-neutral-500 text-xs">

src/components/ProfilePicture.tsx

@@ -1,9 +1,15 @@
 import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 
-export default function ProfilePicture({ name }: { name: string }) {
+export default function ProfilePicture({
+  name,
+  url,
+}: {
+  name: string;
+  url: string;
+}) {
   return (
     <Avatar className="h-8 w-8">
-      <AvatarImage src="https://github.com/kleo-dev.png" alt={name} />
+      <AvatarImage src={url} alt={name} />
       <AvatarFallback>{name[0]}</AvatarFallback>
     </Avatar>
   );

src/components/auth/Login.tsx

@@ -56,7 +56,7 @@ export default function Login() {
       </CardHeader>
       <CardContent className="gap-3 flex flex-col">
         <span>
-          Username or email
+          Email
           <Input onChange={(e) => setUsername(e.target.value)} type="email" />
         </span>
         <span>