diff --git a/src/renderer/src/pages/profile/profile-content.tsx b/src/renderer/src/pages/profile/profile-content.tsx
index ef7b053c..fe319b63 100644
--- a/src/renderer/src/pages/profile/profile-content.tsx
+++ b/src/renderer/src/pages/profile/profile-content.tsx
@@ -9,12 +9,12 @@ import { useDate } from "@renderer/hooks";
import { useNavigate } from "react-router-dom";
import { buildGameDetailsPath } from "@renderer/helpers";
import { PersonIcon } from "@primer/octicons-react";
+
+const MAX_MINUTES_TO_SHOW_IN_PLAYTIME = 120;
export interface ProfileContentProps {
userProfile: UserProfile;
}
-const MAX_MINUTES_TO_SHOW_IN_PLAYTIME = 120;
-
export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
const { t, i18n } = useTranslation("user_profile");
@@ -28,8 +28,11 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
const { formatDistance } = useDate();
- const formatPlayTime = (game: ProfileGame) => {
- const seconds = game.playTimeInSeconds;
+ const formatPlayTime = () => {
+ const seconds = userProfile.libraryGames.reduce(
+ (acc, game) => acc + game.playTimeInSeconds,
+ 0
+ );
const minutes = seconds / 60;
if (minutes < MAX_MINUTES_TO_SHOW_IN_PLAYTIME) {
@@ -123,6 +126,7 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
}}
>
@@ -150,6 +155,7 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
padding: `${SPACING_UNIT + SPACING_UNIT / 2}px`,
}}
onClick={() => handleGameClick(game)}
+ title={game.title}
>
{game.iconUrl ? (
![]()
{
) : (
)}
-
-
-
{game.title}
-
-
- {t("play_time", {
- amount: formatPlayTime(game),
- })}
-
-
);
})}
diff --git a/src/renderer/src/pages/profile/profile.css.tsx b/src/renderer/src/pages/profile/profile.css.tsx
index 93b09d98..2bae1b5a 100644
--- a/src/renderer/src/pages/profile/profile.css.tsx
+++ b/src/renderer/src/pages/profile/profile.css.tsx
@@ -60,15 +60,15 @@ export const contentSidebar = style({
"@media": {
"(min-width: 768px)": {
width: "100%",
- maxWidth: "200px",
+ maxWidth: "150px",
},
"(min-width: 1024px)": {
- maxWidth: "300px",
+ maxWidth: "250px",
width: "100%",
},
"(min-width: 1280px)": {
width: "100%",
- maxWidth: "400px",
+ maxWidth: "350px",
},
},
});
@@ -83,7 +83,7 @@ export const feedGameIcon = style({
export const libraryGameIcon = style({
height: "100%",
- borderRadius: "50%",
+ borderRadius: "4px",
display: "flex",
justifyContent: "center",
alignItems: "center",
@@ -110,8 +110,7 @@ export const gameListItem = style({
display: "flex",
flexDirection: "row",
gap: `${SPACING_UNIT}px`,
- width: "100%",
- height: "60px",
+ aspectRatio: "1",
transition: "all ease 0.2s",
cursor: "pointer",
zIndex: "1",