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

src/components/AnimatedInput/Input.js

@@ -10,6 +10,8 @@ const Input = ({
   label,
   borderClassname,
   inputClassname,
+  placeholderClass,
+  activePlaceholderClass,
   type,
   maxLength,
   max,
@@ -23,17 +25,17 @@ const Input = ({
     <div
       onClick={onClick}
       className={
-        "h-full w-full flex flex-row items-center rounded border mx-1 relative  " +
+        "h-full w-full flex flex-row items-center rounded relative  " +
         borderClassname +
         (value ? "bg-white border rounded" : "bg-transparent")
       }
     >
       <div
         className={
-          "text-xs absolute transition-all duration-300 pointer-events-none px-3  transform -translate-x-[7px]" +
+          "text-xs absolute transition-all duration-300 pointer-events-none px-3  transform -translate-x-[4px]" +
           (value
-            ? ` text-blue-600 bg-white top-[-10px]`
+            ? ` ${activePlaceholderClass} +  top-[-10px]`
-            : " text-gray-400 top-[10px]")
+            : ` ${placeholderClass} + top-[10px]`)
         }
       >
         {label}
@@ -54,7 +56,7 @@ const Input = ({
             if (!isNaN(min) && +e.target.value < min) value = min;
             e.target.value = value;
           }}
-          className={`rtl w-full h-full px-4 py-2 outline-0 text-xs rounded-md text-[#0F0543] focus:bg-white border-[#E0E0E0] focus:border-[#2483E1] focus:ring-transparent 
+          className={`rtl w-full h-full outline-0 text-xs rounded-md border-transparent focus:border-transparent focus:ring-transparent ${inputClassname}  
               ${!value ? "bg-[#F9F9F9] " : "bg-white"} `}
           onChange={(e) => setValue(e.target.value)}
           inputMode={type === "number" ? "numeric" : ""}
@@ -75,5 +77,7 @@ const Input = ({
 export default Input;
 
 Input.defaultProps = {
-  // borderClassname: "border-[#E0E0E0]",
+  inputClassname: "",
+  placeholderClass: "text-red-600",
+  activePlaceholderClass: "text-blue-600 bg-white",
 };

src/components/FormInput/index.js

@@ -16,29 +16,22 @@ const FormInput = ({ items }) => {
       <div className="flex-grow flex-1 flex flex-col gap-y-4 px-4">
         <Input
           register={register("firstName")}
-          // defaultValue={info?.firstName}
           label="نام "
           type="text"
-          borderClassname={`border-transparent `}
+          borderClassname={`border border-[#E0E0E0] `}
-          className={``}
+          inputClassname={`px-3 py-2 text-[#0F0543] focus:bg-white`}
-          // borderClassname={` ${
-          //   selectedInput === true ? "border-[#2483E1]" : "border-[#E0E0E0]"
-          // }`}
-          // onClick={() => setSelectedInput(true)}
         />
         <Input
           register={register("lastName")}
           label="نام خانوادگی"
           type="text"
-          borderClassname={`border-transparent `}
+          borderClassname={`border border-[#E0E0E0] `}
-          className={``}
         />
         <Input
           register={register("birthYear")}
           label="تاریخ تولد"
           type="number"
-          borderClassname={`border-transparent `}
+          inputClassname={`px-3 py-2 text-[#0F0543] focus:bg-white`}
-          className={``}
         />
         <CustomSelectBox />
         <CustomSwitch
@@ -53,42 +46,35 @@ const FormInput = ({ items }) => {
           register={register("mobileNumber")}
           label="شماره تماس"
           type="number"
-          borderClassname={`border-transparent `}
+          borderClassname={`border border-[#E0E0E0] `}
-          className={``}
+          inputClassname={`px-3 py-2 text-[#0F0543] focus:bg-white`}
         />
         <Input
           register={register("job")}
           label="شغل"
           type="text"
-          borderClassname={`border-transparent `}
+          borderClassname={`border border-[#E0E0E0] `}
-          className={``}
+          inputClassname={`px-3 py-2 text-[#0F0543] focus:bg-white`}
         />
         <CustomSelectBox options={items} />
         <Input
           register={register("foundus")}
           label="نحوه آشنایی با موکب"
           type="text"
-          borderClassname={`border-transparent `}
+          borderClassname={`border border-[#E0E0E0] `}
-          className={``}
+          inputClassname={`px-3 py-2 text-[#0F0543] focus:bg-white`}
         />
         <Input
           register={register("idCard")}
           label="کد ملی"
           type="number"
-          borderClassname={`border-transparent `}
+          borderClassname={`border border-[#E0E0E0] `}
-          className={``}
+          inputClassname={`px-3 py-2 text-[#0F0543] focus:bg-white`}
         />
       </div>
       <div className="flex-grow flex-1 flex flex-col px-4 justify-between">
         <lable>تاریخ ورود</lable>
-        <DateRangePicker />{" "}
+        <DateRangePicker />
-        {/* <Input
-          register={register("lastName")}
-          label="تاریخ ورود"
-          type="text"
-          borderClassname={`border-transparent `}
-          className={``}
-        /> */}
       </div>
     </div>
   );

src/components/PopupCard/index.js

@@ -1,7 +1,10 @@
 // it has style inside index.scss ---> // Start PopupCard && end PopupCard
 
 import React, { useState } from "react";
-import "./index.scss";
+import { useForm } from "react-hook-form";
+
+import Input from "../AnimatedInput/Input";
+
 import CancleIcon from "../CancleIcon";
 
 import cancleIcon from "./cancle-icon.svg";
@@ -13,12 +16,12 @@ import OutlineInput from "../OutlineInput";
 import OutlineTextarea from "../OutlineTextarea";
 import ButtonNewDesign from "../ButtonNewDesign";
 import ProfilePicNextToEachOther from "../ProfilePicNextToEachOther";
-import Input from "../AnimatedInput/Input";
 
 const PopupCard = ({ selectedChecklist }) => {
   // const [activeInput, setActiveInput] = useState(false);
 
   const [checklist, setChecklist] = useState(0);
+  const { register, getValues } = useForm();
 
   return (
     <section className="">
@@ -48,11 +51,23 @@ const PopupCard = ({ selectedChecklist }) => {
               <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 />
+                  <Input
+                    register={register("firstName")}
+                    label="نام "
+                    type="text"
+                    borderClassname={`border-2 border-[#06BACE] `}
+                    inputClassname={`px-4 py-2 text-[#0F0543] focus:bg-white`}
+                  />
                 </div>
                 {/* left */}
                 <div className="flex-grow flex-1 flex flex-col gap-y-4 px-4">
-                  <Input />
+                  <Input
+                    register={register("firstName")}
+                    label="نام "
+                    type="text"
+                    borderClassname={`border-2 border-[#06BACE] `}
+                    inputClassname={`px-4 py-2 text-[#0F0543] focus:bg-white`}
+                  />
                 </div>
               </div>
               {/* divider */}