style: export modal (#592)

* style: tweaks to export modal
This commit is contained in:
Carlos Valente
2023-11-14 22:31:14 +01:00
committed by GitHub
parent 1ca3b9c134
commit 536e447eaa
2 changed files with 10 additions and 11 deletions
@@ -1,10 +1,9 @@
.modalHeader { @use '../../../theme/v2Styles' as *;
font-weight: 400;
}
.modalBody { .buttonRow {
display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 1rem; margin-top: $section-spacing;
margin-bottom: 1rem; display: flex;
gap: $section-spacing;
margin: 0 0.25rem;
} }
@@ -13,16 +13,16 @@ export default function ExportModal(props: ExportModalProps) {
const { isOpen, onClose } = props; const { isOpen, onClose } = props;
return ( return (
<Modal isOpen={isOpen} onClose={onClose} motionPreset='scale' size='xl' colorScheme='blackAlpha'> <Modal isOpen={isOpen} onClose={onClose} motionPreset='slideInBottom' size='xl' variant='ontime-small'>
<ModalOverlay /> <ModalOverlay />
<ModalContent> <ModalContent>
<ModalHeader className={styles.modalHeader}>Download options</ModalHeader> <ModalHeader className={styles.modalHeader}>Download options</ModalHeader>
<ModalCloseButton /> <ModalCloseButton />
<ModalBody className={styles.modalBody}> <ModalBody className={styles.buttonRow}>
<Button onClick={() => onClose('csv')} variant='ontime-subtle-on-light' width='48%'> <Button onClick={() => onClose('csv')} variant='ontime-subtle-on-light' width='100%'>
Rundown as CSV Rundown as CSV
</Button> </Button>
<Button onClick={() => onClose('json')} variant='ontime-filled' width='48%'> <Button onClick={() => onClose('json')} variant='ontime-filled' width='100%'>
Project file Project file
</Button> </Button>
</ModalBody> </ModalBody>