From 108b2552b540ca8879aa2e4db2c22b3013f66b94 Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Wed, 16 Oct 2024 12:37:44 -0300
Subject: [PATCH] feat: achievements adjustments

---
 .../achievements/achievements-content.tsx     |  4 +-
 .../achievements/achievements-skeleton.tsx    |  2 +-
 .../pages/achievements/achievements.css.ts    | 26 ++++---
 .../profile-content/profile-content.tsx       | 69 ++++++++++---------
 4 files changed, 55 insertions(+), 46 deletions(-)

diff --git a/src/renderer/src/pages/achievements/achievements-content.tsx b/src/renderer/src/pages/achievements/achievements-content.tsx
index 6b2bd1e1..153311ef 100644
--- a/src/renderer/src/pages/achievements/achievements-content.tsx
+++ b/src/renderer/src/pages/achievements/achievements-content.tsx
@@ -422,7 +422,7 @@ export function AchievementsContent({ otherUser }: AchievementsContentProps) {
       <img
         src={steamUrlBuilder.libraryHero(objectId)}
         alt={gameTitle}
-        className={styles.hero}
+        className={styles.heroImage}
         onLoad={handleHeroLoad}
       />
 
@@ -431,7 +431,7 @@ export function AchievementsContent({ otherUser }: AchievementsContentProps) {
         onScroll={onScroll}
         className={styles.container}
       >
-        <div ref={heroRef} className={styles.header}>
+        <div ref={heroRef} className={styles.hero}>
           <div
             style={{
               backgroundColor: gameColor,
diff --git a/src/renderer/src/pages/achievements/achievements-skeleton.tsx b/src/renderer/src/pages/achievements/achievements-skeleton.tsx
index f9ae81ac..f26f3951 100644
--- a/src/renderer/src/pages/achievements/achievements-skeleton.tsx
+++ b/src/renderer/src/pages/achievements/achievements-skeleton.tsx
@@ -4,7 +4,7 @@ import * as styles from "./achievements.css";
 export function AchievementsSkeleton() {
   return (
     <div className={styles.container}>
-      <div className={styles.hero}>
+      <div className={styles.heroImage}>
         <Skeleton className={styles.heroImageSkeleton} />
       </div>
       <div className={styles.heroPanelSkeleton}></div>
diff --git a/src/renderer/src/pages/achievements/achievements.css.ts b/src/renderer/src/pages/achievements/achievements.css.ts
index 682fd2e5..f84bc7be 100644
--- a/src/renderer/src/pages/achievements/achievements.css.ts
+++ b/src/renderer/src/pages/achievements/achievements.css.ts
@@ -13,11 +13,11 @@ export const wrapper = style({
   transition: "all ease 0.3s",
 });
 
-export const header = style({
-  display: "flex",
+export const hero = style({
+  width: "100%",
   height: `${HERO_HEIGHT}px`,
   minHeight: `${HERO_HEIGHT}px`,
-  gap: `${SPACING_UNIT}px`,
+  display: "flex",
   flexDirection: "column",
   position: "relative",
   transition: "all ease 0.2s",
@@ -29,14 +29,22 @@ export const header = style({
   },
 });
 
-export const hero = style({
-  position: "absolute",
-  inset: "0",
-  borderRadius: "4px",
-  objectFit: "cover",
-  cursor: "pointer",
+export const heroImage = style({
   width: "100%",
+  height: `${HERO_HEIGHT}px`,
+  minHeight: `${HERO_HEIGHT}px`,
+  objectFit: "cover",
+  objectPosition: "top",
   transition: "all ease 0.2s",
+  position: "absolute",
+  zIndex: "0",
+  "@media": {
+    "(min-width: 1250px)": {
+      objectPosition: "center",
+      height: "350px",
+      minHeight: "350px",
+    },
+  },
 });
 
 export const heroContent = style({
diff --git a/src/renderer/src/pages/profile/profile-content/profile-content.tsx b/src/renderer/src/pages/profile/profile-content/profile-content.tsx
index 99e09889..de22313e 100644
--- a/src/renderer/src/pages/profile/profile-content/profile-content.tsx
+++ b/src/renderer/src/pages/profile/profile-content/profile-content.tsx
@@ -46,7 +46,7 @@ export function ProfileContent() {
   }, [userProfile]);
 
   const buildUserGameDetailsPath = (game: UserGame) => {
-    if (!userProfile?.hasActiveSubscription) {
+    if (!userProfile?.hasActiveSubscription || game.achievementCount === 0) {
       return buildGameDetailsPath({
         ...game,
         objectId: game.objectId,
@@ -174,55 +174,56 @@ export function ProfileContent() {
                           {formatPlayTime(game.playTimeInSeconds)}
                         </small>
 
-                        {userProfile.hasActiveSubscription && (
-                          <div
-                            style={{
-                              color: "white",
-                              width: "100%",
-                              display: "flex",
-                              flexDirection: "column",
-                            }}
-                          >
+                        {userProfile.hasActiveSubscription &&
+                          game.achievementCount > 0 && (
                             <div
                               style={{
+                                color: "white",
+                                width: "100%",
                                 display: "flex",
-                                justifyContent: "space-between",
-                                marginBottom: 8,
-                                color: vars.color.muted,
+                                flexDirection: "column",
                               }}
                             >
                               <div
                                 style={{
                                   display: "flex",
-                                  alignItems: "center",
-                                  gap: 8,
+                                  justifyContent: "space-between",
+                                  marginBottom: 8,
+                                  color: vars.color.muted,
                                 }}
                               >
-                                <TrophyIcon size={13} />
+                                <div
+                                  style={{
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: 8,
+                                  }}
+                                >
+                                  <TrophyIcon size={13} />
+                                  <span>
+                                    {game.unlockedAchievementCount} /{" "}
+                                    {game.achievementCount}
+                                  </span>
+                                </div>
+
                                 <span>
-                                  {game.unlockedAchievementCount} /{" "}
-                                  {game.achievementCount}
+                                  {formatDownloadProgress(
+                                    game.unlockedAchievementCount /
+                                      game.achievementCount
+                                  )}
                                 </span>
                               </div>
 
-                              <span>
-                                {formatDownloadProgress(
+                              <progress
+                                max={1}
+                                value={
                                   game.unlockedAchievementCount /
-                                    game.achievementCount
-                                )}
-                              </span>
+                                  game.achievementCount
+                                }
+                                className={styles.achievementsProgressBar}
+                              />
                             </div>
-
-                            <progress
-                              max={1}
-                              value={
-                                game.unlockedAchievementCount /
-                                game.achievementCount
-                              }
-                              className={styles.achievementsProgressBar}
-                            />
-                          </div>
-                        )}
+                          )}
                       </div>
 
                       <img