ui changes

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 (
     <>
-      <section className={styles.profileContentBox}>
+      <section
+        className={styles.profileContentBox}
+        style={{ padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px` }}
+      >
         <img
           alt={userProfile.displayName + " profile image"}
           className={styles.profileAvatar}
@@ -52,32 +55,14 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
 
       <div className={styles.profileContent}>
         <div className={styles.profileGameSection}>
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              gap: `${SPACING_UNIT * 2}px`,
-            }}
-          >
+          <div>
             <h2>Feed</h2>
-
-            <div
-              style={{
-                flex: 1,
-                backgroundColor: vars.color.border,
-                height: "1px",
-              }}
-            />
-            <h3 style={{ fontWeight: "400" }}>
-              {userProfile.recentGames.length}
-            </h3>
           </div>
           <div
             style={{
               display: "flex",
               flexDirection: "column",
-              gap: `${SPACING_UNIT}px`,
+              gap: `${SPACING_UNIT * 2}px`,
             }}
           >
             {userProfile.recentGames.map((game) => {
@@ -87,10 +72,8 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
                   className={cn(styles.feedItem, styles.profileContentBox)}
                 >
                   <img
-                    className={styles.gameIcon}
-                    src={game.iconUrl}
-                    width={50}
-                    height={50}
+                    className={styles.feedGameIcon}
+                    src={game.cover}
                     alt={"Icon for " + game.title}
                   />
                   <div className={styles.gameInformation}>
@@ -140,14 +123,20 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
                 <div
                   key={game.objectID}
                   className={cn(styles.gameListItem, styles.profileContentBox)}
+                  style={{
+                    padding: `${SPACING_UNIT}px ${SPACING_UNIT}px`,
+                  }}
                 >
-                  <img
-                    className={styles.gameIcon}
-                    src={game.iconUrl}
-                    width={50}
-                    height={50}
-                    alt={"Icon for " + game.title}
-                  />
+                  {game.iconUrl ? (
+                    <img
+                      className={styles.libraryGameIcon}
+                      src={game.iconUrl}
+                      alt={game.title}
+                    />
+                  ) : (
+                    <SteamLogo className={styles.libraryGameIcon} />
+                  )}
+
                   <div className={styles.gameInformation}>
                     <p>{game.title}</p>
                     <p>{formatPlayTime(game)}</p>

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({

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;
 }