changed assign new job popout style
This commit is contained in:
victorAnumudu
@@ -300,7 +300,7 @@ const AssignTaskPopout = ({
|
||||
) : (
|
||||
<>
|
||||
<div
|
||||
className={`job-action-modal-body w-full md:grid ${
|
||||
className={`job-action-modal-body w-full min-h-[450px] max-h-[450px] overflow-y-auto md:grid ${
|
||||
taskType !== "new" ? "md:grid-cols-2" : "md:grid-cols-1"
|
||||
}`}
|
||||
>
|
||||
@@ -331,7 +331,7 @@ const AssignTaskPopout = ({
|
||||
</div>
|
||||
{/* Task Type === select */}
|
||||
{taskType == "select" && (
|
||||
<div className="p-4 w-full h-[400px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
|
||||
<div className="p-4 w-full h-[380px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
|
||||
{familyTask?.data?.length ? (
|
||||
familyTask?.data?.map((item, index) => (
|
||||
<div
|
||||
@@ -364,7 +364,7 @@ const AssignTaskPopout = ({
|
||||
</div>
|
||||
)}
|
||||
{taskType == "new" && (
|
||||
<div className="p-4 w-full h-[400px]">
|
||||
<div className="p-4 w-full">
|
||||
<NewTasks
|
||||
formState={formState}
|
||||
setFormState={setFormState}
|
||||
@@ -382,11 +382,19 @@ const AssignTaskPopout = ({
|
||||
<p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide border-b-2">
|
||||
{activeTask?.data?.title}
|
||||
</p>
|
||||
<div className="my-3">
|
||||
{/* <div className="my-3">
|
||||
<Detail
|
||||
label="Description"
|
||||
value={activeTask?.data?.description}
|
||||
/>
|
||||
</div> */}
|
||||
<div className="my-3 w-full">
|
||||
<label className="job-label">
|
||||
Description
|
||||
</label>
|
||||
<p className="p-1 text-sm text-slate-900 dark:text-white">
|
||||
{activeTask?.data?.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2">
|
||||
<div className="w-full">
|
||||
|
||||
@@ -49,11 +49,91 @@ export default function NewTasks({ formState, setFormState }) {
|
||||
|
||||
return (
|
||||
<form className="w-full flex justify-between items-start">
|
||||
<div className="flex flex-col gap-3 max-w-[77%]">
|
||||
<div className="w-full block sm:grid grid-cols-3 gap-2">
|
||||
|
||||
<div className="w-full flex flex-col gap-2 col-span-2">
|
||||
{/* Title */}
|
||||
<div className="field w-full">
|
||||
<label htmlFor="title" className="job-label">Title</label>
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
// label="Title"
|
||||
// labelClass="tracking-wide"
|
||||
inputBg="bg-slate-100"
|
||||
type="text"
|
||||
name="title"
|
||||
value={formState.title}
|
||||
inputHandler={handleInputChange}
|
||||
// blurHandler={props.handleBlur}
|
||||
// error={props.errors.title && props.touched.title && props.errors.title}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
{/* <div className="field w-full mb-[5px]">
|
||||
<label htmlFor="description" className="job-label">Description</label>
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
// label="Description"
|
||||
// labelClass="tracking-wide"
|
||||
inputBg="bg-slate-100"
|
||||
type="text"
|
||||
name="description"
|
||||
value={formState.description}
|
||||
inputHandler={handleInputChange}
|
||||
// blurHandler={props.handleBlur}
|
||||
// error={props.errors.description && props.touched.description && props.errors.description}
|
||||
/>
|
||||
</div> */}
|
||||
<div className="field flex flex-col sm:flex-row w-full gap-2">
|
||||
<div className="w-full">
|
||||
<label
|
||||
htmlFor="description"
|
||||
className='job-label'
|
||||
>
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
id="description"
|
||||
rows="5"
|
||||
className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px]`}
|
||||
style={{ resize: "none" }}
|
||||
name="description"
|
||||
value={formState.description}
|
||||
onChange={handleInputChange}
|
||||
// onBlur={props.handleBlur}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Details */}
|
||||
<div className="field flex flex-col sm:flex-row w-full gap-2">
|
||||
<div className="w-full">
|
||||
<label
|
||||
htmlFor="Job Delivery Details"
|
||||
className='job-label'
|
||||
>
|
||||
Job Delivery Details
|
||||
{/* {props.errors.job_detail && props.touched.job_detail && <span className="text-[12px] text-red-500">{props.errors.job_detail}</span>} */}
|
||||
</label>
|
||||
<textarea
|
||||
id="Job Delivery Details"
|
||||
rows="5"
|
||||
className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px]`}
|
||||
style={{ resize: "none" }}
|
||||
name="job_detail"
|
||||
value={formState.job_detail}
|
||||
onChange={handleInputChange}
|
||||
// onBlur={props.handleBlur}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* inputs starts here */}
|
||||
<div className="grid md:grid-cols-3 grid-cols-1 gap-6 mb-[5px]">
|
||||
<div className="w-full flex flex-col gap-2">
|
||||
{/* Currency */}
|
||||
<div className="field w-full mb-6 xl:mb-0">
|
||||
<div className="field w-full">
|
||||
<label
|
||||
htmlFor="country"
|
||||
className="job-label"
|
||||
@@ -65,7 +145,7 @@ export default function NewTasks({ formState, setFormState }) {
|
||||
id="country"
|
||||
name="country"
|
||||
value={formState.country}
|
||||
className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
|
||||
className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
|
||||
onChange={handleInputChange}
|
||||
// onBlur={props.handleBlur}
|
||||
>
|
||||
@@ -98,7 +178,7 @@ export default function NewTasks({ formState, setFormState }) {
|
||||
|
||||
{/* Price */}
|
||||
<div className="field w-full">
|
||||
<label htmlFor="price" className="job-label">Price</label>
|
||||
<label htmlFor="price" className="job-label">Reward</label>
|
||||
<InputCom
|
||||
fieldClass="px-6 text-right"
|
||||
// label="Price"
|
||||
@@ -115,7 +195,7 @@ export default function NewTasks({ formState, setFormState }) {
|
||||
</div>
|
||||
|
||||
{/* Duration */}
|
||||
<div className="field w-full mb-6 xl:mb-0">
|
||||
<div className="field w-full">
|
||||
<label
|
||||
htmlFor="timeline_days"
|
||||
className="job-label"
|
||||
@@ -127,7 +207,7 @@ export default function NewTasks({ formState, setFormState }) {
|
||||
id="timeline_days"
|
||||
name="timeline_days"
|
||||
value={formState.timeline_days}
|
||||
className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
|
||||
className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
|
||||
onChange={handleInputChange}
|
||||
// onBlur={props.handleBlur}
|
||||
>
|
||||
@@ -138,6 +218,7 @@ export default function NewTasks({ formState, setFormState }) {
|
||||
</option>
|
||||
{publicArray.map(({ name, duration }, idx) => (
|
||||
<option
|
||||
key={idx}
|
||||
className="text-slate-500 text-[13.975px]"
|
||||
value={duration}
|
||||
>
|
||||
@@ -148,74 +229,19 @@ export default function NewTasks({ formState, setFormState }) {
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<div className="field w-full mb-[5px]">
|
||||
<label htmlFor="title" className="job-label">Title</label>
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
// label="Title"
|
||||
// labelClass="tracking-wide"
|
||||
inputBg="bg-slate-100"
|
||||
type="text"
|
||||
name="title"
|
||||
value={formState.title}
|
||||
inputHandler={handleInputChange}
|
||||
// blurHandler={props.handleBlur}
|
||||
// error={props.errors.title && props.touched.title && props.errors.title}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="field w-full mb-[5px]">
|
||||
<label htmlFor="description" className="job-label">Description</label>
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
// label="Description"
|
||||
// labelClass="tracking-wide"
|
||||
inputBg="bg-slate-100"
|
||||
type="text"
|
||||
name="description"
|
||||
value={formState.description}
|
||||
inputHandler={handleInputChange}
|
||||
// blurHandler={props.handleBlur}
|
||||
// error={props.errors.description && props.touched.description && props.errors.description}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Details */}
|
||||
<div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
|
||||
{/* Banner Image */}
|
||||
<div className="w-full">
|
||||
<label
|
||||
htmlFor="Job Delivery Details"
|
||||
className='job-label'
|
||||
>
|
||||
Job Delivery Details
|
||||
{/* {props.errors.job_detail && props.touched.job_detail && <span className="text-[12px] text-red-500">{props.errors.job_detail}</span>} */}
|
||||
</label>
|
||||
<textarea
|
||||
id="Job Delivery Details"
|
||||
rows="5"
|
||||
className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px]`}
|
||||
style={{ resize: "none" }}
|
||||
name="job_detail"
|
||||
value={formState.job_detail}
|
||||
onChange={handleInputChange}
|
||||
// onBlur={props.handleBlur}
|
||||
/>
|
||||
<div className="h-32 w-full">
|
||||
<img
|
||||
src={selectImage}
|
||||
alt="task_banner_img"
|
||||
className="w-full h-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Banner Image */}
|
||||
<div className="max-w-[20%] w-full">
|
||||
<div className="h-32 w-full">
|
||||
<img
|
||||
src={selectImage}
|
||||
alt="task_banner_img"
|
||||
className="w-full h-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user