better ui on modal

This commit is contained in:
Zamitto 2024-06-08 00:11:08 -03:00
parent 9eef445b1a
commit d8446263eb
2 changed files with 43 additions and 17 deletions

View File

@ -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`,

View File

@ -93,7 +93,9 @@ export function GameOptionsModal({
/>
<div className={styles.optionsContainer}>
<h2>Arquivos baixados</h2>
<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>
<h2>Executável</h2>
<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>