assign task text added

src/components/jobPopout/JobListPopout.jsx

@@ -250,8 +250,8 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
             </svg>
           </button>
         </div>
-        <div className="md:flex bg-white dark:bg-dark-white rounded-lg shadow-lg">
+        <div className="md:grid grid-cols-2 bg-white dark:bg-dark-white rounded-lg shadow-lg">
-          <div className="p-4 w-full md:w-2/4 md:border-r-2">
+          <div className="p-4 pb-3 w-full md:border-r-2">
             {/* <p className='text-lg font-semibold text-slate-900 tracking-wide'>{details.title}</p> */}
 
             {/* INPUT SECTION */}
@@ -277,7 +277,7 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
                 />
             </div>
 
-            <div className="my-3">
+            <div className="">
               <label className="w-full text-slate-900 dark:text-white tracking-wide font-semibold">
                 Delivery Detail
               </label>
@@ -293,7 +293,9 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
           </div>
 
           {/* ACTION SECTION */}
-          <div className="p-4 w-full md:w-2/4 h-full">
+          <div className="p-4 w-ful flex flex-col justify-between">
+            <h1 className="text-lg mt-3 font-medium tracking-wide text-black dark:text-white">Send this Task to:</h1>
+            <div className="flex flex-col grow">
               <div className="grid grid-cols-3 mt-4">
                 {tabs.map(item => (
                   <button 
@@ -308,7 +310,7 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
                   </button>
                 ))}
               </div>
-
+              <div className="grow flex flex-col bg-red-50 dark:bg-[#D85A5A] rounded-b-2xl">
                 {selectedTab == 'family' &&
                 <Formik
                   initialValues={initialValues}
@@ -317,7 +319,7 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
                 >
                   {(props) => {
                     return (
-                  <Form className="mb-4 hidden">
+                      <Form className="hidden">
                         {/* Assign to Family */}
                         <JobFieldInput
                           label="Assign to family"
@@ -329,6 +331,7 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
                           optionText="Select Family"
                           loader={loader?.jobFields?.family}
                           errorHandler={errorHandler}
+                          parentClass='w-full flex flex-col gap-4'
                         />
                         <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
                           {" "}
@@ -350,7 +353,7 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
                 >
                   {(props) => {
                     return (
-                  <Form className="mb-4">
+                      <Form className="">
                         {/* Offer this job to public input */}
                         <JobFieldInput
                           label="Offer this job to public"
@@ -362,6 +365,7 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
                           optionText="Select Duration"
                           loader={loader?.jobFields?.public}
                           errorHandler={errorHandler}
+                          parentClass='w-full flex flex-col gap-4'
                         />
                         <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
                           {" "}
@@ -383,7 +387,7 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
                 >
                   {(props) => {
                     return (
-                  <Form className="mb-4">
+                      <Form className="">
                         {/* Offer this job to individual input */}
                         <JobFieldInput
                           label="Offer this job to individual"
@@ -395,6 +399,7 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
                           btnText="Send Offer to Individual"
                           loader={loader?.jobFields?.individual}
                           errorHandler={errorHandler}
+                          parentClass='w-full flex flex-col gap-4'
                         />
                         <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
                           {" "}
@@ -417,7 +422,7 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
                 >
                   {(props) => {
                     return (
-                  <Form className="mb-4">
+                      <Form className="">
                         {/* Offer this job to your group input */}
                         <JobFieldInput
                           label="Offer this job to your Group"
@@ -429,6 +434,7 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
                           loader={loader?.jobFields?.group}
                           errorHandler={errorHandler}
                           data={groupList}
+                          parentClass='w-full flex flex-col gap-4'
                         />
                         <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
                           {" "}
@@ -441,6 +447,8 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
                   }}
                 </Formik>
                 }
+              </div>
+            </div>
 
             {requestStatus.message &&
               <p className={`mt-4 w-full text-lg ${requestStatus.status ? 'text-emerald-600' : 'text-red-600'}`}>{requestStatus.message}</p>
@@ -473,7 +481,7 @@ const JobFieldInput = ({
   data,
 }) => {
   return (
-    <div className="field w-full p-3 mb-2 bg-red-50 dark:bg-[#D85A5A] rounded-b-2xl">
+    <div className="field w-full h-full px-3 pt-5 pb-3 flex flex-col justify-between gap-4">
       {select && (
         <>
           <div className={`input-com ${parentClass}`}>
@@ -561,6 +569,7 @@ const JobFieldInput = ({
           value={value}
           inputHandler={inputHandler}
           inputBg="bg-white"
+          parentClass={`${parentClass}`}
         />
       )}