diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 838c795f..63682eee 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -108,7 +108,8 @@ "create_shortcut": "Create shortcut", "remove_files": "Remove files", "remove_from_library_title": "Are you sure?", - "remove_from_library_description": "This will remove {{game}} from your library" + "remove_from_library_description": "This will remove {{game}} from your library", + "options": "Options" }, "activation": { "title": "Activate Hydra", diff --git a/src/locales/pt/translation.json b/src/locales/pt/translation.json index 9b34e09d..77121bd5 100644 --- a/src/locales/pt/translation.json +++ b/src/locales/pt/translation.json @@ -105,7 +105,8 @@ "create_shortcut": "Criar atalho", "remove_files": "Remover arquivos", "remove_from_library_description": "Tem certeza que deseja remover {{game}} da sua biblioteca?", - "remove_from_library_title": "Tem certeza?" + "remove_from_library_title": "Tem certeza?", + "options": "Opções" }, "activation": { "title": "Ativação", diff --git a/src/renderer/src/pages/game-details/hero/hero-panel-actions.css.ts b/src/renderer/src/pages/game-details/hero/hero-panel-actions.css.ts index cebee4be..48f8105b 100644 --- a/src/renderer/src/pages/game-details/hero/hero-panel-actions.css.ts +++ b/src/renderer/src/pages/game-details/hero/hero-panel-actions.css.ts @@ -6,8 +6,12 @@ export const heroPanelAction = style({ border: `solid 1px ${vars.color.muted}`, }); +export const actions = style({ + display: "flex", + gap: `${SPACING_UNIT * 2}px`, +}); + export const separator = style({ width: "1px", - backgroundColor: vars.color.muted, - margin: `${SPACING_UNIT / 2}px 0`, + backgroundColor: vars.color.border, }); diff --git a/src/renderer/src/pages/game-details/hero/hero-panel-actions.tsx b/src/renderer/src/pages/game-details/hero/hero-panel-actions.tsx index 02d8f456..fcb7fbdd 100644 --- a/src/renderer/src/pages/game-details/hero/hero-panel-actions.tsx +++ b/src/renderer/src/pages/game-details/hero/hero-panel-actions.tsx @@ -1,4 +1,4 @@ -import { GearIcon, PlusCircleIcon } from "@primer/octicons-react"; +import { GearIcon, PlayIcon, PlusCircleIcon } from "@primer/octicons-react"; import { Button } from "@renderer/components"; import { useAppSelector, useDownload, useLibrary } from "@renderer/hooks"; import { useContext, useState } from "react"; @@ -135,38 +135,43 @@ export function HeroPanelActions() { }} selectGameExecutable={selectGameExecutable} /> - -
+
+ {isGameRunning ? ( + + ) : ( + + )} + +
- {isGameRunning ? ( - ) : ( - - )} +
); } diff --git a/src/renderer/src/pages/game-details/hero/hero-panel-playtime.tsx b/src/renderer/src/pages/game-details/hero/hero-panel-playtime.tsx index 26da8921..c32f24b0 100644 --- a/src/renderer/src/pages/game-details/hero/hero-panel-playtime.tsx +++ b/src/renderer/src/pages/game-details/hero/hero-panel-playtime.tsx @@ -4,6 +4,7 @@ import * as styles from "./hero-panel.css"; import { formatDownloadProgress } from "@renderer/helpers"; import { useDate, useDownload } from "@renderer/hooks"; import { gameDetailsContext } from "../game-details.context"; +import { Link } from "@renderer/components"; const MAX_MINUTES_TO_SHOW_IN_PLAYTIME = 120; @@ -61,14 +62,17 @@ export function HeroPanelPlaytime() { downloadContent =

{t("downloading_metadata")}

; } else if (game.progress !== 1) { downloadContent = ( -

- Download em andamento +

+ + Download em andamento + + {isGameDownloading ? progress : formatDownloadProgress(game.progress)} -

+
); } } diff --git a/src/renderer/src/pages/game-details/hero/hero-panel.css.ts b/src/renderer/src/pages/game-details/hero/hero-panel.css.ts index 54ba7eea..54297b0b 100644 --- a/src/renderer/src/pages/game-details/hero/hero-panel.css.ts +++ b/src/renderer/src/pages/game-details/hero/hero-panel.css.ts @@ -30,7 +30,12 @@ export const actions = style({ export const downloadDetailsRow = style({ gap: `${SPACING_UNIT}px`, display: "flex", - alignItems: "flex-end", + color: vars.color.body, + alignItems: "center", +}); + +export const downloadsLink = style({ + color: vars.color.body, }); export const progressBar = recipe({