From d0406282ceac1462337eb449d04ffe44a674350f Mon Sep 17 00:00:00 2001 From: Zamitto <167933696+zamitto@users.noreply.github.com> Date: Tue, 16 Jul 2024 13:44:52 -0300 Subject: [PATCH] feat: organize code --- src/renderer/src/app.tsx | 5 +- .../shared-modals/user-friend-modal.css.ts | 92 +++++++++++++++++++ ...equest-modal.tsx => user-friend-modal.tsx} | 2 +- .../shared-modals/user-friend-request.tsx | 2 +- src/renderer/src/pages/user/user-content.tsx | 22 ++--- src/renderer/src/pages/user/user.css.ts | 40 -------- 6 files changed, 105 insertions(+), 58 deletions(-) create mode 100644 src/renderer/src/pages/shared-modals/user-friend-modal.css.ts rename src/renderer/src/pages/shared-modals/{user-friend-request-modal.tsx => user-friend-modal.tsx} (99%) diff --git a/src/renderer/src/app.tsx b/src/renderer/src/app.tsx index a91e8881..09100d6b 100644 --- a/src/renderer/src/app.tsx +++ b/src/renderer/src/app.tsx @@ -25,7 +25,7 @@ import { setGameRunning, } from "@renderer/features"; import { useTranslation } from "react-i18next"; -import { UserFriendRequestModal } from "./pages/shared-modals/user-friend-request-modal"; +import { UserFriendModal } from "./pages/shared-modals/user-friend-modal"; export interface AppProps { children: React.ReactNode; @@ -40,7 +40,6 @@ export function App() { const { clearDownload, setLastPacket } = useDownload(); const { - userDetails, showFriendRequestsModal, setShowFriendRequestModal, updateFriendRequests, @@ -218,7 +217,7 @@ export function App() { onClose={handleToastClose} /> - setShowFriendRequestModal(false)} /> diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal.css.ts b/src/renderer/src/pages/shared-modals/user-friend-modal.css.ts new file mode 100644 index 00000000..717bc95f --- /dev/null +++ b/src/renderer/src/pages/shared-modals/user-friend-modal.css.ts @@ -0,0 +1,92 @@ +import { SPACING_UNIT, vars } from "../../theme.css"; +import { style } from "@vanilla-extract/css"; + +export const profileContentBox = style({ + display: "flex", + gap: `${SPACING_UNIT * 3}px`, + alignItems: "center", + borderRadius: "4px", + border: `solid 1px ${vars.color.border}`, + width: "100%", + boxShadow: "0px 0px 15px 0px rgba(0, 0, 0, 0.7)", + transition: "all ease 0.3s", +}); + +export const friendAvatarContainer = style({ + width: "35px", + minWidth: "35px", + height: "35px", + borderRadius: "50%", + display: "flex", + justifyContent: "center", + alignItems: "center", + backgroundColor: vars.color.background, + overflow: "hidden", + border: `solid 1px ${vars.color.border}`, + boxShadow: "0px 0px 5px 0px rgba(0, 0, 0, 0.7)", +}); + +export const friendListDisplayName = style({ + fontWeight: "bold", + fontSize: vars.size.body, + textAlign: "left", + overflow: "hidden", + textOverflow: "ellipsis", + whiteSpace: "nowrap", +}); + +export const profileAvatar = style({ + height: "100%", + width: "100%", + objectFit: "cover", +}); + +export const friendListContainer = style({ + width: "100%", + height: "54px", + transition: "all ease 0.2s", + position: "relative", + ":hover": { + backgroundColor: "rgba(255, 255, 255, 0.15)", + }, +}); + +export const friendListButton = style({ + display: "flex", + alignItems: "center", + position: "absolute", + cursor: "pointer", + height: "100%", + width: "100%", + flexDirection: "row", + color: vars.color.body, + gap: `${SPACING_UNIT + SPACING_UNIT / 2}px`, + padding: "0 8px", +}); + +export const friendRequestItem = style({ + color: vars.color.body, + ":hover": { + backgroundColor: "rgba(255, 255, 255, 0.15)", + }, +}); + +export const acceptRequestButton = style({ + cursor: "pointer", + color: vars.color.body, + width: "28px", + height: "28px", + ":hover": { + color: vars.color.success, + }, +}); + +export const cancelRequestButton = style({ + cursor: "pointer", + color: vars.color.body, + width: "28px", + height: "28px", + ":hover": { + color: vars.color.danger, + }, +}); diff --git a/src/renderer/src/pages/shared-modals/user-friend-request-modal.tsx b/src/renderer/src/pages/shared-modals/user-friend-modal.tsx similarity index 99% rename from src/renderer/src/pages/shared-modals/user-friend-request-modal.tsx rename to src/renderer/src/pages/shared-modals/user-friend-modal.tsx index 6d72bba8..c8f870df 100644 --- a/src/renderer/src/pages/shared-modals/user-friend-request-modal.tsx +++ b/src/renderer/src/pages/shared-modals/user-friend-modal.tsx @@ -11,7 +11,7 @@ export interface UserAddFriendsModalProps { onClose: () => void; } -export const UserFriendRequestModal = ({ +export const UserFriendModal = ({ visible, onClose, }: UserAddFriendsModalProps) => { diff --git a/src/renderer/src/pages/shared-modals/user-friend-request.tsx b/src/renderer/src/pages/shared-modals/user-friend-request.tsx index e79a8369..022807d5 100644 --- a/src/renderer/src/pages/shared-modals/user-friend-request.tsx +++ b/src/renderer/src/pages/shared-modals/user-friend-request.tsx @@ -3,7 +3,7 @@ import { PersonIcon, XCircleIcon, } from "@primer/octicons-react"; -import * as styles from "../user/user.css"; +import * as styles from "./user-friend-modal.css"; import cn from "classnames"; import { SPACING_UNIT } from "@renderer/theme.css"; diff --git a/src/renderer/src/pages/user/user-content.tsx b/src/renderer/src/pages/user/user-content.tsx index de682922..8f1512e8 100644 --- a/src/renderer/src/pages/user/user-content.tsx +++ b/src/renderer/src/pages/user/user-content.tsx @@ -13,13 +13,7 @@ import { } from "@renderer/hooks"; import { useNavigate } from "react-router-dom"; import { buildGameDetailsPath, steamUrlBuilder } from "@renderer/helpers"; -import { - PersonAddIcon, - PersonIcon, - PlusCircleIcon, - PlusIcon, - TelescopeIcon, -} from "@primer/octicons-react"; +import { PersonIcon, PlusIcon, TelescopeIcon } from "@primer/octicons-react"; import { Button, Link } from "@renderer/components"; import { UserEditProfileModal } from "./user-edit-modal"; import { UserSignOutModal } from "./user-signout-modal"; @@ -386,12 +380,14 @@ export function UserContent({ ); })} - + {isMe && ( + + )} )} diff --git a/src/renderer/src/pages/user/user.css.ts b/src/renderer/src/pages/user/user.css.ts index 629e8dc9..eceb06bc 100644 --- a/src/renderer/src/pages/user/user.css.ts +++ b/src/renderer/src/pages/user/user.css.ts @@ -199,19 +199,6 @@ export const friendListContainer = style({ }, }); -export const friendListButton = style({ - display: "flex", - alignItems: "center", - position: "absolute", - cursor: "pointer", - height: "100%", - width: "100%", - flexDirection: "row", - color: vars.color.body, - gap: `${SPACING_UNIT + SPACING_UNIT / 2}px`, - padding: "0 8px", -}); - export const gameInformation = style({ display: "flex", flexDirection: "column", @@ -284,30 +271,3 @@ export const profileBackground = style({ top: "0", borderRadius: "4px", }); - -export const friendRequestItem = style({ - color: vars.color.body, - ":hover": { - backgroundColor: "rgba(255, 255, 255, 0.15)", - }, -}); - -export const acceptRequestButton = style({ - cursor: "pointer", - color: vars.color.body, - width: "28px", - height: "28px", - ":hover": { - color: vars.color.success, - }, -}); - -export const cancelRequestButton = style({ - cursor: "pointer", - color: vars.color.body, - width: "28px", - height: "28px", - ":hover": { - color: vars.color.danger, - }, -});