fix: fixing games grid

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!"
   }
 }

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?"
   }
 }

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({
+export const cards = style({
-  base: {
   display: "grid",
   gridTemplateColumns: "repeat(2, 1fr)",
   gap: `${SPACING_UNIT * 2}px`,
   transition: "all ease 0.2s",
-  },
 });

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`,
         }}
       >
         <div className={styles.profileAvatarContainer}>
@@ -139,9 +139,19 @@ export function UserContent({
 
       <div className={styles.profileContent}>
         <div className={styles.profileGameSection}>
-          <div>
           <h2>{t("activity")}</h2>
+
+          {!userProfile.recentGames.length ? (
+            <div className={styles.noDownloads}>
+              <div className={styles.telescopeIcon}>
+                <TelescopeIcon size={24} />
               </div>
+              <h2>{t("no_recent_activity_title")}</h2>
+              <p style={{ fontFamily: "Fira Sans" }}>
+                {t("no_recent_activity_description")}
+              </p>
+            </div>
+          ) : (
             <div
               style={{
                 display: "flex",
@@ -149,8 +159,7 @@ export function UserContent({
                 gap: `${SPACING_UNIT * 2}px`,
               }}
             >
-            {userProfile.recentGames.map((game) => {
+              {userProfile.recentGames.map((game) => (
-              return (
                 <button
                   key={game.objectID}
                   className={cn(styles.feedItem, styles.profileContentBox)}
@@ -176,9 +185,9 @@ export function UserContent({
                     </small>
                   </div>
                 </button>
-              );
+              ))}
-            })}
             </div>
+          )}
         </div>
 
         <div className={cn(styles.contentSidebar, styles.profileGameSection)}>
@@ -207,18 +216,14 @@ export function UserContent({
           <div
             style={{
               display: "grid",
-              gridTemplateColumns: "1fr 1fr 1fr",
+              gridTemplateColumns: "repeat(4, 1fr)",
               gap: `${SPACING_UNIT}px`,
             }}
           >
-            {userProfile.libraryGames.map((game) => {
+            {userProfile.libraryGames.map((game) => (
-              return (
               <button
                 key={game.objectID}
                 className={cn(styles.gameListItem, styles.profileContentBox)}
-                  style={{
-                    padding: `${SPACING_UNIT + SPACING_UNIT / 2}px`,
-                  }}
                 onClick={() => handleGameClick(game)}
                 title={game.title}
               >
@@ -232,8 +237,7 @@ export function UserContent({
                   <SteamLogo className={styles.libraryGameIcon} />
                 )}
               </button>
-              );
+            ))}
-            })}
           </div>
         </div>
       </div>

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`,
+});