From 49fd34c3c0eb173563200f527f7ff2111a4fb789 Mon Sep 17 00:00:00 2001 From: Zamitto <167933696+zamitto@users.noreply.github.com> Date: Fri, 12 Jul 2024 19:38:39 -0300 Subject: [PATCH] feat: moving friends request button to sidebar --- package.json | 1 + .../components/sidebar/sidebar-profile.css.ts | 40 +++++++- .../components/sidebar/sidebar-profile.tsx | 94 ++++++++++++------- src/renderer/src/pages/user/user-content.tsx | 3 +- yarn.lock | 12 +++ 5 files changed, 109 insertions(+), 41 deletions(-) diff --git a/package.json b/package.json index c99a9bac..1b99734d 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "@reduxjs/toolkit": "^2.2.3", "@sentry/electron": "^5.1.0", "@vanilla-extract/css": "^1.14.2", + "@vanilla-extract/dynamic": "^2.1.1", "@vanilla-extract/recipes": "^0.5.2", "aria2": "^4.1.2", "auto-launch": "^5.0.6", diff --git a/src/renderer/src/components/sidebar/sidebar-profile.css.ts b/src/renderer/src/components/sidebar/sidebar-profile.css.ts index d01b07f1..9fcc64c2 100644 --- a/src/renderer/src/components/sidebar/sidebar-profile.css.ts +++ b/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, + }, +}); diff --git a/src/renderer/src/components/sidebar/sidebar-profile.tsx b/src/renderer/src/components/sidebar/sidebar-profile.tsx index 432ab9f0..d4414dec 100644 --- a/src/renderer/src/components/sidebar/sidebar-profile.tsx +++ b/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 ( - + + {userDetails && !gameRunning && ( +
+ +
+ )} + ); } diff --git a/src/renderer/src/pages/user/user-content.tsx b/src/renderer/src/pages/user/user-content.tsx index d8019159..503561a9 100644 --- a/src/renderer/src/pages/user/user-content.tsx +++ b/src/renderer/src/pages/user/user-content.tsx @@ -355,10 +355,11 @@ export function UserContent({ {isMe && ( )} diff --git a/yarn.lock b/yarn.lock index 00172038..e6b91b9e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2433,6 +2433,13 @@ modern-ahocorasick "^1.0.0" picocolors "^1.0.0" +"@vanilla-extract/dynamic@^2.1.1": + version "2.1.1" + resolved "https://registry.yarnpkg.com/@vanilla-extract/dynamic/-/dynamic-2.1.1.tgz#bc93a577b127a7dcb6f254973d13a863029a7faf" + integrity sha512-iqf736036ujEIKsIq28UsBEMaLC2vR2DhwKyrG3NDb/fRy9qL9FKl1TqTtBV4daU30Uh3saeik4vRzN8bzQMbw== + dependencies: + "@vanilla-extract/private" "^1.0.5" + "@vanilla-extract/integration@^7.1.3": version "7.1.4" resolved "https://registry.npmjs.org/@vanilla-extract/integration/-/integration-7.1.4.tgz" @@ -2456,6 +2463,11 @@ resolved "https://registry.npmjs.org/@vanilla-extract/private/-/private-1.0.4.tgz" integrity sha512-8FGD6AejeC/nXcblgNCM5rnZb9KXa4WNkR03HCWtdJBpANjTgjHEglNLFnhuvdQ78tC6afaxBPI+g7F2NX3tgg== +"@vanilla-extract/private@^1.0.5": + version "1.0.5" + resolved "https://registry.yarnpkg.com/@vanilla-extract/private/-/private-1.0.5.tgz#8c08ac4851f4cc89a3dcdb858d8938e69b1481c4" + integrity sha512-6YXeOEKYTA3UV+RC8DeAjFk+/okoNz/h88R+McnzA2zpaVqTR/Ep+vszkWYlGBcMNO7vEkqbq5nT/JMMvhi+tw== + "@vanilla-extract/recipes@^0.5.2": version "0.5.2" resolved "https://registry.npmjs.org/@vanilla-extract/recipes/-/recipes-0.5.2.tgz"