better ui on modal

src/renderer/src/pages/game-details/modals/game-options-modal.css.ts

@@ -7,6 +7,17 @@ export const optionsContainer = style({
   flexDirection: "column",
 });
 
+export const gameOptionHeader = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: `${SPACING_UNIT}px`,
+});
+
+export const gameOptionHeaderDescription = style({
+  fontFamily: "'Fira Sans', sans-serif",
+  fontWeight: "400",
+});
+
 export const gameOptionRow = style({
   display: "flex",
   gap: `${SPACING_UNIT}px`,

src/renderer/src/pages/game-details/modals/game-options-modal.tsx

@@ -93,7 +93,9 @@ export function GameOptionsModal({
         />
 
         <div className={styles.optionsContainer}>
+          <div className={styles.gameOptionHeader}>
             <h2>Arquivos baixados</h2>
+          </div>
           <div className={styles.gameOptionRow}>
             <Button
               onClick={handleOpenDownloadFolder}
@@ -103,21 +105,14 @@ export function GameOptionsModal({
             >
               {t("open_download_location")}
             </Button>
-
-            <Button
-              onClick={() => {
-                setShowDeleteModal(true);
-              }}
-              style={{ alignSelf: "flex-end" }}
-              theme="outline"
-              disabled={isGameDownloading || deleting || !game.downloadPath}
-            >
-              <TrashIcon />
-              {t("remove_files")}
-            </Button>
           </div>
 
+          <div className={styles.gameOptionHeader}>
             <h2>Executável</h2>
+            <h4 className={styles.gameOptionHeaderDescription}>
+              O caminho do arquivo que sera executado ao clicar em "Jogar"
+            </h4>
+          </div>
           <div className={styles.gameOptionRow}>
             <TextField
               value={game.executablePath || ""}
@@ -155,7 +150,12 @@ export function GameOptionsModal({
               {t("create_shortcut")}
             </Button>
           </div>
-          <h2>Novo Download</h2>
+          <div className={styles.gameOptionHeader}>
+            <h2>Downloads</h2>
+            <h4 className={styles.gameOptionHeaderDescription}>
+              Confira atualizações ou versões diferentes para este mesmo título
+            </h4>
+          </div>
           <div className={styles.gameOptionRow}>
             <Button
               onClick={openRepacksModal}
@@ -165,7 +165,13 @@ export function GameOptionsModal({
               {t("open_download_options")}
             </Button>
           </div>
-          <h2>Remover</h2>
+          <div className={styles.gameOptionHeader}>
+            <h2>Zona de perigo</h2>
+            <h4 className={styles.gameOptionHeaderDescription}>
+              Remova o jogo da sua biblioteca ou os arquivos que foram baixados
+              pelo Hydra
+            </h4>
+          </div>
           <div className={styles.gameOptionRow}>
             <Button
               onClick={() => setShowRemoveGameModal(true)}
@@ -173,9 +179,18 @@ export function GameOptionsModal({
               theme="outline"
               disabled={deleting}
             >
-              <NoEntryIcon />
               {t("remove_from_library")}
             </Button>
+            <Button
+              onClick={() => {
+                setShowDeleteModal(true);
+              }}
+              style={{ alignSelf: "flex-end" }}
+              theme="outline"
+              disabled={isGameDownloading || deleting || !game.downloadPath}
+            >
+              {t("remove_files")}
+            </Button>
           </div>
         </div>
       </Modal>