diff --git a/src/renderer/src/pages/profile/profile-content.tsx b/src/renderer/src/pages/profile/profile-content.tsx index 9b0d1cb4..0c5388e5 100644 --- a/src/renderer/src/pages/profile/profile-content.tsx +++ b/src/renderer/src/pages/profile/profile-content.tsx @@ -5,7 +5,7 @@ import { SPACING_UNIT, vars } from "@renderer/theme.css"; import { useMemo } from "react"; import { useTranslation } from "react-i18next"; import { formatDistance } from "date-fns"; - +import SteamLogo from "@renderer/assets/steam-logo.svg?react"; export interface ProfileContentProps { userProfile: UserProfile; } @@ -38,7 +38,10 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => { return ( <> -
+
{userProfile.displayName {
-
+

Feed

- -
-

- {userProfile.recentGames.length} -

{userProfile.recentGames.map((game) => { @@ -87,10 +72,8 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => { className={cn(styles.feedItem, styles.profileContentBox)} > {"Icon
@@ -140,14 +123,20 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
- {"Icon + {game.iconUrl ? ( + {game.title} + ) : ( + + )} +

{game.title}

{formatPlayTime(game)}

diff --git a/src/renderer/src/pages/profile/profile.css.tsx b/src/renderer/src/pages/profile/profile.css.tsx index 83174de8..5110b63c 100644 --- a/src/renderer/src/pages/profile/profile.css.tsx +++ b/src/renderer/src/pages/profile/profile.css.tsx @@ -13,7 +13,6 @@ export const profileContentBox = style({ display: "flex", gap: `${SPACING_UNIT + SPACING_UNIT / 2}px`, alignItems: "center", - padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`, borderRadius: "4px", border: `solid 1px ${vars.color.border}`, width: "100%", @@ -67,9 +66,16 @@ export const contentSidebar = style({ }, }); -export const gameIcon = style({ - width: "48px", - height: "48px", +export const feedGameIcon = style({ + height: "100%", + display: "flex", + justifyContent: "center", + alignItems: "center", + position: "relative", +}); + +export const libraryGameIcon = style({ + height: "100%", borderRadius: "50%", display: "flex", justifyContent: "center", @@ -82,6 +88,7 @@ export const feedItem = style({ flexDirection: "row", gap: `${SPACING_UNIT}px`, width: "100%", + height: "72px", }); export const gameListItem = style({ @@ -89,6 +96,7 @@ export const gameListItem = style({ flexDirection: "row", gap: `${SPACING_UNIT}px`, width: "100%", + height: "60px", }); export const gameInformation = style({ diff --git a/src/types/index.ts b/src/types/index.ts index 24104488..0a85099e 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -89,8 +89,8 @@ export interface ProfileGame { objectID: string; shop: GameShop; title: string; - iconUrl; - string?; + iconUrl: string | null; + cover: string; playTimeInSeconds: number; lastTimePlayed: Date | null; }