feat: adjust ui

src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.css.ts

@@ -61,7 +61,7 @@ export const friendListButton = style({
   flexDirection: "row",
   color: vars.color.body,
   gap: `${SPACING_UNIT + SPACING_UNIT / 2}px`,
-  padding: "0 8px",
+  padding: `0 ${SPACING_UNIT}px`,
 });
 
 export const friendRequestItem = style({

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

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

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

@@ -11,6 +11,7 @@ export const wrapper = style({
 
 export const profileContentBox = style({
   display: "flex",
+  cursor: "pointer",
   gap: `${SPACING_UNIT * 3}px`,
   alignItems: "center",
   borderRadius: "4px",
@@ -192,8 +193,11 @@ export const gameListItem = style({
 });
 
 export const friendListContainer = style({
+  color: vars.color.body,
   width: "100%",
   height: "54px",
+  padding: `0 ${SPACING_UNIT}px`,
+  gap: `${SPACING_UNIT + SPACING_UNIT / 2}px`,
   transition: "all ease 0.2s",
   position: "relative",
   ":hover": {