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