feat: update achievements page

src/renderer/src/pages/achievement/achievements.css.ts

@@ -4,7 +4,6 @@ import { recipe } from "@vanilla-extract/recipes";
 
 export const container = style({
   width: "100%",
-  padding: `${SPACING_UNIT * 2}px`,
   display: "flex",
   flexDirection: "column",
   gap: `${SPACING_UNIT * 2}px`,
@@ -13,18 +12,15 @@ export const container = style({
 export const header = style({
   display: "flex",
   gap: `${SPACING_UNIT}px`,
-  width: "50%",
+  flexDirection: "column",
 });
 
 export const headerImage = style({
   borderRadius: "4px",
   objectFit: "cover",
   cursor: "pointer",
-  height: "160px",
+  width: "100%",
   transition: "all ease 0.2s",
-  ":hover": {
-    transform: "scale(1.05)",
-  },
 });
 
 export const list = style({
@@ -33,7 +29,7 @@ export const list = style({
   display: "flex",
   flexDirection: "column",
   gap: `${SPACING_UNIT * 2}px`,
-  padding: 0,
+  padding: `${SPACING_UNIT * 2}px`,
 });
 
 export const listItem = style({

src/renderer/src/pages/achievement/achievements.tsx

@@ -11,7 +11,7 @@ import {
   formatDownloadProgress,
 } from "@renderer/helpers";
 import { TrophyIcon } from "@primer/octicons-react";
-import { vars } from "@renderer/theme.css";
+import { SPACING_UNIT, vars } from "@renderer/theme.css";
 
 export function Achievement() {
   const [searchParams] = useSearchParams();
@@ -42,7 +42,15 @@ export function Achievement() {
 
   useEffect(() => {
     if (title) {
-      dispatch(setHeaderTitle(title));
+      dispatch(
+        setHeaderTitle(
+          displayName
+            ? t("user_achievements", {
+                displayName,
+              })
+            : t("your_achievements")
+        )
+      );
     }
   }, [dispatch, title]);
 
@@ -69,7 +77,7 @@ export function Achievement() {
       <div className={styles.header}>
         <button onClick={handleClickGame}>
           <img
-            src={steamUrlBuilder.cover(objectId)}
+            src={steamUrlBuilder.libraryHero(objectId)}
             alt={title}
             className={styles.headerImage}
           />
@@ -79,15 +87,10 @@ export function Achievement() {
             width: "100%",
             display: "flex",
             flexDirection: "column",
+            padding: `0 ${SPACING_UNIT * 2}px`,
           }}
         >
-          <h1>
-            {displayName
-              ? t("user_achievements", {
-                  displayName,
-                })
-              : t("your_achievements")}
-          </h1>
+          <h1>{title}</h1>
           <div
             style={{
               display: "flex",