style: format code

This commit is contained in:
Guilherme Viana 2024-04-15 09:37:34 -03:00
parent 5f05cb25b2
commit 99ad11a3e5
3 changed files with 128 additions and 128 deletions

View File

@ -1,89 +1,89 @@
import { SPACING_UNIT, vars } from '@renderer/theme.css'
import { style } from '@vanilla-extract/css'
import { recipe } from '@vanilla-extract/recipes'
import { SPACING_UNIT, vars } from "@renderer/theme.css";
import { style } from "@vanilla-extract/css";
import { recipe } from "@vanilla-extract/recipes";
export const downloadTitle = style({
fontWeight: 'bold',
cursor: 'pointer',
color: vars.color.bodyText,
textAlign: 'left',
marginBottom: `${SPACING_UNIT}px`,
fontSize: '16px',
display: 'block',
':hover': {
textDecoration: 'underline',
},
})
fontWeight: "bold",
cursor: "pointer",
color: vars.color.bodyText,
textAlign: "left",
marginBottom: `${SPACING_UNIT}px`,
fontSize: "16px",
display: "block",
":hover": {
textDecoration: "underline",
},
});
export const downloads = style({
width: '100%',
gap: `${SPACING_UNIT * 2}px`,
display: 'flex',
flexDirection: 'column',
margin: '0',
padding: '0',
marginTop: `${SPACING_UNIT * 3}px`,
})
width: "100%",
gap: `${SPACING_UNIT * 2}px`,
display: "flex",
flexDirection: "column",
margin: "0",
padding: "0",
marginTop: `${SPACING_UNIT * 3}px`,
});
export const downloadCover = style({
width: '280px',
minWidth: '280px',
height: 'auto',
objectFit: 'cover',
objectPosition: 'center',
borderRight: `solid 1px ${vars.color.borderColor}`,
})
width: "280px",
minWidth: "280px",
height: "auto",
objectFit: "cover",
objectPosition: "center",
borderRight: `solid 1px ${vars.color.borderColor}`,
});
export const download = recipe({
base: {
width: '100%',
backgroundColor: vars.color.background,
display: 'flex',
borderRadius: '8px',
border: `solid 1px ${vars.color.borderColor}`,
overflow: 'hidden',
boxShadow: '0px 0px 15px 0px #000000',
transition: 'all ease 0.2s',
height: '140px',
minHeight: '140px',
maxHeight: '140px',
},
variants: {
cancelled: {
true: {
opacity: vars.opacity.disabled,
':hover': {
opacity: '1',
},
},
},
},
})
base: {
width: "100%",
backgroundColor: vars.color.background,
display: "flex",
borderRadius: "8px",
border: `solid 1px ${vars.color.borderColor}`,
overflow: "hidden",
boxShadow: "0px 0px 15px 0px #000000",
transition: "all ease 0.2s",
height: "140px",
minHeight: "140px",
maxHeight: "140px",
},
variants: {
cancelled: {
true: {
opacity: vars.opacity.disabled,
":hover": {
opacity: "1",
},
},
},
},
});
export const downloadDetails = style({
display: 'flex',
flexDirection: 'column',
flex: '1',
justifyContent: 'center',
gap: `${SPACING_UNIT / 2}px`,
fontSize: '14px',
})
display: "flex",
flexDirection: "column",
flex: "1",
justifyContent: "center",
gap: `${SPACING_UNIT / 2}px`,
fontSize: "14px",
});
export const downloadRightContent = style({
display: 'flex',
padding: `${SPACING_UNIT * 2}px`,
flex: '1',
})
display: "flex",
padding: `${SPACING_UNIT * 2}px`,
flex: "1",
});
export const downloadActions = style({
display: 'flex',
alignItems: 'center',
gap: `${SPACING_UNIT}px`,
})
display: "flex",
alignItems: "center",
gap: `${SPACING_UNIT}px`,
});
export const downloadsContainer = style({
display: 'flex',
padding: `${SPACING_UNIT * 3}px`,
flexDirection: 'column',
width: '100%',
})
display: "flex",
padding: `${SPACING_UNIT * 3}px`,
flexDirection: "column",
width: "100%",
});

View File

@ -1,10 +1,10 @@
import { SPACING_UNIT } from '@renderer/theme.css'
import { style } from '@vanilla-extract/css'
import { SPACING_UNIT } from "@renderer/theme.css";
import { style } from "@vanilla-extract/css";
export const deleteActionsButtonsCtn = style({
display: 'flex',
width: '100%',
justifyContent: 'end',
alignItems: 'center',
gap: `${SPACING_UNIT}px`,
})
display: "flex",
width: "100%",
justifyContent: "end",
alignItems: "center",
gap: `${SPACING_UNIT}px`,
});

View File

@ -1,55 +1,55 @@
import { Button, Modal } from '@renderer/components'
import { useTranslation } from 'react-i18next'
import * as styles from './delete-modal.css'
import { Button, Modal } from "@renderer/components";
import { useTranslation } from "react-i18next";
import * as styles from "./delete-modal.css";
type DeleteModalProps = {
visible: boolean
title: string
description: string
onClose: () => void
deleting: boolean
deleteGame: () => void
}
visible: boolean;
title: string;
description: string;
onClose: () => void;
deleting: boolean;
deleteGame: () => void;
};
export function DeleteModal({
description,
onClose,
title,
visible,
deleting,
deleteGame,
description,
onClose,
title,
visible,
deleting,
deleteGame,
}: DeleteModalProps) {
const { t } = useTranslation('game_details')
const { t } = useTranslation("game_details");
return (
<Modal
visible={visible}
title={title}
description={description}
onClose={onClose}
>
<div className={styles.deleteActionsButtonsCtn}>
<Button
onClick={() => {
deleteGame()
onClose()
}}
theme='outline'
disabled={deleting}
>
{t('delete')}
</Button>
return (
<Modal
visible={visible}
title={title}
description={description}
onClose={onClose}
>
<div className={styles.deleteActionsButtonsCtn}>
<Button
onClick={() => {
deleteGame();
onClose();
}}
theme="outline"
disabled={deleting}
>
{t("delete")}
</Button>
<Button
onClick={() => {
onClose()
}}
theme='primary'
disabled={deleting}
>
{t('cancel')}
</Button>
</div>
</Modal>
)
<Button
onClick={() => {
onClose();
}}
theme="primary"
disabled={deleting}
>
{t("cancel")}
</Button>
</div>
</Modal>
);
}