make dialog use tailwind

This commit is contained in:
Matthew Russell 2022-02-23 20:46:13 -08:00
parent bd77e15092
commit cb465ae37b

View File

@ -11,26 +11,8 @@ export function Dialog({ children, open, setOpen }: DialogProps) {
return ( return (
<DialogPrimitives.Root open={open} onOpenChange={(x) => setOpen(x)}> <DialogPrimitives.Root open={open} onOpenChange={(x) => setOpen(x)}>
<DialogPrimitives.Portal> <DialogPrimitives.Portal>
<DialogPrimitives.Overlay <DialogPrimitives.Overlay className="fixed inset-0 bg-black opacity-20" />
style={{ <DialogPrimitives.Content className="fixed w-[300px] w-px bg-white top-40 p-12 left-[calc(50%-150px)]">
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
background: 'rgba(0,0,0,0.3)',
}}
/>
<DialogPrimitives.Content
style={{
position: 'fixed',
width: 300,
background: 'white',
top: 40,
left: 'calc(50% - 150px)',
padding: 20,
}}
>
{children} {children}
</DialogPrimitives.Content> </DialogPrimitives.Content>
</DialogPrimitives.Portal> </DialogPrimitives.Portal>