From 42e22ee48197eb23952e10bf7aa52740f90db26b Mon Sep 17 00:00:00 2001
From: Italo A <italoaurelior@gmail.com>
Date: Sun, 26 Nov 2023 22:41:37 -0300
Subject: [PATCH 1/2] refactor: remove not user isFriend property

---
 frontend/src/components/LeaderBoard/index.tsx    |  7 +------
 .../src/components/LeaderBoardCard/index.tsx     | 16 +++-------------
 2 files changed, 4 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/LeaderBoard/index.tsx b/frontend/src/components/LeaderBoard/index.tsx
index 073bde56..d92c42ff 100644
--- a/frontend/src/components/LeaderBoard/index.tsx
+++ b/frontend/src/components/LeaderBoard/index.tsx
@@ -25,12 +25,7 @@ export function LeaderBoard() {
       ) : (
         <>
           {data?.map((user: User) => (
-            <LeaderBoardCard
-              key={user.id}
-              score={user.victory}
-              isFriend={user.login.includes("m")}
-              user={user}
-            />
+            <LeaderBoardCard key={user.id} score={user.victory} user={user} />
           ))}
         </>
       )}
diff --git a/frontend/src/components/LeaderBoardCard/index.tsx b/frontend/src/components/LeaderBoardCard/index.tsx
index 01841cb4..e8b69e98 100644
--- a/frontend/src/components/LeaderBoardCard/index.tsx
+++ b/frontend/src/components/LeaderBoardCard/index.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { Trophy, UserPlus } from "@phosphor-icons/react";
+import { Trophy } from "@phosphor-icons/react";
 import { StatusTag } from "../StatusTag";
 import ProfilePopOver from "../ProfilePopOver";
 import UserAvatar from "../UserAvatar";
@@ -7,15 +7,10 @@ import { User } from "@/types/user";
 
 type LeaderBoardCardProps = {
   score: number;
-  isFriend: boolean;
   user: User;
 };
 
-export function LeaderBoardCard({
-  score,
-  isFriend,
-  user,
-}: LeaderBoardCardProps) {
+export function LeaderBoardCard({ score, user }: LeaderBoardCardProps) {
   return (
     <div className="flex flex-row justify-between items-center py-3 bg-black42-200 p-4 rounded-lg w-full">
       <ProfilePopOver name={user.login} score={score} id={user.id}>
@@ -27,14 +22,9 @@ export function LeaderBoardCard({
       </ProfilePopOver>
       <div className="flex flex-row justify-between items-center space-x-4">
         <div className="flex flex-row justify-start items-center w-[50px]">
-          <Trophy className="text-purple42-200 mr-2" size={24} />
+          <Trophy className="text-yellow-600 mr-2" size={24} />
           <span className="text-xl text-white">{score}</span>
         </div>
-        <div>
-          {isFriend && (
-            <UserPlus className="text-purple42-200 cursor-pointer" size={24} />
-          )}
-        </div>
       </div>
     </div>
   );

From f90c5c86134e2e0c4b8280a2eb9bc07318781a87 Mon Sep 17 00:00:00 2001
From: Italo A <italoaurelior@gmail.com>
Date: Sun, 26 Nov 2023 22:41:49 -0300
Subject: [PATCH 2/2] feat: add buttons and remove bio description

---
 .../src/components/ProfilePopOver/index.tsx   | 60 ++++++++-----------
 1 file changed, 26 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/ProfilePopOver/index.tsx b/frontend/src/components/ProfilePopOver/index.tsx
index 6fd91335..166f2df6 100644
--- a/frontend/src/components/ProfilePopOver/index.tsx
+++ b/frontend/src/components/ProfilePopOver/index.tsx
@@ -1,6 +1,7 @@
 import { api } from "@/services/apiClient";
 import { queryClient } from "@/services/queryClient";
 import { Popover } from "@headlessui/react";
+import { ListNumbers, Play, UserPlus } from "@phosphor-icons/react";
 import { useMutation } from "@tanstack/react-query";
 import Link from "next/link";
 import { useState } from "react";
@@ -60,46 +61,37 @@ export default function ProfilePopOver({
       >
         <div className="p-3">
           <div className="flex items-center space-x-4 mb-4">
-            <button
-              type="button"
-              className="text-white bg-purple42-200 hover:bg-purple42-300 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5 focus:outline-none "
+            <UserPlus
+              color="white"
+              className="text-white font-bold rounded-lg bg-purple42-200 transition-all hover:bg-purple42-300
+                    flex items-center justify-center w-9 h-9 p-2 cursor-pointer"
+              size={14}
               onClick={handleAddFriend}
-            >
-              Add amigo
-            </button>
-            <button
-              type="button"
-              className="text-white bg-purple42-200 hover:bg-purple42-300 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5 focus:outline-none "
-            >
-              Jogar
-            </button>
-            <Link href={`/game/history/${id}`} passHref>
-              <button
-                type="button"
-                className="text-white bg-purple42-200 hover:bg-purple42-300 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5 focus:outline-none "
-              >
-                Histórico
-              </button>
+              alt="Adicionar amigo"
+            />
+            <Play
+              color="white"
+              className="text-white font-bold rounded-lg bg-purple42-200 transition-all hover:bg-purple42-300
+                    flex items-center justify-center w-9 h-9 p-2 cursor-pointer"
+              size={14}
+              onClick={() => console.log("jogar")}
+              alt="Jogar"
+            />
+
+            <Link href={`/game/history/${id}`} passHref title="Histórico">
+              <ListNumbers
+                color="white"
+                className="text-white font-bold rounded-lg bg-purple42-200 transition-all hover:bg-purple42-300
+                      flex items-center justify-center w-9 h-9 p-2 cursor-pointer"
+                size={14}
+              />
             </Link>
           </div>
           <p className="text-base font-semibold leading-none text-white">
             <a href="#">{name}</a>
           </p>
-          <p className="mb-3 text-sm font-normal text-white">
-            <a href="#" className="hover:underline">
-              @{name}
-            </a>
-          </p>
-          <p className="mb-4 text-sm text-white">
-            Open-source contributor. Building{" "}
-            <a
-              href="#"
-              className="text-blue-600 dark:text-blue-500 hover:underline"
-            >
-              {name}@42org.br
-            </a>
-          </p>
-          <ul className="flex text-sm">
+
+          <ul className="flex text-sm mt-2">
             <li className="mr-2">
               <a href="#" className=" text-white">
                 <span className="font-semibold mr-2">{score}</span>