fix: buttons on friend request item

src/renderer/src/pages/user/user-add-friends-modal.tsx

@@ -25,13 +25,13 @@ export const UserAddFriendsModal = ({
   const { sendFriendRequest, updateFriendRequestState, friendRequests } =
     useUserDetails();
 
-  const { showSuccessToast, showErrorToast } = useToast();
+  const { showErrorToast } = useToast();
 
   const handleClickAddFriend = () => {
     setIsAddingFriend(true);
     sendFriendRequest(friendCode)
       .then(() => {
-        showSuccessToast(t("friend_request_sent"));
+        setFriendCode("");
       })
       .catch(() => {
         showErrorToast("Não foi possível enviar o pedido de amizade");
@@ -41,133 +41,109 @@ export const UserAddFriendsModal = ({
       });
   };
 
-  const handleClickFriend = (userId: string) => {
+  const handleClickRequest = (userId: string) => {
-    //onClose();
+    resetAndClose();
-    //navigate(`/user/${userId}`);
+    navigate(`/user/${userId}`);
   };
 
   const handleClickSeeProfile = () => {
-    onClose();
+    resetAndClose();
     navigate(`/user/${friendCode}`);
   };
 
-  const handleClickCancelFriendRequest = (
+  const handleClickCancelFriendRequest = (userId: string) => {
-    event: React.MouseEvent,
+    updateFriendRequestState(userId, "CANCEL").catch(() => {
-    userId: string
+      showErrorToast("Falha ao cancelar convite");
-  ) => {
+    });
-    updateFriendRequestState(userId, "CANCEL")
-      .then(() => {
-        console.log("sucesso");
-      })
-      .catch(() => {
-        showErrorToast("Falha ao cancelar convite");
-      });
   };
 
-  const handleClickAcceptFriendRequest = (
+  const handleClickAcceptFriendRequest = (userId: string) => {
-    event: React.MouseEvent,
-    userId: string
-  ) => {
     updateFriendRequestState(userId, "ACCEPTED").catch(() => {
       showErrorToast("Falha ao aceitar convite");
     });
   };
 
-  const handleClickRefuseFriendRequest = (
+  const handleClickRefuseFriendRequest = (userId: string) => {
-    event: React.MouseEvent,
-    userId: string
-  ) => {
-    event.preventDefault();
     updateFriendRequestState(userId, "REFUSED").catch(() => {
       showErrorToast("Falha ao recusar convite");
     });
   };
 
-  const resetModal = () => {
+  const resetAndClose = () => {
     setFriendCode("");
-  };
-
-  const cleanFormAndClose = () => {
-    resetModal();
     onClose();
   };
 
   return (
-    <>
+    <Modal visible={visible} title={t("add_friends")} onClose={resetAndClose}>
-      <Modal
+      <div
-        visible={visible}
+        style={{
-        title={t("add_friends")}
+          display: "flex",
-        onClose={cleanFormAndClose}
+          width: "500px",
+          flexDirection: "column",
+          gap: `${SPACING_UNIT * 2}px`,
+        }}
       >
         <div
           style={{
             display: "flex",
-            width: "500px",
+            flexDirection: "row",
+            justifyContent: "center",
+            alignItems: "center",
+            gap: `${SPACING_UNIT}px`,
+          }}
+        >
+          <TextField
+            label={t("friend_code")}
+            value={friendCode}
+            minLength={8}
+            maxLength={8}
+            containerProps={{ style: { width: "100%" } }}
+            onChange={(e) => setFriendCode(e.target.value)}
+          />
+          <Button
+            disabled={isAddingFriend}
+            style={{ alignSelf: "end" }}
+            type="button"
+            onClick={handleClickAddFriend}
+          >
+            {isAddingFriend ? t("sending") : t("send")}
+          </Button>
+          <Button
+            onClick={handleClickSeeProfile}
+            disabled={isAddingFriend}
+            style={{ alignSelf: "end" }}
+            type="button"
+          >
+            {t("see_profile")}
+          </Button>
+        </div>
+
+        <div
+          style={{
+            display: "flex",
             flexDirection: "column",
             gap: `${SPACING_UNIT * 2}px`,
           }}
         >
-          <div
+          <h3>Pendentes</h3>
-            style={{
+          {friendRequests?.map((request) => {
-              display: "flex",
+            return (
-              flexDirection: "row",
+              <UserFriendRequest
-              justifyContent: "center",
+                key={request.id}
-              alignItems: "center",
+                displayName={request.displayName}
-              gap: `${SPACING_UNIT}px`,
+                isRequestSent={request.type === "SENT"}
-            }}
+                profileImageUrl={request.profileImageUrl}
-          >
+                userId={request.id}
-            <TextField
+                onClickAcceptRequest={handleClickAcceptFriendRequest}
-              label={t("friend_code")}
+                onClickCancelRequest={handleClickCancelFriendRequest}
-              value={friendCode}
+                onClickRefuseRequest={handleClickRefuseFriendRequest}
-              minLength={8}
+                onClickRequest={handleClickRequest}
-              maxLength={8}
+              />
-              containerProps={{ style: { width: "100%" } }}
+            );
-              onChange={(e) => setFriendCode(e.target.value)}
+          })}
-            />
-            <Button
-              disabled={isAddingFriend}
-              style={{ alignSelf: "end" }}
-              type="button"
-              onClick={handleClickAddFriend}
-            >
-              {isAddingFriend ? t("sending") : t("send")}
-            </Button>
-            <Button
-              onClick={handleClickSeeProfile}
-              disabled={isAddingFriend}
-              style={{ alignSelf: "end" }}
-              type="button"
-            >
-              {t("see_profile")}
-            </Button>
-          </div>
-
-          <div
-            style={{
-              display: "flex",
-              flexDirection: "column",
-              gap: `${SPACING_UNIT * 2}px`,
-            }}
-          >
-            <h3>Pendentes</h3>
-            {friendRequests?.map((request) => {
-              return (
-                <UserFriendRequest
-                  key={request.id}
-                  displayName={request.displayName}
-                  isRequestSent={request.type === "SENT"}
-                  profileImageUrl={request.profileImageUrl}
-                  userId={request.id}
-                  onClickAcceptRequest={handleClickAcceptFriendRequest}
-                  onClickCancelRequest={handleClickCancelFriendRequest}
-                  onClickRefuseRequest={handleClickRefuseFriendRequest}
-                  onClickRequest={handleClickFriend}
-                />
-              );
-            })}
-          </div>
         </div>
-      </Modal>
+      </div>
-    </>
+    </Modal>
   );
 };

src/renderer/src/pages/user/user-content.tsx

@@ -375,7 +375,7 @@ export function UserContent({
                     <button
                       key={friend.id}
                       className={cn(
-                        styles.friendListItem,
+                        styles.friendListContainer,
                         styles.profileContentBox
                       )}
                       onClick={() => handleOnClickFriend(friend.id)}

src/renderer/src/pages/user/user-friend-request.tsx

@@ -11,9 +11,9 @@ export interface UserFriendRequestProps {
   profileImageUrl: string | null;
   displayName: string;
   isRequestSent: boolean;
-  onClickCancelRequest: (event: React.MouseEvent, userId: string) => void;
+  onClickCancelRequest: (userId: string) => void;
-  onClickAcceptRequest: (event: React.MouseEvent, userId: string) => void;
+  onClickAcceptRequest: (userId: string) => void;
-  onClickRefuseRequest: (event: React.MouseEvent, userId: string) => void;
+  onClickRefuseRequest: (userId: string) => void;
   onClickRequest: (userId: string) => void;
 }
 
@@ -28,57 +28,62 @@ export const UserFriendRequest = ({
   onClickRequest,
 }: UserFriendRequestProps) => {
   return (
-    <button
+    <div className={cn(styles.friendListContainer, styles.profileContentBox)}>
-      type="button"
+      <button
-      className={cn(styles.friendListItem, styles.profileContentBox)}
+        type="button"
-      onClick={() => onClickRequest(userId)}
+        className={styles.friendListButton}
-    >
+        onClick={() => onClickRequest(userId)}
-      <div className={styles.friendAvatarContainer}>
-        {profileImageUrl ? (
-          <img
-            className={styles.profileAvatar}
-            alt={displayName}
-            src={profileImageUrl}
-          />
-        ) : (
-          <PersonIcon size={24} />
-        )}
-      </div>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "flex-start",
-          flex: "1",
-          minWidth: 0,
-        }}
       >
-        <p className={styles.friendListDisplayName}>{displayName}</p>
+        <div className={styles.friendAvatarContainer}>
-        <small>{isRequestSent ? "Pedido enviado" : "Pedido recebido"}</small>
+          {profileImageUrl ? (
-      </div>
+            <img
-      {isRequestSent ? (
+              className={styles.profileAvatar}
-        <button
+              alt={displayName}
-          className={styles.cancelRequestButton}
+              src={profileImageUrl}
-          onClick={(e) => onClickCancelRequest(e, userId)}
+            />
+          ) : (
+            <PersonIcon size={24} />
+          )}
+        </div>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            flex: "1",
+            minWidth: 0,
+          }}
         >
-          <XCircleIcon size={28} />
+          <p className={styles.friendListDisplayName}>{displayName}</p>
-        </button>
+          <small>{isRequestSent ? "Pedido enviado" : "Pedido recebido"}</small>
-      ) : (
+        </div>
-        <>
+      </button>
-          <button
+
-            className={styles.acceptRequestButton}
+      <div style={{ position: "absolute", right: "8px" }}>
-            onClick={(e) => onClickAcceptRequest(e, userId)}
+        {isRequestSent ? (
-          >
-            <CheckCircleIcon size={28} />
-          </button>
           <button
             className={styles.cancelRequestButton}
-            onClick={(e) => onClickRefuseRequest(e, userId)}
+            onClick={() => onClickCancelRequest(userId)}
           >
             <XCircleIcon size={28} />
           </button>
-        </>
+        ) : (
-      )}
+          <>
-    </button>
+            <button
+              className={styles.acceptRequestButton}
+              onClick={() => onClickAcceptRequest(userId)}
+            >
+              <CheckCircleIcon size={28} />
+            </button>
+            <button
+              className={styles.cancelRequestButton}
+              onClick={() => onClickRefuseRequest(userId)}
+            >
+              <XCircleIcon size={28} />
+            </button>
+          </>
+        )}
+      </div>
+    </div>
   );
 };

src/renderer/src/pages/user/user.css.ts

@@ -178,21 +178,29 @@ export const gameListItem = style({
   },
 });
 
-export const friendListItem = style({
+export const friendListContainer = style({
-  color: vars.color.body,
-  display: "flex",
-  flexDirection: "row",
-  gap: `${SPACING_UNIT + SPACING_UNIT / 2}px`,
   width: "100%",
   height: "54px",
-  padding: "0 8px",
   transition: "all ease 0.2s",
-  cursor: "pointer",
+  position: "relative",
   ":hover": {
     backgroundColor: "rgba(255, 255, 255, 0.15)",
   },
 });
 
+export const friendListButton = style({
+  display: "flex",
+  alignItems: "center",
+  position: "absolute",
+  cursor: "pointer",
+  height: "100%",
+  width: "100%",
+  flexDirection: "row",
+  color: vars.color.body,
+  gap: `${SPACING_UNIT + SPACING_UNIT / 2}px`,
+  padding: "0 8px",
+});
+
 export const gameInformation = style({
   display: "flex",
   flexDirection: "column",