From 0f0a1e98a36306d1307af0efd40c952cc16d5b37 Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Wed, 10 Jul 2024 17:32:32 -0300
Subject: [PATCH] feat: ui adjustments

---
 .../components/sidebar/sidebar-profile.tsx    |  3 +-
 src/renderer/src/pages/user/user-content.tsx  | 86 +++++++++++--------
 .../user/user-friend-pending-request.tsx      |  9 +-
 src/renderer/src/pages/user/user.css.ts       | 24 ++++--
 4 files changed, 70 insertions(+), 52 deletions(-)

diff --git a/src/renderer/src/components/sidebar/sidebar-profile.tsx b/src/renderer/src/components/sidebar/sidebar-profile.tsx
index 914481b0..432ab9f0 100644
--- a/src/renderer/src/components/sidebar/sidebar-profile.tsx
+++ b/src/renderer/src/components/sidebar/sidebar-profile.tsx
@@ -40,12 +40,11 @@ export function SidebarProfile() {
         <div className={styles.profileAvatar}>
           {userDetails?.profileImageUrl ? (
             <img
-              className={styles.profileAvatar}
               src={userDetails.profileImageUrl}
               alt={userDetails.displayName}
             />
           ) : (
-            <PersonIcon />
+            <PersonIcon size={24} />
           )}
         </div>
 
diff --git a/src/renderer/src/pages/user/user-content.tsx b/src/renderer/src/pages/user/user-content.tsx
index 9d9b9415..aca7cc60 100644
--- a/src/renderer/src/pages/user/user-content.tsx
+++ b/src/renderer/src/pages/user/user-content.tsx
@@ -1,4 +1,4 @@
-import { UserGame, UserProfile } from "@types";
+import { UserFriend, UserGame, UserProfile } from "@types";
 import cn from "classnames";
 
 import * as styles from "./user.css";
@@ -344,13 +344,15 @@ export function UserContent({
                   height: "1px",
                 }}
               />
-              <button
-                type="button"
-                style={{ color: vars.color.body, cursor: "pointer" }}
-                onClick={() => setShowAddFriendsModal(true)}
-              >
-                <PersonAddIcon />
-              </button>
+              {isMe && (
+                <button
+                  type="button"
+                  style={{ color: vars.color.body, cursor: "pointer" }}
+                  onClick={() => setShowAddFriendsModal(true)}
+                >
+                  <PersonAddIcon size={24} />
+                </button>
+              )}
             </div>
 
             <div
@@ -360,34 +362,48 @@ export function UserContent({
                 gap: `${SPACING_UNIT}px`,
               }}
             >
-              <button
-                className={cn(styles.friendListItem, styles.profileContentBox)}
-                onClick={() => handleOnClickFriend("123abcde")}
-              >
-                <img
-                  className={styles.friendProfileIcon}
-                  src={
-                    "https://cdn.discordapp.com/avatars/1239959140785455295/4aff4b901c7a9f5f814b4379b6cfd58a.webp"
-                  }
-                  alt={"Punheta Master 123"}
-                />
-                <h4>Punheta Master 123</h4>
-              </button>
+              {(
+                [
+                  {
+                    id: "",
+                    displayName: "Punheta Master 123123123123123123",
+                    profileImageUrl:
+                      "https://cdn.discordapp.com/avatars/1239959140785455295/4aff4b901c7a9f5f814b4379b6cfd58a.webp",
+                  },
+                  {
+                    id: "",
+                    displayName: "Hydra Launcher",
+                    profileImageUrl: null,
+                  },
+                ] as UserFriend[]
+              ).map((friend) => {
+                return (
+                  <button
+                    key={friend.id}
+                    className={cn(
+                      styles.friendListItem,
+                      styles.profileContentBox
+                    )}
+                    onClick={() => handleOnClickFriend(friend.id)}
+                  >
+                    <div className={styles.friendAvatarContainer}>
+                      {friend.profileImageUrl ? (
+                        <img
+                          className={styles.friendProfileIcon}
+                          src={friend.profileImageUrl}
+                          alt={friend.displayName}
+                        />
+                      ) : (
+                        <PersonIcon size={24} />
+                      )}
+                    </div>
 
-              <button
-                className={cn(styles.friendListItem, styles.profileContentBox)}
-              >
-                {userProfile.profileImageUrl ? (
-                  <img
-                    className={styles.friendProfileIcon}
-                    alt={userProfile.displayName}
-                    src={userProfile.profileImageUrl}
-                  />
-                ) : (
-                  <PersonIcon size={48} />
-                )}
-                <h4>Hydra Launcher</h4>
-              </button>
+                    <p className={styles.friendListDisplayName}>
+                      {friend.displayName}
+                    </p>
+                  </button>
+                );
+              })}
             </div>
           </div>
         </div>
diff --git a/src/renderer/src/pages/user/user-friend-pending-request.tsx b/src/renderer/src/pages/user/user-friend-pending-request.tsx
index c21f41aa..99fcb2f7 100644
--- a/src/renderer/src/pages/user/user-friend-pending-request.tsx
+++ b/src/renderer/src/pages/user/user-friend-pending-request.tsx
@@ -3,7 +3,6 @@ import {
   PersonIcon,
   XCircleIcon,
 } from "@primer/octicons-react";
-import { SPACING_UNIT } from "@renderer/theme.css";
 import * as styles from "./user.css";
 import cn from "classnames";
 
@@ -33,11 +32,8 @@ export const UserFriendPendingRequest = ({
       type="button"
       className={cn(styles.friendListItem, styles.profileContentBox)}
       onClick={() => onClickRequest(userId)}
-      style={{
-        padding: "8px",
-      }}
     >
-      <div className={styles.pendingFriendRequestAvatarContainer}>
+      <div className={styles.friendAvatarContainer}>
         {profileImageUrl ? (
           <img
             className={styles.profileAvatar}
@@ -55,10 +51,9 @@ export const UserFriendPendingRequest = ({
           alignItems: "flex-start",
           flex: "1",
           minWidth: 0,
-          gap: `${SPACING_UNIT / 2}px`,
         }}
       >
-        <h4>{displayName}</h4>
+        <p className={styles.friendListDisplayName}>{displayName}</p>
         <small>{isRequestSent ? "Pedido enviado" : "Pedido recebido"}</small>
       </div>
       {isRequestSent ? (
diff --git a/src/renderer/src/pages/user/user.css.ts b/src/renderer/src/pages/user/user.css.ts
index 1582af29..19da3caf 100644
--- a/src/renderer/src/pages/user/user.css.ts
+++ b/src/renderer/src/pages/user/user.css.ts
@@ -35,9 +35,10 @@ export const profileAvatarContainer = style({
   zIndex: 1,
 });
 
-export const pendingFriendRequestAvatarContainer = style({
-  width: "32px",
-  height: "32px",
+export const friendAvatarContainer = style({
+  width: "35px",
+  minWidth: "35px",
+  height: "35px",
   borderRadius: "50%",
   display: "flex",
   justifyContent: "center",
@@ -46,7 +47,15 @@ export const pendingFriendRequestAvatarContainer = style({
   overflow: "hidden",
   border: `solid 1px ${vars.color.border}`,
   boxShadow: "0px 0px 5px 0px rgba(0, 0, 0, 0.7)",
-  zIndex: 1,
+});
+
+export const friendListDisplayName = style({
+  fontWeight: "bold",
+  fontSize: vars.size.body,
+  textAlign: "left",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
 });
 
 export const profileAvatarEditContainer = style({
@@ -173,13 +182,12 @@ export const friendListItem = style({
   color: vars.color.body,
   display: "flex",
   flexDirection: "row",
-  gap: `${SPACING_UNIT}px`,
+  gap: `${SPACING_UNIT + SPACING_UNIT / 2}px`,
   width: "100%",
-  height: "48px",
+  height: "54px",
+  padding: "0 8px",
   transition: "all ease 0.2s",
   cursor: "pointer",
-  zIndex: "1",
-  overflow: "hidden",
   ":hover": {
     backgroundColor: "rgba(255, 255, 255, 0.15)",
   },