Compare commits

...

4 Commits

Author SHA1 Message Date
victorAnumudu 1f98a3eacb adjusted add job mobile view 2024-05-14 12:32:43 +01:00
tokslaw 031a2f6680 Merge branch 'assign-job-space' of WrenchBoard/Users-Wrench into master 2024-05-13 17:23:18 +00:00
tokslaw bf22570857 Merge branch 'add-job-rearrange' of WrenchBoard/Users-Wrench into master 2024-05-13 17:22:57 +00:00
victorAnumudu 89aa5e0aef rearranged add job 2024-05-13 11:57:35 +01:00
11 changed files with 68 additions and 32 deletions
+43 -7
View File
@@ -92,13 +92,13 @@ function AddJob({ popUpHandler, categories }) {
>
{(props) => {
return (
<Form>
<div className="add-job p-5 w-full bg-white dark:bg-dark-white dark:text-white rounded-md flex flex-col justify-between">
<Form className='contents'>
<div className="add-job p-5 w-full h-full rounded-md flex flex-col justify-between overflow-y-auto">
<div className="flex flex-col-reverse sm:flex-row">
<div className="fields w-full">
{/* inputs starts here */}
<div className="xl:flex xl:space-x-7 mb-[5px]">
<div className="field w-full mb-6 xl:mb-0">
<div className="field w-full mb-[5px] xl:mb-0">
<label
htmlFor="country"
className="job-label job-label-flex"
@@ -114,7 +114,7 @@ function AddJob({ popUpHandler, categories }) {
id="country"
name="country"
value={props.values.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 border`}
className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
onChange={props.handleChange}
onBlur={props.handleBlur}
disabled={walletDetails.data.length == 1}
@@ -159,7 +159,7 @@ function AddJob({ popUpHandler, categories }) {
</div>
{/* Price */}
<div className="field w-full">
<div className="field w-full mb-[5px] xl:mb-0">
<InputCom
fieldClass="px-6 text-right flex"
label="Price"
@@ -177,6 +177,42 @@ function AddJob({ popUpHandler, categories }) {
}
/>
</div>
{/* Timeline */}
<div className="field w-full mb-[5px] xl:mb-0">
<label
className="job-label job-label-flex"
htmlFor="timeline_days"
>
Timeline
<span className="text-green-700 text-[12px] tracking-wide">
- Duration
</span>
</label>
<Field
component="select"
name="timeline_days"
className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border ${
props.errors.timeline_days &&
props.touched.timeline_days
? "border-[#ff0a0a63] shadow-red-500 animate-shake"
: "dark:border-[#5e6278]"
}`}
value={props.values.timeline_days}
>
<option value="" className='text-slate-500 text-lg'>Select Duration</option>
{publicArray.map(({ name, duration }, idx) => (
<option
key={idx}
className="text-slate-500 text-lg"
value={duration}
>
{name}
</option>
))}
</Field>
</div>
</div>
{/* Title */}
@@ -288,7 +324,7 @@ function AddJob({ popUpHandler, categories }) {
</div>
</div>
<div className="field w-full mb-[5px]">
{/* <div className="field w-full mb-[5px]">
<div className={`flex items-center justify-between mb-2.5`}>
<label
className="job-label"
@@ -323,7 +359,7 @@ function AddJob({ popUpHandler, categories }) {
</option>
))}
</Field>
</div>
</div> */}
{/* inputs ends here */}
</div>
</div>
+3 -3
View File
@@ -18,13 +18,13 @@ export default function LoginLayout({ slogan, children }) {
backgroundImage: `url(${countryMode == "NG" ? bgImgNig : bgImgCom})`,
}}
>
<div className={`w-full grid grid-cols-1 lg:grid-cols-2`}>
<div className={`w-full grid grid-cols-1 xl:grid-cols-2`}>
{/* <div
className={`auth-bg hidden lg:block bg-blue-50 relative bg-cover bg-no-repeat border-0 after:content-[''] after:absolute after:inset-0`}
className={`auth-bg hidden xl:block bg-blue-50 relative bg-cover bg-no-repeat border-0 after:content-[''] after:absolute after:inset-0`}
style={{backgroundImage: `url(${bgImg})`}}
>
</div> */}
<div className="p-5 sm:p-7 flex place-content-center lg:col-start-2">
<div className="p-5 sm:p-7 flex place-content-center xl:col-start-2">
<div className="py-5 w-full sm:w-11/12 max-w-[550px] shadow-md bg-slate-50 dark:bg-dark-white rounded-[0.475rem]">
<div className="w-full flex justify-center items-center">
{children && children}
@@ -85,10 +85,10 @@ export default function AssignMediaTask({
>
{(props) => {
return (
<Form>
<Form className='contents'>
<>
<div
className={`job-action-modal-body w-full h-[500px] overflow-y-auto md:grid md:grid-cols-2`}
className={`job-action-modal-body w-full h-full overflow-y-auto md:grid md:grid-cols-2`}
>
<div className="p-4 pt-0">
<div className="p-4 w-full h-[450px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
@@ -124,7 +124,7 @@ export default function AssignMediaTask({
{/*Right Hand Side for details && Task Type === select */}
<>
{commonMedia?.data?.length > 0 ? (
<div className="p-4 py-0 h-full">
<div className="p-4 py-0 h-auto">
<div className="w-full">
<div className="mb-3 w-full">
<label className="job-label">
@@ -33,7 +33,7 @@ export default function AssignPrevNewTask({
) : (
<>
<div
className={`job-action-modal-body w-full h-[500px] overflow-y-auto md:grid ${
className={`job-action-modal-body w-full h-full overflow-y-auto md:grid ${
taskType !== "new" ? "md:grid-cols-2" : "md:grid-cols-1"
}`}
>
@@ -311,7 +311,7 @@ const AssignTaskPopout = ({
return (
<>
<ModalCom action={action} situation={situation}>
<div className="w-11/12 lg:w-[700px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
<div className="modal-container">
<div className="modal-header-con">
<h1 className="modal-title">
{details ? (
@@ -364,7 +364,7 @@ const AssignTaskPopout = ({
</svg>
</button>
</div>
<div className="modal-body">
<div className="modal-body-wrapper p-[0!important]">
<div className="px-4 py-2 w-full flex items-center gap-4">
<button
name='task'
@@ -383,7 +383,7 @@ const AssignTaskPopout = ({
Media
</button>
</div>
<div className="">
<div className="contents">
{assignType == 'task' ?
<AssignPrevNewTask
jobList={jobList}
@@ -93,9 +93,9 @@ const FamilyWaitlist = memo(
</div>
</div>
<div className="px-2 flex flex-col items-center justify-center">
<p className="text-sm font-bold text-dark-gray dark:text-white">
{/* <p className="text-sm font-bold text-dark-gray dark:text-white">
{addedDate}
</p>
</p> */}
<p className="text-xs py-1.5 w-[70px] cursor-default tracking-wide rounded-full bg-gold text-white flex justify-center items-center">
{value.status_text}
</p>
+2 -2
View File
@@ -14,9 +14,9 @@ export default function ModalCom({ action, children, situation, isOpen, classNam
<div className="modal-com">
<div
onClick={action || isOpen}
className="fixed top-0 left-0 w-full lg:h-[100vh] h-full bg-black bg-opacity-40 backdrop-filter backdrop-blur-sm z-50"
className="fixed top-0 left-0 bottom-0 w-full bg-black bg-opacity-40 backdrop-filter backdrop-blur-sm z-50"
></div>
<div className={`fixed lg:h-100vh h-full z-[99999999999999] w-full lg:w-auto inset-0 flex flex-col justify-center items-center ${className}`}>
<div className={`fixed h-full z-[99999999999999] w-full lg:w-auto inset-0 flex flex-col justify-center items-center ${className}`}>
{children && children}
</div>
</div>
+1 -1
View File
@@ -145,7 +145,7 @@ function DeleteJobPopout({ details, onClose, situation }) {
{/* End of error or success display */}
</div>
<div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
<div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
<div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center gap-4">
<button
onClick={onClose}
type="button"
@@ -254,7 +254,7 @@ const EditJobPopoutNew = ({
<div className="flex flex-col-reverse sm:flex-row">
<div className="fields w-full">
<div className="sm:flex sm:space-x-7 mb-[0.5rem]">
<div className="field w-full mb-6 sm:mb-0">
<div className="field w-full mb-[0.5rem] sm:mb-0">
<InputCom
fieldClass="px-6 cursor-default"
label="Currency"
@@ -271,7 +271,7 @@ const EditJobPopoutNew = ({
</div>
{/* Price */}
<div className="field w-full mb-6 sm:mb-0">
<div className="field w-full mb-[0.5rem] sm:mb-0">
<InputCom
fieldClass="px-6 text-right"
label="Price"
@@ -289,7 +289,7 @@ const EditJobPopoutNew = ({
/>
</div>
<div className="field w-full">
<div className="field w-full mb-[0.5rem] sm:mb-0">
<label
className="job-label"
htmlFor="timeline_days"
@@ -302,15 +302,15 @@ const EditJobPopoutNew = ({
<Field
component="select"
name="timeline_days"
className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none ${
className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border ${
props.errors.timeline_days &&
props.touched.timeline_days
? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
: "border border-[#f5f8fa] dark:border-[#5e6278]"
: "dark:border-[#5e6278]"
}`}
value={props.values.timeline_days}
>
<option value="">Select Duration</option>
<option value="" className='text-slate-500 text-lg'>Select Duration</option>
{publicArray.map(({ name, duration }, idx) => (
<option
key={duration}
+3 -3
View File
@@ -160,9 +160,9 @@
@apply flex items-center gap-2
}
/* STYLES FOR MODAL 'NOTE => VIEW JOB EDIT MODAL FOR SAMPLE USAGE'*/
/* STYLES FOR MODAL 'NOTE => VIEW JOB EDIT MODAL/ADD JOB MODAL FOR SAMPLE USAGE'*/
.modal-container {
@apply w-11/12 md:w-[700px] mx-auto h-full flex flex-col bg-white dark:bg-dark-white lg:rounded-2xl overflow-hidden
@apply w-11/12 md:w-[700px] mx-auto h-auto max-h-full flex flex-col bg-white dark:bg-dark-white lg:rounded-2xl overflow-hidden
}
/* Modal Header section*/
@@ -183,7 +183,7 @@
/* modal footer */
.modal-footer-wrapper{
@apply p-4 border-t-2 flex justify-between items-center
@apply p-4 border-t-2 flex justify-between items-center w-full
}
/* END OF STYLES FOR MODAL BOX */
+1 -1
View File
@@ -5,7 +5,7 @@ import ModalCom from "../components/Helpers/ModalCom";
function AddJobPage({ action, situation, categories }) {
return (
<ModalCom action={action} situation={situation}>
<div className="lg:w-[600px] w-11/12 lg:overflow-hidden lg:rounded-2xl bg-white dark:bg-dark-white dark:text-white">
<div className="modal-container">
<div className="modal-header-con">
<h1 className="modal-title">
New Job