update src/components/CustomSelectBox/index.js, src/components/DateRangePicker/index.js and src/components/FormInput/index.js

src/components/CustomSelectBox/index.js

@@ -2,7 +2,7 @@ import React from "react";
 
 const CustomSelectBox = ({ options }) => {
   return (
-    <select className="customizeSelect rounded text-xs mx-1 py-2 bg-[#F9F9F9] focus:bg-white border-[#E0E0E0] focus:border-[#2483E1] focus:ring-transparent">
+    <select className="customizeSelect rounded text-xs text-[#e0e0e0] py-2 bg-[#F9F9F9] focus:bg-white border-[#E0E0E0] focus:border-[#2483E1] focus:ring-transparent">
       {options.map((option, index) => (
         <option key={index}>{option.title}</option>
       ))}

src/components/DateRangePicker/index.js

@@ -27,9 +27,9 @@ function CustomRangeInput({ openCalendar, value }) {
   }, []);
 
   return (
-    <div className="flex flex-row items-center justify-center">
+    <div className="flex flex-row items-center justify-center mt-3">
       <input
-        style={{ width: "33%" }}
+        style={{ width: "45%" }}
         className="py-1 text-center text-sm rounded border border-gray-200 focus:outline-none focus:border-[#0074d9] focus:ring-[#0074d9] focus:ring-1"
         onFocus={openCalendar}
         value={value[0]}
@@ -37,7 +37,7 @@ function CustomRangeInput({ openCalendar, value }) {
       />
       <p className="mx-2 text-sm">تا</p>
       <input
-        style={{ width: "33%" }}
+        style={{ width: "45%" }}
         className="py-1 text-center text-sm rounded border border-gray-200 focus:outline-none focus:border-[#0074d9] focus:ring-[#0074d9] focus:ring-1"
         onFocus={openCalendar}
         value={value[1]}

src/components/FormInput/index.js

@@ -26,11 +26,13 @@ const FormInput = ({ items }) => {
           label="نام خانوادگی"
           type="text"
           borderClassname={`border border-[#E0E0E0] `}
+          inputClassname={`px-3 py-2 text-[#0F0543] focus:bg-white`}
         />
         <Input
           register={register("birthYear")}
           label="تاریخ تولد"
           type="number"
+          borderClassname={`border border-[#E0E0E0] `}
           inputClassname={`px-3 py-2 text-[#0F0543] focus:bg-white`}
         />
         <CustomSelectBox />
@@ -73,7 +75,9 @@ const FormInput = ({ items }) => {
         />
       </div>
       <div className="flex-grow flex-1 flex flex-col px-4 justify-between">
-        <lable>تاریخ ورود</lable>
+        <lable className="text-xs bg-[#F9F9F9] border border-[#e0e0e0] text-[#0F0543]  rounded p-2">
+          تاریخ ورود
+        </lable>
         <DateRangePicker />
       </div>
     </div>