manage active job layout changed

src/components/Cards/HomeBannerOffersCard.jsx

@@ -5,10 +5,18 @@ import localImgLoad from "../../lib/localImgLoad";
 export default function HomeBannerOffersCard(props) {
     console.log("HomeBannerOffersCard-> ##->",props)
     const link_result = "/" + props.itemData.link_path;
+    var imgUrl = props.itemData.banner; //  ? this.state.nextImgSrc : this.state.song.imgSrc;
+    console.log("IMAGE FOR BANNER->",imgUrl);
+    var divStyle = {
+        backgroundImage: 'url(' + imgUrl + ')'
+    }
+    var linkDivStyle = "item w-full block group banner-630-340 " + divStyle;
+
+
     return (
         <Link
             to={link_result}
-            className="item w-full block group banner-630-340"
+            className={linkDivStyle}
         >
             <div className="flex flex-col justify-between h-full">
                 <div className="content flex justify-between items-center mb-5">

src/components/MyActiveJobs/ActiveJobMessage.jsx

@@ -48,7 +48,7 @@ export default function ActiveJobMessage({ activeJobMesList }) {
         :
         <tbody>
             <tr className='text-slate-500'>
-                <td className="p-2" colSpan={4}>No Purchase History Found!</td>
+                <td className="p-2" colSpan={4}>No Message Found!</td>
             </tr>
         </tbody>
         }

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -52,11 +52,10 @@ function ActiveJobs(props) {
   return (
     <Layout>
 
-        <div className="p-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0 rounded-lg shadow-lg bg-slate-100">
+        <div className="py-[20px] bg-white px-4 rounded-md shadow-md lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
+            {/* job title */}
             <div className="w-full lg:w-1/2">
-            <div className="py-[20px] bg-white px-4 rounded-md shadow-md">
+              <div className="w-full flex justify-start space-x-3 items-start">
-              {/* back btn and title */}
-              <div className="w-full flex justify-start space-x-3 items-center">
                 <button
                   type="button"
                   className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
@@ -72,29 +71,39 @@ function ActiveJobs(props) {
                     <path d="M19 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H19v-2z" />
                   </svg>
                 </button>
-                <h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
+                <h1 className="text-xl lg:text-2xl font-bold text-dark-gray dark:text-white tracking-wide">
                   {props.details?.title && props.details.title}
                 </h1>
               </div>
-              {/* END of back btn and title */}
 
-              <div className="mt-2 w-full flex flex-col-reverse lg:flex-row lg:justify-between lg:items-start lg:space-x-2">
+              <div className="w-full my-4">
-                <div className="w-full lg:w-2/3 my-2 lg:my-0">
+                <div className="pb-2 w-full flex items-center">
-                  <p className="text-base text-slate-700 dark:text-black">
+                  <p className="w-full lg:w-2/3 text-base text-slate-700 dark:text-black">
                     {props.details?.contract && props.details.contract}
                   </p>
+                  <p className="w-full lg:w-1/3 text-base text-sky-blue">
+                    {userDetails.firstname && userDetails.firstname}
+                  </p>
+                </div>
+                
                 <p className="text-base text-slate-700 dark:text-black">
                   <span className="font-semibold">Description: </span>
                   {props.details?.description && props.details.description}
                 </p>
+              </div>
+            </div>
+            {/* end of job title */}
+
+            {/* job details */}
+            <div className="w-full lg:w-1/2">
               <p className="text-base text-sky-blue">Delivery Detail</p>
-                  <div className="">
+              <div className="mt-2">
                   <p className="text-base text-slate-700 dark:text-black">
                     <span className="font-semibold">Due: </span>
                     {props.details?.delivery_date &&
                       props.details.delivery_date.split(" ")[0]}
                   </p>
-                    <p className="text-base text-slate-700 dark:text-black">
+                  <p className="py-2 text-base text-slate-700 dark:text-black">
                     {props.details?.delivery_date &&
                       props.details.delivery_date.split(" ")[1]}
                   </p>
@@ -103,19 +112,24 @@ function ActiveJobs(props) {
                   </p>
               </div>
             </div>
-                <div className="w-full lg:w-1/3 lg:text-center">
+            {/* end of job details */}
-                  <p className="text-base text-sky-blue">
-                    {userDetails.firstname && userDetails.firstname}
-                  </p>
-                </div>
-              </div>
         </div>
 
-            <div className="mt-5 bg-white p-4 rounded-md shadow-md">
+        <div className="my-4 py-[20px] bg-white px-4 rounded-md shadow-md lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
+            <div className="w-full lg:w-1/2">
+              <div className="">
+                <h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Actions</h1>
+                <p className="my-3 py-1 text-base">
+                  Waiting for the completion message from the client before you can approve.
+                </p>
+              </div>
+
+              {/* TEXTAREA SECTION */}
+              <div className="mt-3">
                 <div className="">
                   <p className="relative py-2 my-2 text-lg font-bold text-slate-600 dark:text-black border-b-2 border-slate-300 tracking-wide after:absolute after:-bottom-0.5 after:content-[''] after:w-[100px] after:h-[2px] after:bg-sky-blue after:left-0">Message(s)</p>
                   <textarea
-                  className="p-4 w-full text-base text-slate-600 border-y border-slate-300 outline-none"
+                    className="p-4 w-full text-base text-slate-600 border border-slate-300 outline-none"
                     rows="10"
                     style={{ resize: "none" }}
                     name='message'
@@ -147,8 +161,8 @@ function ActiveJobs(props) {
                   {/* End of error or success display */}
 
                 {/* Buttons Sections */}
-              <div className="py-2 mb-8 sm:flex sm:justify-center sm:items-center">
+                <div className="py-2 sm:flex sm:justify-center sm:items-center">
-                <div className="w-full sm:w-2/4 mb-5 sm:mb-0">
+                  <div className="w-full mb-3 sm:mb-0 sm:w-2/4">
                     <button
                       onClick={()=>{console.log('working')}}
                       type="button"
@@ -185,20 +199,11 @@ function ActiveJobs(props) {
                 </div>
                 {/* end of Buttons Sections  */}
               </div>
+              {/* END OF TEXTAREA */}
             </div>
 
-          {/* ACTION SECTION */}
+            {/* MESSAGE SECTION */}
-          <div className="w-full lg:w-1/2 h-full">
+            <div className="w-full lg:w-1/2">
-            <div className="py-[20px] bg-white px-4 rounded-md shadow-md">
-              <h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Actions</h1>
-
-              <p className="my-3 py-1 text-base">
-                Waiting for the completion message from the client before you can approve.
-              </p>
-            </div>
-
-            <div className="mt-5 bg-white p-4 rounded-md shadow-md">
-              <div className="">
               <p className="text-lg font-bold text-dark-gray dark:text-black tracking-wide">Message</p>
               {props.activeJobMesList.loading ?
               <LoadingSpinner size='16' color='sky-blue' />
@@ -206,9 +211,7 @@ function ActiveJobs(props) {
               <ActiveJobMessage activeJobMesList={props.activeJobMesList} />
               }
             </div>
-            </div>
+            {/* END OF MESSAGE */}
-
-          </div>
         </div>
 
     </Layout>

src/index.css

@@ -11,10 +11,12 @@
 }
 .siderCardHeader{
   margin: 40px 40px 10px 40px;
+  font-size: 24px;
+  font-weight: bolder;
 }
 .siderCardDescription{
-  margin: 30px;
+  margin: 20px 45px 10px 45px;
-  font-size: 24px;
+  font-size: 20px;
 }
 .siderCardButton{
   margin-top: 10px;