feat: adding english translation

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",

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",

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,
 });

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}
         />
-        <Button
-          onClick={() => {
-            setShowGameOptionsModal(true);
-          }}
-          theme="outline"
-          disabled={deleting || isGameRunning}
-          className={styles.heroPanelAction}
-        >
-          <GearIcon />
-        </Button>
 
-        <div className={styles.separator} />
+        <div className={styles.actions}>
+          {isGameRunning ? (
+            <Button
+              onClick={closeGame}
+              theme="outline"
+              disabled={deleting}
+              className={styles.heroPanelAction}
+            >
+              {t("close")}
+            </Button>
+          ) : (
+            <Button
+              onClick={openGame}
+              theme="outline"
+              disabled={deleting || isGameRunning}
+              className={styles.heroPanelAction}
+            >
+              <PlayIcon />
+              {t("play")}
+            </Button>
+          )}
+
+          <div className={styles.separator} />
 
-        {isGameRunning ? (
           <Button
-            onClick={closeGame}
-            theme="outline"
-            disabled={deleting}
-            className={styles.heroPanelAction}
-          >
-            {t("close")}
-          </Button>
-        ) : (
-          <Button
-            onClick={openGame}
+            onClick={() => {
+              setShowGameOptionsModal(true);
+            }}
             theme="outline"
             disabled={deleting || isGameRunning}
             className={styles.heroPanelAction}
           >
-            {t("play")}
+            <GearIcon />
+            {t("options")}
           </Button>
-        )}
+        </div>
       </>
     );
   }

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 = <p>{t("downloading_metadata")}</p>;
     } else if (game.progress !== 1) {
       downloadContent = (
-        <p className={styles.downloadDetailsRow}>
-          Download em andamento
+        <div className={styles.downloadDetailsRow}>
+          <Link to="/downloads" className={styles.downloadsLink}>
+            Download em andamento
+          </Link>
+
           <small>
             {isGameDownloading
               ? progress
               : formatDownloadProgress(game.progress)}
           </small>
-        </p>
+        </div>
       );
     }
   }

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({