feat: ui adjustments

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

@@ -44,7 +44,9 @@ export function AchievementList({ achievements }: AchievementListProps) {
             {achievement.points && (
               <div
                 style={{ display: "flex", alignItems: "center", gap: "4px" }}
-                title="This achievement is worth 69 H-points"
+                title={t("achievement_earn_points", {
+                  points: achievement.points,
+                })}
               >
                 <HydraIcon width={20} height={20} />
                 <p style={{ fontSize: "1.1em" }}>{achievement.points}</p>

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

@@ -5,7 +5,7 @@ import { SPACING_UNIT, vars } from "../../theme.css";
 
 export const panel = style({
   width: "100%",
-  padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
+  padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 3}px`,
   backgroundColor: vars.color.background,
   display: "flex",
   alignItems: "center",

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

@@ -19,31 +19,31 @@ export function ComparedAchievementPanel({
   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.panel}
+      style={{
+        display: "grid",
+        gridTemplateColumns:
+          achievements.owner.achievementsPointsEarnedSum !== undefined
+            ? "3fr 1fr 1fr"
+            : "3fr 2fr",
+        gap: `${SPACING_UNIT * 2}px`,
+      }}
+    >
+      <div style={{ display: "flex", gap: `${SPACING_UNIT}px` }}>
+        {t("available_points")} <HydraIcon width={20} height={20} />{" "}
+        {achievements.achievementsPointsTotal}
+      </div>
+      {achievements.owner.achievementsPointsEarnedSum !== undefined && (
         <div className={styles.content}>
           <HydraIcon width={20} height={20} />
-          {achievements.target.achievementsPointsEarnedSum}
+          {achievements.owner.achievementsPointsEarnedSum}
         </div>
+      )}
+      <div className={styles.content}>
+        <HydraIcon width={20} height={20} />
+        {achievements.target.achievementsPointsEarnedSum}
       </div>
-    </>
+    </div>
   );
 }