🐛 fix(dialog.tsx): remove unnecessary animation classes to improve performance and simplify code

🐛 fix(EditNodeModal/index.tsx): adjust styling to improve layout and readability
This commit is contained in:
Cristhian Zanforlin Lousa 2023-07-03 10:03:44 -03:00
commit 2f469afe69
2 changed files with 7 additions and 7 deletions

View file

@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content <DialogPrimitive.Content
ref={ref} ref={ref}
className={cn( className={cn(
"fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0", "fixed z-50 grid w-full rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
className className
)} )}
{...props} {...props}

View file

@ -81,7 +81,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
return ( return (
<Dialog open={true} onOpenChange={setModalOpen}> <Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger asChild></DialogTrigger> <DialogTrigger asChild></DialogTrigger>
<DialogContent className="lg:max-w-[700px] "> <DialogContent className="lg:max-w-[700px] sm:max-w-[600px]">
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
<span className="pr-2">{data.type}</span> <span className="pr-2">{data.type}</span>
@ -89,16 +89,16 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
</DialogTitle> </DialogTitle>
<DialogDescription> <DialogDescription>
{data.node?.description} {data.node?.description}
<div className="flex pt-4"> <div className="flex pt-3">
<Variable className="h-5 w-5 stroke-2 pe-1 text-muted-foreground "></Variable> <Variable className="h-5 w-5 stroke-2 pe-1 text-muted-foreground "></Variable>
<span className="text-sm font-semibold text-primary "> <span className="text-sm font-semibold text-primary pb-3">
Parameters Parameters
</span> </span>
</div> </div>
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="flex h-fit max-h-[350px] w-full"> <div className="flex h-fit max-h-[400px] w-full">
<div <div
className={classNames( className={classNames(
"w-full rounded-lg border-[1px] border-input bg-background", "w-full rounded-lg border-[1px] border-input bg-background",
@ -135,7 +135,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
) )
.map((n, i) => ( .map((n, i) => (
<TableRow key={i} className="h-10"> <TableRow key={i} className="h-10">
<TableCell className="p-0 text-center text-sm text-foreground"> <TableCell className="p-0 text-center text-sm text-foreground truncate sm:px-3">
{data.node.template[n].name {data.node.template[n].name
? data.node.template[n].name ? data.node.template[n].name
: data.node.template[n].display_name} : data.node.template[n].display_name}