🐛 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
ref={ref}
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
)}
{...props}

View file

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