update src/components/FormInput/index.js and src/components/PopupCard/index.js

src/components/FormInput/index.js

@@ -12,7 +12,7 @@ const FormInput = ({ items }) => {
   const { register, getValues } = useForm();
 
   return (
-    <div className="mx-auto w-fit mt-20 flex flex-row items-center justify-between divide-x-2 divide-[#F3F3F3] divide-x-reverse bg-white p-4 py-7 border border-gray-200 rounded-sm shadow-sm">
+    <div className="mx-auto w-fit mt-20 flex flex-row items-center justify-between divide-x-2 divide-[#F3F3F3] divide-x-reverse bg-white p-4 border border-gray-200 rounded-sm shadow-sm">
       <div className="flex-grow flex-1 flex flex-col gap-y-4 px-4">
         <Input
           register={register("firstName")}

src/components/PopupCard/index.js

@@ -38,30 +38,23 @@ const PopupCard = ({ selectedChecklist }) => {
       >
         <div className="relative p-4 w-full h-full md:h-auto">
           <div className="max-w-[920px] mx-auto relative bg-white rounded-lg shadow dark:bg-gray-700">
-            <div className="flex justify-between items-start p-5 rounded-t">
             {/* cancle icon */}
+            <div className="flex justify-between items-start p-5 rounded-t">
               <CancleIcon backgroundColor={"bg-[#F8F8F8]"} icon={cancleIcon} />
             </div>
             {/* modalBody */}
             <div className="mx-5">
               {/* top */}
-              <div className="flex flex-row">
+              <div className="flex flex-row items-center justify-between divide-x-2 divide-[#DBDBDB77] divide-x-reverse ">
                 {/* right */}
+                <div className="flex-grow flex-1 flex flex-col gap-y-4 px-4">
                   <Input />
-                {/* <OutlineInput
-                  divWidth="w-1/2"
-                  textClr={activeInput ? "text-[#22577E]" : "text-[#06BACE]"}
-                  borderClr={activeInput ? "#22577E" : "#06BACE"}
-                  outlineTitle={"نام کارت"}
-                  outlineTitleClr={activeInput ? "#22577E" : "#06BACE"}
-                  onFocus={() => setActiveInput(true)}
-                  onBlur={() => setActiveInput(false)}
-                /> */}
-                {/* divider */}
-                <div className="border border-[#DBDBDB77] rounded mx-5"></div>
+                </div>
                 {/* left */}
+                <div className="flex-grow flex-1 flex flex-col gap-y-4 px-4">
                   <Input />
                 </div>
+              </div>
               {/* divider */}
               <div className="border border-[#DBDBDB77] rounded my-5"></div>
               {/* middle */}
@@ -232,3 +225,15 @@ PopupCard.defaultProps = {
     },
   ],
 };
+
+{
+  /* <OutlineInput
+                  divWidth="w-1/2"
+                  textClr={activeInput ? "text-[#22577E]" : "text-[#06BACE]"}
+                  borderClr={activeInput ? "#22577E" : "#06BACE"}
+                  outlineTitle={"نام کارت"}
+                  outlineTitleClr={activeInput ? "#22577E" : "#06BACE"}
+                  onFocus={() => setActiveInput(true)}
+                  onBlur={() => setActiveInput(false)}
+                /> */
+}