feat: moving friends request button to sidebar

src/renderer/src/components/sidebar/sidebar-profile.css.ts

@@ -1,7 +1,18 @@
-import { style } from "@vanilla-extract/css";
+import { createVar, style } from "@vanilla-extract/css";
 
 import { SPACING_UNIT, vars } from "../../theme.css";
 
+export const profileContainerBackground = createVar();
+
+export const profileContainer = style({
+  background: profileContainerBackground,
+  position: "relative",
+  cursor: "pointer",
+  ":hover": {
+    backgroundColor: "rgba(255, 255, 255, 0.15)",
+  },
+});
+
 export const profileButton = style({
   display: "flex",
   cursor: "pointer",
@@ -10,9 +21,8 @@ export const profileButton = style({
   color: vars.color.muted,
   borderBottom: `solid 1px ${vars.color.border}`,
   boxShadow: "0px 0px 15px 0px rgb(0 0 0 / 70%)",
-  ":hover": {
-    backgroundColor: "rgba(255, 255, 255, 0.15)",
-  },
+  width: "100%",
+  zIndex: "10",
 });
 
 export const profileButtonContent = style({
@@ -64,3 +74,25 @@ export const profileButtonTitle = style({
   textOverflow: "ellipsis",
   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",
+  borderRadius: "50%",
+  overflow: "hidden",
+  width: "40px",
+  height: "40px",
+  ":hover": {
+    color: vars.color.body,
+  },
+});

src/renderer/src/components/sidebar/sidebar-profile.tsx

@@ -1,10 +1,11 @@
 import { useNavigate } from "react-router-dom";
-import { PersonIcon } from "@primer/octicons-react";
+import { PersonAddIcon, PersonIcon } from "@primer/octicons-react";
 import * as styles from "./sidebar-profile.css";
-
+import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useAppSelector, useUserDetails } from "@renderer/hooks";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
+import { profileContainerBackground } from "./sidebar-profile.css";
 
 export function SidebarProfile() {
   const navigate = useNavigate();
@@ -30,45 +31,66 @@ export function SidebarProfile() {
   }, [profileBackground]);
 
   return (
-    <button
-      type="button"
-      className={styles.profileButton}
-      style={{ background: profileButtonBackground }}
-      onClick={handleButtonClick}
+    <div
+      className={styles.profileContainer}
+      style={assignInlineVars({
+        [profileContainerBackground]: profileButtonBackground,
+      })}
     >
-      <div className={styles.profileButtonContent}>
-        <div className={styles.profileAvatar}>
-          {userDetails?.profileImageUrl ? (
-            <img
-              src={userDetails.profileImageUrl}
-              alt={userDetails.displayName}
-            />
-          ) : (
-            <PersonIcon size={24} />
-          )}
-        </div>
+      <button
+        type="button"
+        className={styles.profileButton}
+        onClick={handleButtonClick}
+      >
+        <div className={styles.profileButtonContent}>
+          <div className={styles.profileAvatar}>
+            {userDetails?.profileImageUrl ? (
+              <img
+                className={styles.profileAvatar}
+                src={userDetails.profileImageUrl}
+                alt={userDetails.displayName}
+              />
+            ) : (
+              <PersonIcon size={24} />
+            )}
+          </div>
 
-        <div className={styles.profileButtonInformation}>
-          <p className={styles.profileButtonTitle}>
-            {userDetails ? userDetails.displayName : t("sign_in")}
-          </p>
+          <div className={styles.profileButtonInformation}>
+            <p className={styles.profileButtonTitle}>
+              {userDetails ? userDetails.displayName : t("sign_in")}
+            </p>
+
+            {userDetails && gameRunning && (
+              <div>
+                <small>{gameRunning.title}</small>
+              </div>
+            )}
+          </div>
 
           {userDetails && gameRunning && (
-            <div>
-              <small>{gameRunning.title}</small>
-            </div>
+            <img
+              alt={gameRunning.title}
+              width={24}
+              style={{ borderRadius: 4 }}
+              src={gameRunning.iconUrl}
+            />
           )}
         </div>
-
-        {userDetails && gameRunning && (
-          <img
-            alt={gameRunning.title}
-            width={24}
-            style={{ borderRadius: 4 }}
-            src={gameRunning.iconUrl}
-          />
-        )}
-      </div>
-    </button>
+      </button>
+      {userDetails && !gameRunning && (
+        <div className={styles.friendRequestContainer}>
+          <button
+            type="button"
+            className={styles.friendRequestButton}
+            onClick={() => {
+              console.log("alshdaksjhdskajhd");
+            }}
+          >
+            <PersonAddIcon size={24} />
+            30
+          </button>
+        </div>
+      )}
+    </div>
   );
 }

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

@@ -355,10 +355,11 @@ export function UserContent({
                 {isMe && (
                   <button
                     type="button"
-                    style={{ color: vars.color.body, cursor: "pointer" }}
+                    style={{ color: vars.color.success, cursor: "pointer" }}
                     onClick={() => setShowAddFriendsModal(true)}
                   >
                     <PersonAddIcon size={24} />
+                    30
                   </button>
                 )}
               </div>