diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index d46cafdb..bed1eceb 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -231,8 +231,10 @@ "play_time": "Played for {{amount}}", "last_time_played": "Last played {{period}}", "sign_out": "Sign out", - "activity": "Recent Activity", + "activity": "Recent activity", "library": "Library", - "total_play_time": "Total playtime: {{amount}}" + "total_play_time": "Total playtime: {{amount}}", + "no_recent_activity_title": "Hmmm… nothing here", + "no_recent_activity_description": "You haven't played any games recently. It's time to change that!" } } diff --git a/src/locales/pt/translation.json b/src/locales/pt/translation.json index 8dd937d2..014f3c5a 100644 --- a/src/locales/pt/translation.json +++ b/src/locales/pt/translation.json @@ -232,8 +232,10 @@ "play_time": "Jogado por {{amount}}", "last_time_played": "Jogou {{period}}", "sign_out": "Sair da conta", - "activity": "Atividade Recente", + "activity": "Atividade recente", "library": "Biblioteca", - "total_play_time": "Tempo total de jogo: {{amount}}" + "total_play_time": "Tempo total de jogo: {{amount}}", + "no_recent_activity_title": "Hmmm… nada por aqui", + "no_recent_activity_description": "Parece que você não jogou nada recentemente. Que tal começar agora?" } } diff --git a/src/renderer/src/pages/home/catalogue-home.css.ts b/src/renderer/src/pages/home/catalogue-home.css.ts index 8096bf97..a13d58f4 100644 --- a/src/renderer/src/pages/home/catalogue-home.css.ts +++ b/src/renderer/src/pages/home/catalogue-home.css.ts @@ -1,5 +1,4 @@ import { style } from "@vanilla-extract/css"; -import { recipe } from "@vanilla-extract/recipes"; import { SPACING_UNIT } from "../../theme.css"; @@ -17,11 +16,9 @@ export const content = style({ flex: "1", }); -export const cards = recipe({ - base: { - display: "grid", - gridTemplateColumns: "repeat(2, 1fr)", - gap: `${SPACING_UNIT * 2}px`, - transition: "all ease 0.2s", - }, +export const cards = style({ + display: "grid", + gridTemplateColumns: "repeat(2, 1fr)", + gap: `${SPACING_UNIT * 2}px`, + transition: "all ease 0.2s", }); diff --git a/src/renderer/src/pages/user/user-content.tsx b/src/renderer/src/pages/user/user-content.tsx index 20384cc3..816f25a9 100644 --- a/src/renderer/src/pages/user/user-content.tsx +++ b/src/renderer/src/pages/user/user-content.tsx @@ -9,7 +9,7 @@ import SteamLogo from "@renderer/assets/steam-logo.svg?react"; import { useDate, useUserDetails } from "@renderer/hooks"; import { useNavigate } from "react-router-dom"; import { buildGameDetailsPath } from "@renderer/helpers"; -import { PersonIcon } from "@primer/octicons-react"; +import { PersonIcon, TelescopeIcon } from "@primer/octicons-react"; import { Button } from "@renderer/components"; import { UserEditProfileModal } from "./user-edit-modal"; @@ -66,7 +66,7 @@ export function UserContent({ }; const handleSignout = async () => { - await signOut(); + signOut(); navigate("/"); }; @@ -95,7 +95,7 @@ export function UserContent({ className={styles.profileContentBox} style={{ background: profileContentBoxBackground, - padding: `${SPACING_UNIT * 4}px ${SPACING_UNIT * 2}px`, + padding: `${SPACING_UNIT * 3}px ${SPACING_UNIT * 2}px`, }} >
@@ -139,18 +139,27 @@ export function UserContent({
-
-

{t("activity")}

-
-
- {userProfile.recentGames.map((game) => { - return ( +

{t("activity")}

+ + {!userProfile.recentGames.length ? ( +
+
+ +
+

{t("no_recent_activity_title")}

+

+ {t("no_recent_activity_description")} +

+
+ ) : ( +
+ {userProfile.recentGames.map((game) => (
- ); - })} -
+ ))} +
+ )}
@@ -207,33 +216,28 @@ export function UserContent({
- {userProfile.libraryGames.map((game) => { - return ( - - ); - })} + {userProfile.libraryGames.map((game) => ( + + ))}
diff --git a/src/renderer/src/pages/user/user.css.ts b/src/renderer/src/pages/user/user.css.ts index 0f3ec142..47e197d9 100644 --- a/src/renderer/src/pages/user/user.css.ts +++ b/src/renderer/src/pages/user/user.css.ts @@ -4,6 +4,7 @@ import { style } from "@vanilla-extract/css"; export const wrapper = style({ padding: "24px", width: "100%", + height: "100%", display: "flex", flexDirection: "column", gap: `${SPACING_UNIT * 3}px`, @@ -16,7 +17,6 @@ export const profileContentBox = style({ borderRadius: "4px", border: `solid 1px ${vars.color.border}`, width: "100%", - overflow: "hidden", boxShadow: "0px 0px 15px 0px rgba(0, 0, 0, 0.7)", transition: "all ease 0.3s", }); @@ -55,6 +55,7 @@ export const profileAvatar = style({ borderRadius: "50%", overflow: "hidden", objectFit: "cover", + animationPlayState: "paused", }); export const profileAvatarEditOverlay = style({ @@ -76,12 +77,14 @@ export const profileInformation = style({ export const profileContent = style({ display: "flex", + height: "100%", flexDirection: "row", gap: `${SPACING_UNIT * 4}px`, }); export const profileGameSection = style({ width: "100%", + height: "100%", display: "flex", flexDirection: "column", gap: `${SPACING_UNIT * 2}px`, @@ -114,6 +117,7 @@ export const feedGameIcon = style({ }); export const libraryGameIcon = style({ + width: "100%", height: "100%", borderRadius: "4px", display: "flex", @@ -142,10 +146,11 @@ export const gameListItem = style({ display: "flex", flexDirection: "row", gap: `${SPACING_UNIT}px`, - aspectRatio: "1", transition: "all ease 0.2s", cursor: "pointer", zIndex: "1", + overflow: "hidden", + padding: `${SPACING_UNIT + SPACING_UNIT / 2}px`, ":hover": { backgroundColor: "rgba(255, 255, 255, 0.15)", }, @@ -175,3 +180,24 @@ export const editProfileImageBadge = style({ right: "0px", zIndex: "1", }); + +export const telescopeIcon = style({ + width: "60px", + height: "60px", + borderRadius: "50%", + backgroundColor: "rgba(255, 255, 255, 0.06)", + display: "flex", + alignItems: "center", + justifyContent: "center", + marginBottom: `${SPACING_UNIT * 2}px`, +}); + +export const noDownloads = style({ + display: "flex", + width: "100%", + height: "100%", + justifyContent: "center", + alignItems: "center", + flexDirection: "column", + gap: `${SPACING_UNIT}px`, +});