From a827803c8278442ea108bedec746bcd7913516b7 Mon Sep 17 00:00:00 2001
From: Italo A <italoaurelior@gmail.com>
Date: Sun, 29 Oct 2023 02:15:34 +0000
Subject: [PATCH 1/2] wip: user info avatar

---
 frontend/src/components/UserInfo/index.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/UserInfo/index.tsx b/frontend/src/components/UserInfo/index.tsx
index 810b6a45..f4085dd9 100644
--- a/frontend/src/components/UserInfo/index.tsx
+++ b/frontend/src/components/UserInfo/index.tsx
@@ -11,11 +11,18 @@ export function UserInfo() {
     <div className="flex justify-between items-center">
       <div className="flex items-center space-x-3">
         <div>
-          <img
-            src={user.avatar}
-            alt="Avatar"
-            className="rounded-full w-14 h-14"
-          />
+          {user.avatar ? (
+            <img
+              src={`${user.avatar}`}
+              width={40}
+              height={40}
+              className="rounded-full mr-3"
+            />
+          ) : (
+            <div className="rounded-full mr-3 bg-purple42-200 w-10 h-10 flex justify-center items-center">
+              <span className="text-white text-2xl">todo</span>
+            </div>
+          )}
         </div>
         <div className="text-white">
           <div className="text-lg">{user.displayName}</div>{" "}

From 55522f17c5860bc72ecf51e80d184c9a97501bcf Mon Sep 17 00:00:00 2001
From: Italo A <italoaurelior@gmail.com>
Date: Mon, 30 Oct 2023 00:07:49 +0000
Subject: [PATCH 2/2] feat: create a component for user avatar

---
 .../src/components/LeaderBoardCard/index.tsx  | 17 +++---------
 frontend/src/components/Sidebar/index.tsx     |  7 ++++-
 frontend/src/components/UserAvatar/index.tsx  | 27 +++++++++++++++++++
 frontend/src/components/UserInfo/index.tsx    | 14 ++--------
 4 files changed, 38 insertions(+), 27 deletions(-)
 create mode 100644 frontend/src/components/UserAvatar/index.tsx

diff --git a/frontend/src/components/LeaderBoardCard/index.tsx b/frontend/src/components/LeaderBoardCard/index.tsx
index 04ae66cd..5cecd7f9 100644
--- a/frontend/src/components/LeaderBoardCard/index.tsx
+++ b/frontend/src/components/LeaderBoardCard/index.tsx
@@ -2,6 +2,7 @@
 import { Trophy, UserPlus } from "@phosphor-icons/react";
 import { StatusTag } from "../StatusTag";
 import ProfilePopOver from "../ProfilePopOver";
+import UserAvatar from "../UserAvatar";
 
 type LeaderBoardCardProps = {
   name: string;
@@ -20,20 +21,8 @@ export function LeaderBoardCard({
     <div className="flex flex-row justify-between items-center py-3 bg-black42-200 p-4 rounded-lg w-full">
       <ProfilePopOver name={name} score={score}>
         <div className="flex flex-row justify-between items-center">
-          {avatar ? (
-            <img
-              src={`${avatar}`}
-              width={40}
-              height={40}
-              className="rounded-full mr-3"
-            />
-          ) : (
-            <div className="rounded-full mr-3 bg-purple42-200 w-10 h-10 flex justify-center items-center">
-              <span className="text-white text-2xl">{name[0]}</span>
-            </div>
-          )}
-
-          <div className="text-white text-lg mr-3">{name}</div>
+          <UserAvatar imageUrl={avatar} login={name} />
+          <div className="text-white text-lg mx-3">{name}</div>
           <StatusTag status="offline" />
         </div>
       </ProfilePopOver>
diff --git a/frontend/src/components/Sidebar/index.tsx b/frontend/src/components/Sidebar/index.tsx
index 7cc9ba17..46f067c8 100644
--- a/frontend/src/components/Sidebar/index.tsx
+++ b/frontend/src/components/Sidebar/index.tsx
@@ -2,8 +2,13 @@
 import { Play, SignOut, Trophy } from "@phosphor-icons/react";
 import Image from "next/image";
 import Link from "next/link";
+import UserAvatar from "../UserAvatar";
+import { AuthContext } from "@/contexts/AuthContext";
+import { useContext } from "react";
 
 export default function Sidebar() {
+  const { user } = useContext(AuthContext);
+
   return (
     <div className="flex flex-col h-screen max-wd-[93] bg-black42-300">
       <div className="flex flex-col flex-1 justify-between items-center">
@@ -38,7 +43,7 @@ export default function Sidebar() {
         </div>
         <ul className="flex flex-col space-y-5 items-center justify-center pb-4">
           <li>
-            <img src="https://bigheads.io/svg" width={48} height={48} />
+            <UserAvatar imageUrl={user.avatar} login={user.displayName} />
           </li>
           <li>
             <Link
diff --git a/frontend/src/components/UserAvatar/index.tsx b/frontend/src/components/UserAvatar/index.tsx
new file mode 100644
index 00000000..97cd501b
--- /dev/null
+++ b/frontend/src/components/UserAvatar/index.tsx
@@ -0,0 +1,27 @@
+type UserAvatarProps = {
+  imageUrl: string;
+  login: string;
+};
+
+export default function UserAvatar({ imageUrl, login }: UserAvatarProps) {
+  if (imageUrl) {
+    // TODO: change to next/image when all urls comes from our server
+    return (
+      <img
+        src={`${imageUrl}`}
+        alt="avatar"
+        width={40}
+        height={40}
+        className="rounded-full"
+      />
+    );
+  }
+
+  return (
+    <div className="rounded-full bg-purple42-200 w-10 h-10 flex justify-center items-center">
+      <span className="text-white text-2xl">
+        {login && login[0].toLocaleUpperCase()}
+      </span>
+    </div>
+  );
+}
diff --git a/frontend/src/components/UserInfo/index.tsx b/frontend/src/components/UserInfo/index.tsx
index f4085dd9..1d5a8330 100644
--- a/frontend/src/components/UserInfo/index.tsx
+++ b/frontend/src/components/UserInfo/index.tsx
@@ -4,6 +4,7 @@ import MFAModal from "../MFAModal";
 import { useContext } from "react";
 import { AuthContext } from "@/contexts/AuthContext";
 import EditUserModal from "../EditUserModal";
+import UserAvatar from "../UserAvatar";
 
 export function UserInfo() {
   const { user } = useContext(AuthContext);
@@ -11,18 +12,7 @@ export function UserInfo() {
     <div className="flex justify-between items-center">
       <div className="flex items-center space-x-3">
         <div>
-          {user.avatar ? (
-            <img
-              src={`${user.avatar}`}
-              width={40}
-              height={40}
-              className="rounded-full mr-3"
-            />
-          ) : (
-            <div className="rounded-full mr-3 bg-purple42-200 w-10 h-10 flex justify-center items-center">
-              <span className="text-white text-2xl">todo</span>
-            </div>
-          )}
+          <UserAvatar imageUrl={user.avatar} login={user.displayName} />
         </div>
         <div className="text-white">
           <div className="text-lg">{user.displayName}</div>{" "}