🎨 style(formModal/index.tsx): adjust size and spacing of icons and text in FormModal component for better visual consistency

🐛 fix(formModal/index.tsx): add unique key prop to dynamically rendered elements in FormModal component to remove console warning
This commit is contained in:
Lucas Oliveira 2023-06-30 11:28:48 -03:00
commit 7fddffc12e

View file

@ -408,14 +408,14 @@ export default function FormModal({
<div className="w-2/5 h-full overflow-auto scrollbar-hide flex flex-col justify-start mr-6"> <div className="w-2/5 h-full overflow-auto scrollbar-hide flex flex-col justify-start mr-6">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<div className="flex py-2 items-center"> <div className="flex py-2 items-center">
<Variable className="w-6 h-6 pe-1 text-primary"></Variable> <Variable className="w-4 h-4 mr-1 text-primary"></Variable>
<span className="text-md font-semibold text-primary"> <span className="text-sm font-semibold text-primary">
Input Variables Input Variables
</span> </span>
</div> </div>
<div className="flex py-2 items-center"> <div className="flex py-2 items-center">
<MessageSquarePlus className="w-6 h-6 pe-1 mr-0.5 text-primary" /> <MessageSquarePlus className="w-4 h-4 mr-1 text-primary" />
<span className=" text-md font-semibold text-primary"> <span className="text-sm font-semibold text-primary">
Chat Input Chat Input
</span> </span>
</div> </div>
@ -423,7 +423,7 @@ export default function FormModal({
<Accordion type="multiple" className="w-full"> <Accordion type="multiple" className="w-full">
{Object.keys(tabsState[id.current].formKeysData.input_keys).map( {Object.keys(tabsState[id.current].formKeysData.input_keys).map(
(i, k) => ( (i, k) => (
<div className="flex items-start gap-3"> <div className="flex items-start gap-3" key={k}>
<AccordionItem className="w-full" key={k} value={i}> <AccordionItem className="w-full" key={k} value={i}>
<AccordionTrigger className="flex gap-2"> <AccordionTrigger className="flex gap-2">
<div className="flex items-center w-full justify-between"> <div className="flex items-center w-full justify-between">