diff --git a/src/renderer/src/pages/achievements/achievement-panel.css.ts b/src/renderer/src/pages/achievements/achievement-panel.css.ts index 58888c2c..0056a7f5 100644 --- a/src/renderer/src/pages/achievements/achievement-panel.css.ts +++ b/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({ diff --git a/src/renderer/src/pages/achievements/achievement-panel.tsx b/src/renderer/src/pages/achievements/achievement-panel.tsx index aaf9c97c..bf48e517 100644 --- a/src/renderer/src/pages/achievements/achievement-panel.tsx +++ b/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 ( <>
{t("achievements")}
-- Total points: {userStats.achievementsPointsEarnedSum.value} - - Top {userStats.achievementsPointsEarnedSum.topPercentile}%{" "} -
-Unlocked: {userStats.unlockedAchievementSum}
+
+
+ Top {userStats.achievementsPointsEarnedSum.topPercentile}%{" "} +
+Unlock count: {userStats.unlockedAchievementSum}
{t("games")}
-- Total playtime:{" "} - {formatPlayTime(userStats.totalPlayTimeInSeconds.value)} - Top{" "} - {userStats.totalPlayTimeInSeconds.topPercentile}% -
++ Total playtime:{" "} + {formatPlayTime(userStats.totalPlayTimeInSeconds.value)} +
+Top {userStats.totalPlayTimeInSeconds.topPercentile}%
+