feat: some visuals

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

@@ -5,22 +5,18 @@ import { SPACING_UNIT, vars } from "../../theme.css";
 
 export const panel = style({
   width: "100%",
-  height: "72px",
-  minHeight: "72px",
-  padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 3}px`,
+  padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
   backgroundColor: vars.color.background,
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
-  transition: "all ease 0.2s",
   borderBottom: `solid 1px ${vars.color.border}`,
-  overflow: "hidden",
 });
 
 export const content = style({
   display: "flex",
-  flexDirection: "column",
   gap: `${SPACING_UNIT}px`,
+  justifyContent: "center",
 });
 
 export const actions = style({

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

@@ -1,11 +1,9 @@
 import { useContext } from "react";
 import { useTranslation } from "react-i18next";
-
-import { useDate, useDownload } from "@renderer/hooks";
-
+import { gameDetailsContext } from "@renderer/context";
 import * as styles from "./achievement-panel.css";
 
-import { gameDetailsContext } from "@renderer/context";
+import HydraIcon from "@renderer/assets/icons/hydra.svg?react";
 
 export interface HeroPanelProps {
   isHeaderStuck: boolean;
@@ -14,23 +12,14 @@ export interface HeroPanelProps {
 export function AchievementPanel({ isHeaderStuck }: HeroPanelProps) {
   const { t } = useTranslation("game_details");
 
-  const { formatDate } = useDate();
-
-  const { game, repacks, gameColor } = useContext(gameDetailsContext);
-
-  const { lastPacket } = useDownload();
-
-  const isGameDownloading =
-    game?.status === "active" && lastPacket?.game.id === game?.id;
-
-  const showProgressBar =
-    (game?.status === "active" && game?.progress < 1) ||
-    game?.status === "paused";
+  const {} = useContext(gameDetailsContext);
 
   return (
     <>
       <div className={styles.panel}>
-        <div className={styles.content}>Teste 123131312</div>
+        <div className={styles.content}>
+          Pontos desbloqueados: <HydraIcon width={20} height={20} /> 69/420
+        </div>
       </div>
     </>
   );

src/renderer/src/pages/achievements/achievements-content.tsx

@@ -18,6 +18,7 @@ import { ComparedAchievementList } from "./compared-achievement-list";
 import * as styles from "./achievements.css";
 import { AchievementList } from "./achievement-list";
 import { AchievementPanel } from "./achievement-panel";
+import { ComparedAchievementPanel } from "./compared-achievement-panel";
 
 interface UserInfo {
   id: string;
@@ -322,7 +323,7 @@ export function AchievementsContent({
 
         {otherUser ? (
           <>
-            <AchievementPanel isHeaderStuck={false} />
+            <ComparedAchievementPanel achievements={comparedAchievements!} />
             <ComparedAchievementList achievements={comparedAchievements!} />
           </>
         ) : (

src/renderer/src/pages/achievements/compared-achievement-list.tsx

@@ -58,11 +58,9 @@ export function ComparedAchievementList({
                   gap: `${SPACING_UNIT}px`,
                   justifyContent: "center",
                 }}
+                title={formatDateTime(achievement.ownerStat.unlockTime!)}
               >
                 <CheckCircleIcon />
-                <small>
-                  {formatDateTime(achievement.ownerStat.unlockTime!)}
-                </small>
               </div>
             ) : (
               <div
@@ -86,11 +84,9 @@ export function ComparedAchievementList({
                 gap: `${SPACING_UNIT}px`,
                 justifyContent: "center",
               }}
+              title={formatDateTime(achievement.targetStat.unlockTime!)}
             >
               <CheckCircleIcon />
-              <small>
-                {formatDateTime(achievement.targetStat.unlockTime!)}
-              </small>
             </div>
           ) : (
             <div

src/renderer/src/pages/achievements/compared-achievement-panel.tsx

@@ -0,0 +1,49 @@
+import { useContext } from "react";
+import { useTranslation } from "react-i18next";
+import { gameDetailsContext } from "@renderer/context";
+import * as styles from "./achievement-panel.css";
+
+import HydraIcon from "@renderer/assets/icons/hydra.svg?react";
+import { ComparedAchievements } from "@types";
+import { SPACING_UNIT } from "@renderer/theme.css";
+
+export interface ComparedAchievementPanelProps {
+  achievements: ComparedAchievements;
+}
+
+export function ComparedAchievementPanel({
+  achievements,
+}: ComparedAchievementPanelProps) {
+  const { t } = useTranslation("game_details");
+
+  const {} = useContext(gameDetailsContext);
+
+  return (
+    <>
+      <div
+        className={styles.panel}
+        style={{
+          display: "grid",
+          gridTemplateColumns:
+            achievements.owner.achievementsPointsEarnedSum !== undefined
+              ? "3fr 1fr 1fr"
+              : "3fr 2fr",
+        }}
+      >
+        <div style={{ display: "flex", gap: `${SPACING_UNIT}px` }}>
+          Total de pontos: <HydraIcon width={20} height={20} /> 4200
+        </div>
+        {achievements.owner.achievementsPointsEarnedSum !== undefined && (
+          <div className={styles.content}>
+            <HydraIcon width={20} height={20} />
+            {achievements.owner.achievementsPointsEarnedSum}
+          </div>
+        )}
+        <div className={styles.content}>
+          <HydraIcon width={20} height={20} />
+          {achievements.target.achievementsPointsEarnedSum}
+        </div>
+      </div>
+    </>
+  );
+}

src/renderer/src/pages/profile/profile-content/user-stats-box.tsx

@@ -4,6 +4,7 @@ import { userProfileContext } from "@renderer/context";
 import { useTranslation } from "react-i18next";
 import { useFormat } from "@renderer/hooks";
 import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
+import HydraIcon from "@renderer/assets/icons/hydra.svg?react";
 
 export function UserStatsBox() {
   const { userStats } = useContext(userProfileContext);
@@ -42,21 +43,30 @@ export function UserStatsBox() {
           {userStats.achievementsPointsEarnedSum && (
             <li>
               <p className={styles.listItemTitle}>{t("achievements")}</p>
-              <p>
-                Total points: {userStats.achievementsPointsEarnedSum.value} -
-                Top {userStats.achievementsPointsEarnedSum.topPercentile}%{" "}
-              </p>
-              <p>Unlocked: {userStats.unlockedAchievementSum}</p>
+              <div style={{ display: "flex", justifyContent: "space-between" }}>
+                <p
+                  style={{ display: "flex", alignItems: "center", gap: "4px" }}
+                >
+                  <HydraIcon width={20} height={20} />
+                  {userStats.achievementsPointsEarnedSum.value} points
+                </p>
+                <p>
+                  Top {userStats.achievementsPointsEarnedSum.topPercentile}%{" "}
+                </p>
+              </div>
+              <p>Unlock count: {userStats.unlockedAchievementSum}</p>
             </li>
           )}
 
           <li>
             <p className={styles.listItemTitle}>{t("games")}</p>
-            <p>
-              Total playtime:{" "}
-              {formatPlayTime(userStats.totalPlayTimeInSeconds.value)} - Top{" "}
-              {userStats.totalPlayTimeInSeconds.topPercentile}%
-            </p>
+            <div style={{ display: "flex", justifyContent: "space-between" }}>
+              <p>
+                Total playtime:{" "}
+                {formatPlayTime(userStats.totalPlayTimeInSeconds.value)}
+              </p>
+              <p> Top {userStats.totalPlayTimeInSeconds.topPercentile}%</p>
+            </div>
           </li>
         </ul>
       </div>