mirror of
https://github.com/hydralauncher/hydra.git
synced 2025-02-09 03:37:45 +03:00
style: format code
This commit is contained in:
parent
5f05cb25b2
commit
99ad11a3e5
@ -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%",
|
||||
});
|
||||
|
@ -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`,
|
||||
});
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user