PublicMirrors/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-02-02 16:23:48 +03:00
Code Issues Actions 1 Packages Projects Releases 1 Wiki Activity

refactor: migrate playtime styles from VE to SCSS + BEM

Browse Source
This commit is contained in:
Hachi-R 2025-01-21 15:56:54 -03:00
parent 19976da82e
commit c7bc868fbb
2 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/renderer/src/pages/game-details/hero/hero-panel-playtime.scss Normal file
View File

@ -0,0 +1,15 @@
@use "../../../scss/globals.scss";
.hero-panel-playtime {
&__download-details {
gap: globals.$spacing-unit;
display: flex;
color: globals.$body-color;
align-items: center;
}
&__downloads-link {
color: globals.$body-color;
text-decoration: underline;
}
}

13
src/renderer/src/pages/game-details/hero/hero-panel-playtime.tsx
View File

@ -1,24 +1,18 @@
import { useContext, useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import * as styles from "./hero-panel.css";
import { formatDownloadProgress } from "@renderer/helpers";
import { useDate, useDownload, useFormat } from "@renderer/hooks";
import { Link } from "@renderer/components";
import { gameDetailsContext } from "@renderer/context";
import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
import "./hero-panel-playtime.scss";
export function HeroPanelPlaytime() {
const [lastTimePlayed, setLastTimePlayed] = useState("");
const { game, isGameRunning } = useContext(gameDetailsContext);
const { t } = useTranslation("game_details");
const { numberFormatter } = useFormat();
const { progress, lastPacket } = useDownload();
const { formatDistance } = useDate();
useEffect(() => {
@ -55,8 +49,8 @@ export function HeroPanelPlaytime() {
game.status === "active" && lastPacket?.game.id === game.id;
const downloadInProgressInfo = (
<div className={styles.downloadDetailsRow}>
<Link to="/downloads" className={styles.downloadsLink}>
<div className="hero-panel-playtime__download-details">
<Link to="/downloads" className="hero-panel-playtime__downloads-link">
{game.status === "active"
? t("download_in_progress")
: t("download_paused")}
@ -81,7 +75,6 @@ export function HeroPanelPlaytime() {
return (
<>
<p>{t("playing_now")}</p>
{hasDownload && downloadInProgressInfo}
</>
);