From 3293320926e74a867a39188231604840c0f0c3aa Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Mon, 26 Aug 2024 13:21:21 -0300
Subject: [PATCH] fix: sidebar profile layout

---
 .../components/sidebar/sidebar-profile.css.ts | 20 +++++---------
 .../components/sidebar/sidebar-profile.tsx    | 27 ++++++++++---------
 2 files changed, 20 insertions(+), 27 deletions(-)

diff --git a/src/renderer/src/components/sidebar/sidebar-profile.css.ts b/src/renderer/src/components/sidebar/sidebar-profile.css.ts
index ba29c850..d97b0c44 100644
--- a/src/renderer/src/components/sidebar/sidebar-profile.css.ts
+++ b/src/renderer/src/components/sidebar/sidebar-profile.css.ts
@@ -7,22 +7,24 @@ export const profileContainerBackground = createVar();
 export const profileContainer = style({
   background: profileContainerBackground,
   position: "relative",
+  display: "flex",
+  gap: `${SPACING_UNIT}px`,
   cursor: "pointer",
   ":hover": {
     backgroundColor: "rgba(255, 255, 255, 0.15)",
   },
+  borderBottom: `solid 1px ${vars.color.border}`,
+  boxShadow: "0px 0px 15px 0px rgb(0 0 0 / 70%)",
+  padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
 });
 
 export const profileButton = style({
   display: "flex",
   cursor: "pointer",
   transition: "all ease 0.1s",
-  padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
   color: vars.color.muted,
-  borderBottom: `solid 1px ${vars.color.border}`,
-  boxShadow: "0px 0px 15px 0px rgb(0 0 0 / 70%)",
   width: "100%",
-  zIndex: "10",
+  overflow: "hidden",
 });
 
 export const profileButtonContent = style({
@@ -75,16 +77,6 @@ export const profileButtonTitle = style({
   whiteSpace: "nowrap",
 });
 
-export const friendRequestContainer = style({
-  position: "absolute",
-  padding: "8px",
-  right: `${SPACING_UNIT}px`,
-  display: "flex",
-  top: 0,
-  bottom: 0,
-  alignItems: "center",
-});
-
 export const friendRequestButton = style({
   color: vars.color.success,
   cursor: "pointer",
diff --git a/src/renderer/src/components/sidebar/sidebar-profile.tsx b/src/renderer/src/components/sidebar/sidebar-profile.tsx
index 069831cb..e41d7da2 100644
--- a/src/renderer/src/components/sidebar/sidebar-profile.tsx
+++ b/src/renderer/src/components/sidebar/sidebar-profile.tsx
@@ -41,6 +41,9 @@ export function SidebarProfile() {
     return undefined;
   }, [profileBackground]);
 
+  const showPendingRequests =
+    userDetails && receivedRequests.length > -1 && !gameRunning;
+
   return (
     <div
       className={styles.profileContainer}
@@ -88,19 +91,17 @@ export function SidebarProfile() {
           )}
         </div>
       </button>
-      {userDetails && receivedRequests.length > 0 && !gameRunning && (
-        <div className={styles.friendRequestContainer}>
-          <button
-            type="button"
-            className={styles.friendRequestButton}
-            onClick={() =>
-              showFriendsModal(UserFriendModalTab.AddFriend, userDetails.id)
-            }
-          >
-            <PersonAddIcon size={24} />
-            {receivedRequests.length}
-          </button>
-        </div>
+      {showPendingRequests && (
+        <button
+          type="button"
+          className={styles.friendRequestButton}
+          onClick={() =>
+            showFriendsModal(UserFriendModalTab.AddFriend, userDetails.id)
+          }
+        >
+          <PersonAddIcon size={24} />
+          {receivedRequests.length}
+        </button>
       )}
     </div>
   );