feat: ui adjustments

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>
 

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",
                 }}
               />
+              {isMe && (
                 <button
                   type="button"
                   style={{ color: vars.color.body, cursor: "pointer" }}
                   onClick={() => setShowAddFriendsModal(true)}
                 >
-                <PersonAddIcon />
+                  <PersonAddIcon size={24} />
                 </button>
+              )}
             </div>
 
             <div
@@ -360,34 +362,48 @@ export function UserContent({
                 gap: `${SPACING_UNIT}px`,
               }}
             >
+              {(
+                [
+                  {
+                    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
-                className={cn(styles.friendListItem, styles.profileContentBox)}
+                    key={friend.id}
-                onClick={() => handleOnClickFriend("123abcde")}
+                    className={cn(
+                      styles.friendListItem,
+                      styles.profileContentBox
+                    )}
+                    onClick={() => handleOnClickFriend(friend.id)}
                   >
+                    <div className={styles.friendAvatarContainer}>
+                      {friend.profileImageUrl ? (
                         <img
                           className={styles.friendProfileIcon}
-                  src={
+                          src={friend.profileImageUrl}
-                    "https://cdn.discordapp.com/avatars/1239959140785455295/4aff4b901c7a9f5f814b4379b6cfd58a.webp"
+                          alt={friend.displayName}
-                  }
-                  alt={"Punheta Master 123"}
-                />
-                <h4>Punheta Master 123</h4>
-              </button>
-
-              <button
-                className={cn(styles.friendListItem, styles.profileContentBox)}
-              >
-                {userProfile.profileImageUrl ? (
-                  <img
-                    className={styles.friendProfileIcon}
-                    alt={userProfile.displayName}
-                    src={userProfile.profileImageUrl}
                         />
                       ) : (
-                  <PersonIcon size={48} />
+                        <PersonIcon size={24} />
                       )}
-                <h4>Hydra Launcher</h4>
+                    </div>
+
+                    <p className={styles.friendListDisplayName}>
+                      {friend.displayName}
+                    </p>
                   </button>
+                );
+              })}
             </div>
           </div>
         </div>

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 ? (

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

@@ -35,9 +35,10 @@ export const profileAvatarContainer = style({
   zIndex: 1,
 });
 
-export const pendingFriendRequestAvatarContainer = style({
+export const friendAvatarContainer = style({
-  width: "32px",
+  width: "35px",
-  height: "32px",
+  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)",
   },