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({
-  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",
 });

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,18 +139,27 @@ export function UserContent({
 
       <div className={styles.profileContent}>
         <div className={styles.profileGameSection}>
-          <div>
-            <h2>{t("activity")}</h2>
-          </div>
-          <div
-            style={{
-              display: "flex",
-              flexDirection: "column",
-              gap: `${SPACING_UNIT * 2}px`,
-            }}
-          >
-            {userProfile.recentGames.map((game) => {
-              return (
+          <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",
+                flexDirection: "column",
+                gap: `${SPACING_UNIT * 2}px`,
+              }}
+            >
+              {userProfile.recentGames.map((game) => (
                 <button
                   key={game.objectID}
                   className={cn(styles.feedItem, styles.profileContentBox)}
@@ -176,9 +185,9 @@ export function UserContent({
                     </small>
                   </div>
                 </button>
-              );
-            })}
-          </div>
+              ))}
+            </div>
+          )}
         </div>
 
         <div className={cn(styles.contentSidebar, styles.profileGameSection)}>
@@ -207,33 +216,28 @@ export function UserContent({
           <div
             style={{
               display: "grid",
-              gridTemplateColumns: "1fr 1fr 1fr",
+              gridTemplateColumns: "repeat(4, 1fr)",
               gap: `${SPACING_UNIT}px`,
             }}
           >
-            {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}
-                >
-                  {game.iconUrl ? (
-                    <img
-                      className={styles.libraryGameIcon}
-                      src={game.iconUrl}
-                      alt={game.title}
-                    />
-                  ) : (
-                    <SteamLogo className={styles.libraryGameIcon} />
-                  )}
-                </button>
-              );
-            })}
+            {userProfile.libraryGames.map((game) => (
+              <button
+                key={game.objectID}
+                className={cn(styles.gameListItem, styles.profileContentBox)}
+                onClick={() => handleGameClick(game)}
+                title={game.title}
+              >
+                {game.iconUrl ? (
+                  <img
+                    className={styles.libraryGameIcon}
+                    src={game.iconUrl}
+                    alt={game.title}
+                  />
+                ) : (
+                  <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`,
+});